/* ═══════════════════════════════════════════════════════════════════════════
   FaceCheck Platform — Design Tokens v2.0  ·  "Obsidian Precision" (Task 11.2.2)
   Single source of truth for all visual values.
   Every component, every page, every future screen inherits from here.

   Dark is the operational default: deep obsidian surfaces, one bright lime for
   action / success / live, soft lavender for secondary & navigation support,
   off-white text, coral reserved strictly for error / blocked / destructive.
   Depth comes from tonal layering + 1px borders + spacing + typography —
   never from large drop shadows, glass, gradients or glow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted type (on-premise, no CDN) ─────────────────────────────────
   Sora — display headings & major KPIs
   Hanken Grotesk — body / UI copy
   JetBrains Mono — labels, metadata, operational microcopy
   woff2 files live beside this stylesheet in ./fonts/ (identical copy in every
   app dir). Latin only; Arabic falls through to Noto Kufi / Cairo / Geeza.
──────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/sora-400.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/sora-600.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/sora-700.woff2') format('woff2'); }

@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/hanken-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/hanken-500.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/hanken-600.woff2') format('woff2'); }

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jbmono-500.woff2') format('woff2'); }

:root {

  /* ── Color Primitives ────────────────────────────────────────────────────
     Raw palette — do not use directly in components. Use semantic tokens.
  ──────────────────────────────────────────────────────────────────────── */

  /* Obsidian neutrals (warm-green bias, from the Obsidian Precision system) */
  --ob-1000: #0d0f0c;   /* deepest — inset / canvas floor */
  --ob-950:  #121411;   /* page background */
  --ob-900:  #1a1c19;   /* raised surface / cards */
  --ob-850:  #1e201d;   /* elevated — drawer, modal, popover */
  --ob-800:  #292b27;   /* overlay / hover on surface */
  --ob-700:  #333532;   /* strongest interactive surface */
  --ob-600:  #44483b;   /* default border */
  --ob-500:  #5b5f4f;   /* strong border / disabled text */
  --ob-400:  #8f9282;   /* muted text / outline */
  --ob-200:  #c5c8b7;   /* secondary text */
  --ob-100:  #e3e3dd;   /* primary text (off-white) */

  --lime-300: #e4fbb4;
  --lime-400: #d9f99d;   /* PRIMARY — action / success / live / active nav */
  --lime-500: #c2e888;
  --lime-700: #4d661c;   /* light-mode lime (white text passes AA) */
  --lime-900: #243600;   /* text/icon on a lime fill */

  --lav-300: #d7d7ff;
  --lav-400: #c1c1ff;    /* SECONDARY — navigation support / non-critical UI */
  --lav-700: #4d4db0;    /* light-mode lavender */

  --coral-400: #ffb4ab;  /* ERROR / blocked / destructive — must stay rare */
  --coral-700: #b4241a;  /* light-mode coral */

  --sand-400: #e8c97a;   /* warning — restrained, never competes with lime */
  --sand-700: #8a6d1e;

  /* ── Semantic Background — tonal layers, not shadow ──────────────────── */

  --color-bg:           var(--ob-950);   /* Level 0 — page background */
  --color-bg-surface:   var(--ob-900);   /* Level 1 — card / panel / sidebar */
  --color-bg-elevated:  var(--ob-850);   /* Level 3 — drawer, modal, popover */
  --color-bg-overlay:   var(--ob-800);   /* hover states on surface */
  --color-bg-input:     var(--ob-1000);  /* Level 2 — inset form fields */

  /* ── Semantic Border — 1px structural strokes ───────────────────────── */

  --color-border-subtle:  #24261f;   /* lowest-contrast divider, still visible on surface */
  --color-border-default: var(--ob-600);   /* default card / input edge */
  --color-border-strong:  var(--ob-500);   /* raised / hover-adjacent */
  --color-border-focus:   rgba(217, 249, 157, 0.70);   /* lime */

  /* ── Semantic Text ───────────────────────────────────────────────────── */

  --color-text-primary:   var(--ob-100);  /* headings, values */
  --color-text-secondary: var(--ob-200);  /* labels, captions */
  --color-text-tertiary:  var(--ob-400);  /* placeholders, muted; AA on all dark surfaces */
  --color-text-disabled:  var(--ob-500);  /* disabled state */
  --color-text-inverse:   var(--lime-900);/* text on a lime fill */

  /* ── Brand = LIME (White-label overrideable) ─────────────────────────── */

  --color-brand:         var(--lime-400);   /* primary action / active / highlight */
  --color-brand-strong:  var(--lime-400);   /* solid fill behind dark text */
  --color-brand-hover:   var(--lime-300);
  --color-brand-active:  var(--lime-500);
  --color-brand-subtle:  rgba(217,249,157,0.10);
  --color-brand-ring:    rgba(217,249,157,0.32);
  --color-brand-text:    var(--lime-400);   /* lime text on a dark surface */

  /* Secondary brand = LAVENDER */
  --color-brand2:        var(--lav-400);
  --color-brand2-subtle: rgba(193,193,255,0.10);
  --color-brand2-text:   var(--lav-400);

  /* ── Status Colors ───────────────────────────────────────────────────── */

  --color-success:        var(--lime-400);
  --color-success-subtle: rgba(217,249,157,0.12);
  --color-success-ring:   rgba(217,249,157,0.30);
  --color-success-text:   var(--lime-400);

  --color-warning:        var(--sand-400);
  --color-warning-subtle: rgba(232,201,122,0.12);
  --color-warning-ring:   rgba(232,201,122,0.28);
  --color-warning-text:   #ecd7a2;

  --color-danger:         var(--coral-400);
  --color-danger-subtle:  rgba(255,180,171,0.12);
  --color-danger-ring:    rgba(255,180,171,0.30);
  --color-danger-text:    var(--coral-400);

  --color-info:           var(--lav-400);
  --color-info-subtle:    rgba(193,193,255,0.12);
  --color-info-ring:      rgba(193,193,255,0.28);
  --color-info-text:      var(--lav-400);

  --color-frozen:         var(--lav-400);
  --color-frozen-subtle:  rgba(193,193,255,0.10);

  /* ── Legacy compatibility aliases (keep for existing components) ─────── */

  --bg:         var(--color-bg);
  --surface:    var(--color-bg-surface);
  --surface2:   var(--color-bg-overlay);
  --border:     var(--color-border-default);
  --accent:     var(--color-brand);
  --accent-dim: var(--color-brand-subtle);
  --success:    var(--color-success);
  --error:      var(--color-danger);
  --text:       var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --font:       var(--font-sans);
  --mono:       var(--font-mono);
  --radius:     var(--radius-lg);
  --shadow:     var(--shadow-md);

  /* ── Typography ──────────────────────────────────────────────────────── */

  /* Three-tier: Sora display · Hanken Grotesk body · JetBrains Mono technical.
     Arabic is first-class — Hanken/Sora are Latin-only, so the Arabic faces
     (Noto Kufi / Noto Sans Arabic / Geeza / Dubai / Cairo) sit in every stack
     and render Arabic identically on dark and light surfaces. */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'Noto Kufi Arabic', 'Noto Sans Arabic', 'Geeza Pro',
                  'Cairo', 'Dubai', Tahoma, Arial, sans-serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'SF Pro Text', 'Helvetica Neue', 'Noto Sans Arabic',
               'Noto Kufi Arabic', 'Geeza Pro', 'Dubai', 'Cairo', Tahoma,
               Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code',
               'Consolas', 'Noto Sans Arabic', monospace;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px — default */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   2;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── Spacing (4px grid) ──────────────────────────────────────────────── */

  --space-px: 1px;
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius — SHARP / architectural (Obsidian Precision) ──────────
     Every panel, button, input, card, drawer, modal and chip is 0px.
     --radius-full stays for genuinely circular elements only (avatars,
     circular system icons, live dots). --radius-avatar is the explicit
     "this is meant to be round" hook. */

  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-3xl:  0;
  --radius-full: 9999px;
  --radius-avatar: 9999px;

  /* ── Elevation — restrained. Depth is tonal + bordered, not shadowed ─── */

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.40);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-2xl: 0 24px 56px rgba(0,0,0,0.62);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.35);
  /* "glow" tokens are now crisp 1px accent rings — no blur, no neon */
  --shadow-glow:         0 0 0 1px var(--color-brand);
  --shadow-glow-success: 0 0 0 1px var(--color-success);
  --shadow-glow-danger:  0 0 0 1px var(--color-danger);

  /* ── Transitions ─────────────────────────────────────────────────────── */

  --duration-instant: 50ms;
  --duration-fast:    100ms;
  --duration-base:    150ms;
  --duration-slow:    250ms;
  --duration-slower:  350ms;
  --duration-lazy:    500ms;

  --ease-linear:   linear;
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-base:   all var(--duration-base) var(--ease-out);
  --transition-colors: color var(--duration-base) var(--ease-out),
                       background-color var(--duration-base) var(--ease-out),
                       border-color var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-slow) var(--ease-spring);
  --transition-opacity: opacity var(--duration-base) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-slow) var(--ease-out);

  /* ── Z-Index Scale ───────────────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  250;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Breakpoints (for JS reference — CSS uses @media) ───────────────── */

  --bp-xs:  480px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ── Layout ──────────────────────────────────────────────────────────── */

  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1440px;

  --sidebar-width:     220px;
  --sidebar-min-width: 200px;
  --topbar-height:     52px;

  /* ── Component Sizes ─────────────────────────────────────────────────── */

  /* Icons */
  --icon-xs:  12px;
  --icon-sm:  14px;
  --icon-md:  16px;
  --icon-lg:  20px;
  --icon-xl:  24px;
  --icon-2xl: 32px;

  /* Buttons */
  --btn-height-xs: 24px;
  --btn-height-sm: 30px;
  --btn-height-md: 36px;
  --btn-height-lg: 42px;
  --btn-height-xl: 50px;

  --btn-padding-xs: 0 var(--space-2);
  --btn-padding-sm: 0 var(--space-3);
  --btn-padding-md: 0 var(--space-4);
  --btn-padding-lg: 0 var(--space-5);
  --btn-padding-xl: 0 var(--space-6);

  --btn-font-xs: var(--text-xs);
  --btn-font-sm: var(--text-sm);
  --btn-font-md: var(--text-base);
  --btn-font-lg: var(--text-md);

  /* Inputs */
  --input-height-sm: 30px;
  --input-height-md: 36px;
  --input-height-lg: 42px;

  /* Tables */
  --table-th-height:  36px;
  --table-row-height: 44px;
  --table-font:       var(--text-sm);

  /* Cards — no shadow, 1px border, surface one tonal step above the canvas */
  --card-padding-sm: var(--space-4);
  --card-padding-md: var(--space-6);
  --card-padding-lg: var(--space-8);
  --card-border:     1px solid var(--color-border-default);
  --card-radius:     0;
  --card-bg:         var(--color-bg-surface);
  --card-shadow:     none;

  /* ── Shell ───────────────────────────────────────────────────────────── */

  --shell-sidebar-bg: var(--ob-1000);
  --shell-topbar-bg:  var(--ob-1000);
  --shell-item-radius: 0;
  --shell-transition: var(--duration-base) var(--ease-out);

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEMES — Task 11.2 / 11.2.2
   ---------------------------------------------------------------------------
   One design language, two surface themes. The base :root above is DARK
   (obsidian). Only the theme-dependent semantic tokens change below — every
   structural token (spacing, radius=0, type, z-index, sizes) is shared, so
   Light is the SAME system on a light ground, keeping the same lime / lavender
   / coral relationships. Bright lime can't carry text on white, so Light maps
   lime → deep olive-lime for text/borders and keeps the bright chip fills with
   dark text. Legacy aliases resolve through the semantic tokens automatically.

   fc-theme.js stamps <html data-theme="light|dark"> synchronously in <head>.
   The @media block is a pre-JS safety net for a light-preference OS.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  --color-bg:           #F6F7F3;   /* warm paper, faint lime bias */
  --color-bg-surface:   #FFFFFF;
  --color-bg-elevated:  #FFFFFF;
  --color-bg-overlay:   #EDEFE7;
  --color-bg-input:     #FFFFFF;

  --color-border-subtle:  #ECEEE4;
  --color-border-default: #DADDCE;
  --color-border-strong:  #BCC0AC;
  --color-border-focus:   rgba(77, 102, 28, 0.55);

  --color-text-primary:   #1A1C16;
  --color-text-secondary: #45483B;
  --color-text-tertiary:  #5F6350;   /* AA on #fff */
  --color-text-disabled:  #9B9E8C;
  --color-text-inverse:   #1A1C16;   /* dark text on a lime fill */

  /* Lime — deep olive tone for text/edges; bright fills keep dark text */
  --color-brand:         #4D661C;
  --color-brand-strong:  #4D661C;    /* white text ~6:1 */
  --color-brand-hover:   #3F5417;
  --color-brand-active:  #344611;
  --color-brand-subtle:  rgba(77, 102, 28, 0.10);
  --color-brand-ring:    rgba(77, 102, 28, 0.30);
  --color-brand-text:    #3B5310;    /* on #fff ~7:1 */

  --color-brand2:        #4D4DB0;
  --color-brand2-subtle: rgba(77, 77, 176, 0.10);
  --color-brand2-text:   #3E3EA0;

  --color-success:        #4D661C;
  --color-success-subtle: rgba(77, 102, 28, 0.12);
  --color-success-ring:   rgba(77, 102, 28, 0.28);
  --color-success-text:   #3B5310;
  --color-warning:        #8A6D1E;
  --color-warning-subtle: rgba(138, 109, 30, 0.14);
  --color-warning-ring:   rgba(138, 109, 30, 0.28);
  --color-warning-text:   #6F5717;
  --color-danger:         #B4241A;
  --color-danger-subtle:  rgba(180, 36, 26, 0.10);
  --color-danger-ring:    rgba(180, 36, 26, 0.26);
  --color-danger-text:    #9A1F16;
  --color-info:           #4D4DB0;
  --color-info-subtle:    rgba(77, 77, 176, 0.10);
  --color-info-ring:      rgba(77, 77, 176, 0.26);
  --color-info-text:      #3E3EA0;
  --color-frozen:         #4D4DB0;
  --color-frozen-subtle:  rgba(77, 77, 176, 0.10);

  /* Elevation — olive-tinted, restrained (no pure black on a light ground) */
  --shadow-xs: 0 1px 2px rgba(26, 28, 22, .05);
  --shadow-sm: 0 1px 2px rgba(26, 28, 22, .04), 0 1px 3px rgba(26, 28, 22, .07);
  --shadow-md: 0 2px 4px rgba(26, 28, 22, .04), 0 8px 24px rgba(26, 28, 22, .07);
  --shadow-lg: 0 8px 16px rgba(26, 28, 22, .06), 0 24px 48px rgba(26, 28, 22, .10);
  --shadow-xl: 0 16px 48px rgba(26, 28, 22, .14);
  --shadow-2xl: 0 24px 64px rgba(26, 28, 22, .18);
  --shadow-inner: inset 0 1px 2px rgba(26, 28, 22, .06);
  --card-shadow: none;
  --shadow-glow:         0 0 0 1px var(--color-brand);
  --shadow-glow-success: 0 0 0 1px var(--color-success);
  --shadow-glow-danger:  0 0 0 1px var(--color-danger);

  --shell-sidebar-bg: #FFFFFF;
  --shell-topbar-bg:  #FFFFFF;

  color-scheme: light;
}

:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --color-bg: #F6F7F3;
    --color-bg-surface: #FFFFFF;
    --color-bg-input: #FFFFFF;
    --color-text-primary: #1A1C16;
    --color-text-secondary: #45483B;
    --color-border-default: #DADDCE;
    --color-brand: #4D661C;
    --color-brand-strong: #4D661C;
    --color-brand-text: #3B5310;
    --shell-sidebar-bg: #FFFFFF;
    --shell-topbar-bg: #FFFFFF;
    color-scheme: light;
  }
}