/* ============================================================================
   FaceCheck — Light Control Center · design tokens
   ----------------------------------------------------------------------------
   The light surface of the FaceCheck identity (Presence pilot: Task 10.2).
   Self-contained: light pages load lc-tokens.css → lc-components.css → their
   own page CSS, and never the dark tokens.css / components.css / style.css.
   Token NAMES are prefixed `--lc-` so a page can load both stacks during
   migration without a collision.

   11.2.2 — "Obsidian Precision": Presence now shares the one FaceCheck visual
   language. Same lime / lavender / coral relationships, same Sora / Hanken /
   JetBrains Mono type, same sharp 0px geometry — just rendered on a light
   ground here and on obsidian in the dark block below.

   On-premise: fonts are self-hosted beside this file in ./fonts/ (no CDN).
   Arabic falls through to Noto Kufi / Noto Sans Arabic / Geeza / Cairo.
   ============================================================================ */

@font-face { font-family: 'Sora'; font-weight: 400; font-display: swap; src: url('fonts/sora-400.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-display: swap; src: url('fonts/sora-600.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 700; font-display: swap; src: url('fonts/sora-700.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-display: swap; src: url('fonts/hanken-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 500; font-display: swap; src: url('fonts/hanken-500.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; font-display: swap; src: url('fonts/hanken-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('fonts/jbmono-500.woff2') format('woff2'); }

:root {
  /* ── Ground & surface — warm paper with a faint lime bias ────────────── */
  --lc-ground:       #F6F7F3;
  --lc-ground-2:     #EDEFE7;   /* recessed strips, table head, zebra */
  --lc-surface:      #FFFFFF;   /* cards, panels, sidebar */
  --lc-surface-mut:  #FBFCF8;   /* very faint inner surface */

  /* ── Ink ────────────────────────────────────────────────────────────── */
  --lc-ink:          #1A1C16;   /* headings, values */
  --lc-ink-2:        #45483B;   /* body, labels */
  --lc-ink-3:        #5F6350;   /* hints, muted — AA on #fff */
  --lc-on-primary:   #1A1C16;   /* dark text on a lime fill */

  /* ── Lines — 1px structural strokes ─────────────────────────────────── */
  --lc-border:       #DADDCE;
  --lc-border-2:     #ECEEE4;

  /* ── Brand = LIME ───────────────────────────────────────────────────────
     Bright lime can't carry text on white, so the light rendering uses the
     deep olive-lime tone for text/edges and keeps bright fills for chips
     (with dark text). Mirrors tokens.css :root[data-theme="light"]. */
  --lc-primary:      #4D661C;   /* olive-lime — primary action (white text ~6:1) */
  --lc-primary-ink:  #3B5310;   /* text/icon on the wash (AA on #fff) */
  --lc-primary-wash: #EEF4DF;   /* lime tint background */
  --lc-primary-hov:  #3F5417;
  --lc-indigo:       #4D661C;   /* links use the same lime */
  --lc-teal:         #4D4DB0;   /* secondary accent = lavender */
  --lc-lavender:     #4D4DB0;
  --lc-lavender-ink: #3E3EA0;
  --lc-lavender-wash:#ECECFB;

  /* ── Semantic ─────────────────────────────────────────────────────────
     Success rides the same lime as the brand (Lime + paper + ink). Coral is
     the only error colour and must stay rare. */
  --lc-live:         #4D661C;   /* "inside now" / live / success */
  --lc-live-ink:     #3B5310;
  --lc-live-wash:    #EEF4DF;
  --lc-live-border:  #C7D9A5;
  --lc-warn:         #8A6D1E;
  --lc-warn-wash:    #F6EFDC;
  --lc-danger:       #B4241A;   /* coral, darkened for a light ground */
  --lc-danger-wash:  #FBECEA;
  --lc-info:         #4D4DB0;   /* lavender */

  /* ── Elevation — olive-tinted, restrained (depth is tonal + bordered) ── */
  --lc-shadow-xs: 0 1px 2px rgba(26, 28, 22, .05);
  --lc-shadow-sm: 0 1px 2px rgba(26, 28, 22, .04), 0 1px 3px rgba(26, 28, 22, .06);
  --lc-shadow-md: 0 2px 4px rgba(26, 28, 22, .04), 0 8px 24px rgba(26, 28, 22, .07);
  --lc-shadow-lg: 0 8px 16px rgba(26, 28, 22, .06), 0 24px 48px rgba(26, 28, 22, .11);
  --lc-ring:      0 0 0 1px #4D661C;   /* crisp 1px accent, no glow */

  /* ── Radius — SHARP / architectural (Obsidian Precision) ─────────────── */
  --lc-r-xs:   0;
  --lc-r-sm:   0;
  --lc-r-md:   0;
  --lc-r-lg:   0;
  --lc-r-pill: 999px;   /* genuinely circular elements only */

  /* ── Spacing scale (4px baseline) ───────────────────────────────────── */
  --lc-1: 4px;  --lc-2: 8px;  --lc-3: 12px; --lc-4: 16px;
  --lc-5: 20px; --lc-6: 24px; --lc-7: 32px; --lc-8: 40px; --lc-10: 56px;

  /* ── Type — three-tier, identical to the dark system ─────────────────── */
  --lc-font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     'Noto Kufi Arabic', 'Noto Sans Arabic', 'Geeza Pro',
                     'Cairo', 'Dubai', Tahoma, Arial, sans-serif;
  --lc-font: '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;
  --lc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
             'Segoe UI Mono', Consolas, monospace;

  --lc-fs-xs:   0.75rem;
  --lc-fs-sm:   0.8125rem;
  --lc-fs-base: 0.9375rem;
  --lc-fs-md:   1rem;
  --lc-fs-lg:   1.25rem;
  --lc-fs-xl:   1.5rem;
  --lc-fs-kpi:  2.75rem;   /* the KPI number — confident, Sora display */

  --lc-fw-normal: 400;
  --lc-fw-medium: 500;
  --lc-fw-semi:   600;
  --lc-fw-bold:   700;

  --lc-lh-tight: 1.2;
  --lc-lh-base:  1.6;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --lc-sidebar-w: 248px;
  --lc-topbar-h:  60px;
  --lc-content-max: 1200px;
  --lc-row-h: 60px;

  --lc-transition: 140ms cubic-bezier(.4, 0, .2, 1);
  --lc-skel-hi: #E7EAD9;

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — "Obsidian Precision"
   ---------------------------------------------------------------------------
   Re-states only the colour / shadow tokens for dark, matching the dark
   system (tokens.css) exactly, so Presence-dark is indistinguishable from
   Dashboard-dark. Structure (radius=0, spacing, type, layout) is shared.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --lc-ground:       #121411;
  --lc-ground-2:     #1a1c19;
  --lc-surface:      #1a1c19;
  --lc-surface-mut:  #1e201d;

  --lc-ink:          #e3e3dd;
  --lc-ink-2:        #c5c8b7;
  --lc-ink-3:        #8f9282;
  --lc-on-primary:   #243600;   /* dark text on a lime fill */

  --lc-border:       #44483b;
  --lc-border-2:     #24261f;

  --lc-primary:      #d9f99d;   /* lime — matches tokens.css --color-brand */
  --lc-primary-ink:  #d9f99d;
  --lc-primary-wash: rgba(217, 249, 157, 0.10);
  --lc-primary-hov:  #e4fbb4;
  --lc-indigo:       #d9f99d;
  --lc-teal:         #c1c1ff;
  --lc-lavender:     #c1c1ff;
  --lc-lavender-ink: #c1c1ff;
  --lc-lavender-wash:rgba(193, 193, 255, 0.12);

  --lc-live:         #d9f99d;
  --lc-live-ink:     #d9f99d;
  --lc-live-wash:    rgba(217, 249, 157, 0.12);
  --lc-live-border:  rgba(217, 249, 157, 0.30);
  --lc-warn:         #e8c97a;
  --lc-warn-wash:    rgba(232, 201, 122, 0.12);
  --lc-danger:       #ffb4ab;   /* coral */
  --lc-danger-wash:  rgba(255, 180, 171, 0.12);
  --lc-info:         #c1c1ff;

  --lc-shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
  --lc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --lc-shadow-md: 0 2px 8px rgba(0, 0, 0, .40);
  --lc-shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
  --lc-ring:      0 0 0 1px #d9f99d;
  --lc-skel-hi:   #24261f;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --lc-ground: #121411;
    --lc-surface: #1a1c19;
    --lc-ink: #e3e3dd;
    --lc-ink-2: #c5c8b7;
    --lc-border: #44483b;
    --lc-primary: #d9f99d;
    --lc-live: #d9f99d;
    color-scheme: dark;
  }
}