/* ════════════════════════════════════════════════════════════════════
   CFS PRO — DESIGN TOKENS
   Single source of truth for every visual decision in the app.
   ──────────────────────────────────────────────────────────────────
   Palette philosophy:
     • Warm off-white paper (#FBFAF7) — feels like a lab notebook
     • Deep ink primary (#0E0E0C) — near-black with warmth
     • Single accent: Kuwaiti gold (#B8954E) — discipline, no rainbow
     • Semantic tints — soft tinted bg + deep text, never neon
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND PRIMITIVES — softer, cooler greys for a quiet, classy feel ─ */
  --ink-950: #0F1014;
  --ink-900: #1C1D22;
  --ink-800: #2A2B31;
  --ink-700: #44464E;
  --ink-600: #5C5F68;
  --ink-500: #797C85;
  --ink-400: #9A9DA5;
  --ink-300: #BCBEC4;
  --ink-200: #D8D9DD;
  --ink-150: #E5E6E9;
  --ink-100: #EEEFF1;
  --ink-50:  #F6F7F8;
  --paper:   #FCFCFB;
  --paper-2: #FFFFFF;

  /* ── ACCENT — soft champagne, used very sparingly ─────────────── */
  --accent-50:  #F8F4EC;
  --accent-100: #EFE7D5;
  --accent-200: #DDCFAE;
  --accent-300: #C9B484;
  --accent-400: #B89E68;
  --accent-500: #A78758;   /* primary accent — muted bronze */
  --accent-600: #8C7146;
  --accent-700: #6F5938;
  --accent-800: #524229;
  --accent-900: #352B1B;

  /* ── SECONDARY (sage, used very sparingly for "in production") ── */
  --sage-50:  #EEF3EF;
  --sage-200: #C8D6CB;
  --sage-500: #6E8B73;
  --sage-700: #4A6B5C;
  --sage-900: #2C3F36;

  /* ── SEMANTIC TINTS ───────────────────────────────────────────── */
  --ok-bg:    #EEF4EC;
  --ok-bd:    #B9D0AE;
  --ok-tx:    #3B5C2C;
  --ok-solid: #58843F;

  --warn-bg:  #FBF3DC;
  --warn-bd:  #E5C879;
  --warn-tx:  #6E521A;
  --warn-solid:#B8881C;

  --err-bg:   #F8E8E4;
  --err-bd:   #E3B5A8;
  --err-tx:   #7B2A19;
  --err-solid:#A8341E;

  --info-bg:  #EAEFF4;
  --info-bd:  #B4C3D2;
  --info-tx:  #2C4A6B;
  --info-solid:#3B5D7E;

  /* ── ROLES (light theme — quiet & airy) ──────────────────────────── */
  --bg:           var(--paper);
  --bg-soft:      #F6F7F8;
  --bg-elev:      var(--paper-2);
  --surface:      #FFFFFF;
  --surface-2:    #FAFAFB;
  --surface-3:    #F4F5F6;
  --surface-inv:  var(--ink-950);

  --border:       #EAEBEE;
  --border-strong:#D8D9DD;
  --border-focus: var(--accent-500);
  --divider:      #F0F1F3;

  --text-1:       var(--ink-950);
  --text-2:       var(--ink-600);
  --text-3:       var(--ink-400);
  --text-inv:     #FAF8F2;
  --text-link:    var(--accent-700);

  --accent:       var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-soft:  var(--accent-50);
  --on-accent:    #FFFFFE;

  --core-bg:      #F0EEE2;
  --core-bd:      #D5CFB6;
  --core-tx:      #4A4226;
  --opt-bg:       #F7F5EC;
  --opt-bd:       #DDD7C5;
  --opt-tx:       var(--ink-700);

  /* ── GRADIENTS & GLASS ────────────────────────────────────────── */
  --grad-paper:   linear-gradient(180deg, #FBFAF7 0%, #F4F1E6 100%);
  --grad-ink:     linear-gradient(135deg, #1A1A17 0%, #0E0E0C 100%);
  --grad-gold:    linear-gradient(135deg, #D6B664 0%, #B8954E 50%, #9E7C3D 100%);
  --grad-gold-soft:linear-gradient(135deg, #FBF6E9 0%, #F4E8C4 100%);
  --grad-hairline:linear-gradient(90deg, transparent, var(--border-strong), transparent);
  --grad-hero:    radial-gradient(1200px 600px at 70% -10%, rgba(184,149,78,.10), transparent 60%),
                  radial-gradient(900px 500px at 10% 110%, rgba(74,107,92,.08), transparent 60%),
                  linear-gradient(180deg, #FBFAF7, #F4F1E6);

  --glass-bg:     rgba(255,255,254,.72);
  --glass-bd:     rgba(14,14,12,.08);
  --glass-blur:   saturate(140%) blur(14px);

  /* ── SHADOWS (multi-layer, realistic) ─────────────────────────── */
  --sh-0: 0 0 0 0 rgba(0,0,0,0);
  --sh-1: 0 1px 1px rgba(14,14,12,.04), 0 1px 2px rgba(14,14,12,.05);
  --sh-2: 0 1px 2px rgba(14,14,12,.05), 0 4px 12px rgba(14,14,12,.06);
  --sh-3: 0 2px 4px rgba(14,14,12,.05), 0 8px 24px rgba(14,14,12,.08);
  --sh-4: 0 4px 8px rgba(14,14,12,.06), 0 16px 40px rgba(14,14,12,.10);
  --sh-5: 0 8px 16px rgba(14,14,12,.08), 0 24px 64px rgba(14,14,12,.14);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(14,14,12,.04);
  --sh-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-400);
  --sh-focus-ink: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-900);
  --sh-gold-glow: 0 0 0 1px rgba(184,149,78,.25), 0 8px 28px rgba(184,149,78,.18);

  /* ── SPACING SCALE ────────────────────────────────────────────── */
  --s-0:  0px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
  --font-sans: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Readex Pro", "Fraunces", "IBM Plex Sans Arabic", serif;
  --font-serif: "Fraunces", "Instrument Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-sem:   600;
  --fw-bold:  700;
  --fw-black: 800;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-norm:  1.55;
  --lh-loose: 1.75;

  --tr-tight: -0.02em;
  --tr-snug:  -0.01em;
  --tr-norm:  0;
  --tr-wide:  0.04em;
  --tr-mono:  0.02em;

  /* ── RADII ────────────────────────────────────────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 12px;
  --r-6: 16px;
  --r-7: 22px;
  --r-full: 9999px;

  /* ── BORDERS ──────────────────────────────────────────────────── */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);

  /* ── Z-INDEX SCALE ────────────────────────────────────────────── */
  --z-base:      1;
  --z-raised:    10;
  --z-sticky:    100;
  --z-dropdown:  200;
  --z-overlay:   400;
  --z-drawer:    450;
  --z-modal:     500;
  --z-palette:   600;
  --z-toast:     700;
  --z-tooltip:   800;
  --z-top:       9999;

  /* ── EASING & MOTION ──────────────────────────────────────────── */
  --ease-linear:  cubic-bezier(0, 0, 1, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:    cubic-bezier(0.2, 0.9, 0.2, 1);

  --d-1: 80ms;
  --d-2: 140ms;
  --d-3: 220ms;
  --d-4: 360ms;
  --d-5: 520ms;
  --d-6: 800ms;

  /* ── LAYOUT ───────────────────────────────────────────────────── */
  --topbar-h:       56px;
  --topbar-h-sub:   40px;
  --sidebar-w:      232px;
  --sidebar-w-min:  64px;
  --content-max:    1320px;
  --content-narrow: 960px;
  --content-text:   720px;
  --gutter:         24px;
  --gutter-sm:      16px;

  /* ── BREAKPOINTS (use in @media via custom property mirror) ───── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl:1536px;
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME — invoked via <html data-theme="dark">
   Same palette structure, inverted with warmth retained.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:           #0E0E0C;
  --bg-soft:      #14140F;
  --bg-elev:      #1A1A14;
  --surface:      #17170F;
  --surface-2:    #1F1F17;
  --surface-3:    #26261C;
  --surface-inv:  #FAF8F2;

  --border:       #2C2C22;
  --border-strong:#3A3A2D;
  --border-focus: var(--accent-300);
  --divider:      #232319;

  --text-1:       #F5F1E2;
  --text-2:       #B5B0A0;
  --text-3:       #807B6C;
  --text-inv:     var(--ink-950);
  --text-link:    var(--accent-300);

  --accent:       var(--accent-400);
  --accent-hover: var(--accent-300);
  --accent-soft:  rgba(184,149,78,.12);
  --on-accent:    var(--ink-950);

  --core-bg:      rgba(184,149,78,.06);
  --core-bd:      rgba(184,149,78,.20);
  --core-tx:      var(--accent-200);
  --opt-bg:       #1B1B14;
  --opt-bd:       #2A2A20;
  --opt-tx:       var(--ink-200);

  --ok-bg:    rgba(88,132,63,.10);
  --ok-bd:    rgba(88,132,63,.35);
  --ok-tx:    #B7D69F;
  --warn-bg:  rgba(184,136,28,.10);
  --warn-bd:  rgba(184,136,28,.35);
  --warn-tx:  #E5C879;
  --err-bg:   rgba(168,52,30,.10);
  --err-bd:   rgba(168,52,30,.40);
  --err-tx:   #E8B0A0;
  --info-bg:  rgba(59,93,126,.10);
  --info-bd:  rgba(59,93,126,.40);
  --info-tx:  #B4C3D2;

  --grad-paper: linear-gradient(180deg, #14140F 0%, #0E0E0C 100%);
  --grad-ink:   linear-gradient(135deg, #1F1F17 0%, #0E0E0C 100%);
  --grad-hero:  radial-gradient(1200px 600px at 70% -10%, rgba(184,149,78,.10), transparent 60%),
                radial-gradient(900px 500px at 10% 110%, rgba(74,107,92,.06), transparent 60%),
                linear-gradient(180deg, #14140F, #0E0E0C);
  --grad-hairline: linear-gradient(90deg, transparent, var(--border-strong), transparent);

  --glass-bg: rgba(20,20,15,.66);
  --glass-bd: rgba(245,241,226,.07);

  --sh-1: 0 1px 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.45);
  --sh-3: 0 2px 4px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55);
  --sh-4: 0 4px 8px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.6);
  --sh-5: 0 8px 16px rgba(0,0,0,.65), 0 24px 64px rgba(0,0,0,.7);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.4);
  --sh-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-400);
  --sh-gold-glow: 0 0 0 1px rgba(184,149,78,.30), 0 8px 28px rgba(184,149,78,.25);
}

/* honor OS-level preference when user hasn't set explicit theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}