/* ============================================================
   CRUMB VMS Design Tokens (consolidated export)
   Follow the trail. Self-hosted video management.
   Drop this file into any project for the full token set.
   Fonts: Space Grotesk + JetBrains Mono (load from Google Fonts).
   ============================================================ */

/* Crumb VMS Color tokens.
   Direction: "The Trail". Forensic but warm, investigative, operator-grade.
   Base palette is dark/charcoal with a single warm amber accent (the playhead). */
:root {
  /* ---- Brand raw palette ---- */
  --crumb-charcoal:   #15161A; /* app background, deepest surface */
  --crumb-panel:      #1E2026; /* raised panels, cards, toolbars */
  --crumb-amber:      #E8A33D; /* primary accent. The playhead / final pin. */
  --crumb-slate:      #5B6472; /* secondary text, inactive UI, hairlines */
  --crumb-offwhite:   #E8E9ED; /* primary text on dark */

  /* ---- Extended neutrals (tuned around charcoal/panel) ---- */
  --crumb-black:      #0E0F12; /* below-charcoal, scrims, true ground */
  --crumb-surface-2:  #25272E; /* panel hover / nested panel */
  --crumb-surface-3:  #2E313A; /* input wells, track backgrounds */
  --crumb-line:       #33363F; /* default border / divider */
  --crumb-line-soft:  #262932; /* faint divider */
  --crumb-slate-dim:  #424A57; /* disabled text, ghost icons */
  --crumb-slate-lite: #8B93A1; /* muted-but-readable label text */
  --crumb-white:      #F4F5F8; /* high-emphasis text, near-white */

  /* ---- Amber ramp (the accent, for states + glows) ---- */
  --crumb-amber-100:  #F7E3BE;
  --crumb-amber-300:  #F0C170;
  --crumb-amber-500:  #E8A33D; /* = --crumb-amber */
  --crumb-amber-600:  #D08A24;
  --crumb-amber-700:  #A66B16;
  --crumb-amber-glow: rgba(232, 163, 61, 0.22); /* subtle accent glow only */

  /* ---- Semantic status (forensic / operator vocabulary) ---- */
  --crumb-rec:        #E5484D; /* recording / alert / motion event */
  --crumb-rec-dim:    #5A2A2C;
  --crumb-live:       #4FB477; /* live / online / healthy */
  --crumb-live-dim:   #234436;
  --crumb-info:       #5E9BD6; /* informational, links in body */
  --crumb-warn:       #E8A33D; /* warning reuses amber */

  /* ============================================================
     Semantic aliases. Reference these in components, not raw vars.
     ============================================================ */
  --bg-app:           var(--crumb-charcoal);
  --bg-sunken:        var(--crumb-black);
  --surface-panel:    var(--crumb-panel);
  --surface-raised:   var(--crumb-surface-2);
  --surface-well:     var(--crumb-surface-3);

  --text-primary:     var(--crumb-offwhite);
  --text-strong:      var(--crumb-white);
  --text-muted:       var(--crumb-slate-lite);
  --text-faint:       var(--crumb-slate);
  --text-disabled:    var(--crumb-slate-dim);
  --text-on-accent:   var(--crumb-black);

  --border-default:   var(--crumb-line);
  --border-soft:      var(--crumb-line-soft);
  --border-strong:    var(--crumb-slate-dim);

  --accent:           var(--crumb-amber-500);
  --accent-hover:     var(--crumb-amber-300);
  --accent-press:     var(--crumb-amber-600);
  --accent-glow:      var(--crumb-amber-glow);

  --status-rec:       var(--crumb-rec);
  --status-live:      var(--crumb-live);
  --status-info:      var(--crumb-info);
  --status-warn:      var(--crumb-warn);

  --focus-ring:       var(--crumb-amber-500);
}

/* Crumb VMS Typography tokens.
   Space Grotesk for display + UI; JetBrains Mono for data, timestamps, code.
   Mono is load-bearing in this brand: timestamps, camera IDs, durations,
   coordinates. Anything "forensic" is set in mono. */
:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---- Type scale (1.250 major-third-ish, tuned) ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;

  /* ---- Line heights ---- */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em; /* uppercase mono labels / eyebrows */

  /* ---- Semantic roles ---- */
  --type-display:  var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-title:    var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-heading:  var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-body:     var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-ui);
  --type-label:    var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-ui);
  --type-mono:     var(--weight-regular) var(--text-sm)/var(--leading-snug) var(--font-mono);
  --type-eyebrow:  var(--weight-medium) var(--text-2xs)/1 var(--font-mono);
}

/* Crumb VMS Spacing, radius, shadow, motion tokens.
   Operator-grade UI: tight, gridded, 4px base. Low-key shadows (dark UI
   relies on borders + elevation tints more than drop shadows). */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius (restrained; operator tools are crisp) ---- */
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill:999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --hairline: 1px solid var(--border-soft);

  /* ---- Shadows (dark UI: subtle, plus the one amber glow) ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.55);
  --shadow-pop:  0 16px 48px rgba(0,0,0,0.60);
  --glow-accent: 0 0 0 1px var(--accent-glow), 0 0 20px var(--accent-glow);

  /* ---- Motion (investigative, deliberate; ease into place, no bounce) ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --rail-width: 248px;
}