/* ─────────────────────────────────────────────────────────────
   FIELD REPORT — DESIGN TOKENS
   The single source of truth. Two surfaces share these:
   • Marketing site (editorial — serif + mono accents)
   • Web admin + Mobile (functional — DM Sans + JetBrains Mono, retro console chrome)
   Pull from this file. Do not redefine values inline.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── INK (text + dark surfaces) ───────────────────────────── */
  --fr-ink:        #0F172A;   /* primary text, dark backgrounds */
  --fr-ink-soft:   #1E293B;
  --fr-ink-mute:   #475569;   /* secondary text */
  --fr-ink-faint:  #6B7280;   /* tertiary, captions */

  /* ── PAPER (light surfaces) ───────────────────────────────── */
  --fr-bg:         #F3F4F6;   /* page bg — cool grey */
  --fr-bg-deep:    #E5E7EB;
  --fr-paper:      #FAFAFA;   /* cards, panels */
  --fr-white:      #FFFFFF;

  /* ── ACCENTS ──────────────────────────────────────────────── */
  --fr-accent:       #1E4D8F; /* editorial blue — cohesive with logo */
  --fr-accent-deep:  #15396A;
  --fr-accent-soft:  #B8CCE4;
  --fr-gold:         #C9963A; /* derived from brand amber */
  --fr-gold-soft:    #E8C878;
  --fr-wine:         #334155; /* slate — cool editorial neutral */

  /* ── STATUS (also used as inventory thresholds in mobile) ── */
  --fr-positive: #0F6E56;     /* marketing site / "Good" */
  --fr-success:  #16A34A;     /* mobile app — qty > 50 */
  --fr-warning:  #F59E0B;     /* mobile app — qty 20-50 */
  --fr-error:    #DC2626;     /* mobile app — qty < 20 */
  --fr-error-bg: #FEF2F2;
  --fr-error-fg: #B91C1C;

  /* ── RULES & SHADOWS ─────────────────────────────────────── */
  --fr-rule:         rgba(15, 23, 42, 0.08);
  --fr-rule-strong:  rgba(15, 23, 42, 0.16);
  --fr-shadow-soft:  0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
  --fr-shadow-lift:  0 2px 4px rgba(15,23,42,0.05), 0 18px 48px rgba(15,23,42,0.10);
  --fr-shadow-drop:  0 4px 8px rgba(15,23,42,0.06), 0 32px 80px rgba(15,23,42,0.14);

  /* ── TYPE FAMILIES ────────────────────────────────────────── */
  --fr-serif:    'Instrument Serif', 'Times New Roman', serif;
  --fr-sans:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --fr-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --fr-typewrite:'Special Elite', 'Courier New', monospace; /* logo wordmark only */

  /* ── SPACING (matches mobile theme exactly) ───────────────── */
  --fr-space-xs:  4px;
  --fr-space-sm:  8px;
  --fr-space-md:  16px;
  --fr-space-lg:  24px;
  --fr-space-xl:  32px;
  --fr-space-xxl: 48px;

  /* ── RADIUS ───────────────────────────────────────────────── */
  --fr-radius-sm:   4px;
  --fr-radius-md:   8px;
  --fr-radius-lg:   16px;
  --fr-radius-full: 9999px;

  /* ── MOTION ───────────────────────────────────────────────── */
  --fr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fr-dur-fast: 160ms;
  --fr-dur-base: 240ms;
  --fr-dur-slow: 480ms;
  /* ── RETRO CONSOLE (hardware chrome — constant, never client-themed) ── */
  --fr-housing-top: #334155;
  --fr-housing-mid: #1B2536;
  --fr-housing-bot: #0F172A;
  --fr-well:        #0A1424;   /* dark socket an arcade key sits in */
  --fr-track:       #0B1526;   /* recessed control track / input well */
  --fr-key-top:     #3E6FB5;   /* domed key gradient (FR blue) */
  --fr-key-mid:     #1E4D8F;
  --fr-key-bot:     #15396A;
  --fr-slate-key-top: #41506A;
  --fr-slate-key-bot: #16202F;
  --fr-lcd:         #C7D0C2;   /* green LCD surface */
  --fr-lcd-ink:     #25301F;
  --fr-lcd-ink-muted: rgba(37, 48, 31, 0.7);
  --fr-led-green:   #16A34A;
  --fr-led-amber:   #E8B54F;
  --fr-led-blue:    #9CC0F0;
  --fr-led-red:     #DC2626;
}

/* ── REUSABLE HELPERS used across system pages ─────────────── */
.fr-eyebrow {
  font-family: var(--fr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fr-ink-faint);
}
.fr-h1, .fr-h2, .fr-h3 { font-family: var(--fr-serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--fr-ink); }
.fr-h1 { font-size: clamp(48px, 6vw, 88px); }
.fr-h2 { font-size: clamp(36px, 4vw, 56px); }
.fr-h3 { font-size: clamp(24px, 2.4vw, 32px); }
.fr-body  { font-family: var(--fr-sans); font-size: 16px; line-height: 1.55; color: var(--fr-ink); }
.fr-meta  { font-family: var(--fr-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-ink-faint); }
.fr-em    { font-style: italic; color: var(--fr-accent); }