/* ============================================================
   FACEID PRO — DESIGN TOKENS
   Single source of truth for colors, typography, radii, shadows.
   Consumed by:
     · static/css/style.css             (FastAPI desktop shell)
     · src/index.css                    (React landing page)
     · mobile/theme.ts                  (mirrors these values, see below)
   ============================================================ */

:root {
  /* ---------- Typography ---------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Palette (light) ---------- */
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F8FAFC;
  --bg-tertiary:   #F1F5F9;
  --bg-sidebar:    #0A0F1D;

  --text-primary:  #0F172A;
  --text-secondary:#475569;
  --text-tertiary: #64748B;
  --text-muted:    #94A3B8;

  --accent-color:  #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-soft:   rgba(37, 99, 235, 0.10);
  --accent-ring:   rgba(37, 99, 235, 0.20);

  --border-color:  #E2E8F0;
  --border-strong: #CBD5E1;

  --success-color: #10B981;
  --warning-color: #F59E0B;
  --error-color:   #EF4444;

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow:    0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 1px 2px 0 rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 20px 40px -12px rgba(37, 99, 235, 0.10), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 30px 70px -15px rgba(10, 15, 29, 0.28);

  /* ---------- Semantic aliases (for legacy class names) ---------- */
  --card-bg:       #FFFFFF;
  --label-bg:      #8B0000;
  --label-text:    #FFFFFF;
  --match-bg:      #1A5C1A;
  --no-match-bg:   #8B0000;
}

[data-theme="dark"] {
  --bg-primary:    #0F1629;
  --bg-secondary:  #0A0F1D;
  --bg-tertiary:   #131B33;
  --bg-sidebar:    #060913;

  --text-primary:  #ECF0F1;
  --text-secondary:#B8C4D6;
  --text-tertiary: #8896AC;
  --text-muted:    #64748B;

  --accent-color:  #38BDF8;
  --accent-hover:  #0EA5E9;
  --accent-soft:   rgba(56, 189, 248, 0.14);
  --accent-ring:   rgba(56, 189, 248, 0.24);

  --border-color:  #1E293B;
  --border-strong: #334155;

  --card-bg:       #131B33;
  --label-bg:      #6B0000;
  --label-text:    #FFFFFF;
  --match-bg:      #0D3D0D;
  --no-match-bg:   #6B0000;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow:    0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 30px 70px -15px rgba(0, 0, 0, 0.65);
}