/* =============================================================
   JySerai.bf — Design Tokens
   ------------------------------------------------------------
   Un seul jeu de variables sémantiques, deux thèmes.
   - Dark : #1a1108 (marron nuit profond)
   - Light : #f4e9b7 (crème doré chaleureux)
   ============================================================= */

:root {
  /* Typo */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

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

  /* Spacing (4pt grid) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px;

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-fast: .15s;
  --dur-med: .28s;
  --dur-slow: .5s;

  /* Brand accent (constant across themes) */
  --brand: #d4a017;         /* gold primary */
  --brand-2: #b8860b;       /* darker gold */
  --brand-3: #f4c430;       /* bright gold */
  --brand-soft: #fbe6a2;    /* pale gold */
}

/* =========================
   DARK THEME (par défaut)
   ========================= */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Surface hierarchy */
  --bg: #1a1108;
  --bg-elevated: #221609;
  --bg-sunken: #120a04;
  --surface: #2a1c0b;
  --surface-2: #33230e;
  --surface-3: #3d2b12;

  /* Text */
  --text: #f4e8c8;
  --text-strong: #fdf6d8;
  --text-muted: #a68a5e;
  --text-subtle: #7a6440;

  /* Border */
  --border: #4a3212;
  --border-strong: #5f4218;
  --border-focus: var(--brand-3);

  /* Accents */
  --accent: var(--brand-3);
  --accent-fg: #1a1108;
  --accent-soft: rgba(244,196,48,.12);
  --accent-soft-strong: rgba(244,196,48,.22);

  /* Semantics */
  --success: #4ade80;
  --success-soft: rgba(74,222,128,.12);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,.12);
  --warn: #f59e0b;
  --info: #60a5fa;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 10px 30px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --shadow-brand: 0 8px 30px rgba(244,196,48,.25);

  /* Overlay */
  --overlay: rgba(0,0,0,.7);
  --scrim: linear-gradient(180deg, transparent, rgba(0,0,0,.6));

  /* Grid texture opacity */
  --grid-opacity: .04;
  --noise-opacity: .06;
}

/* =========================
   LIGHT THEME
   ========================= */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4e9b7;
  --bg-elevated: #f9f0c8;
  --bg-sunken: #ecd995;
  --surface: #fdf6d8;
  --surface-2: #fbeeb8;
  --surface-3: #f4e298;

  --text: #2b1f08;
  --text-strong: #1a1108;
  --text-muted: #6b5320;
  --text-subtle: #8f7238;

  --border: #d9c17a;
  --border-strong: #b8985a;
  --border-focus: var(--brand-2);

  --accent: var(--brand-2);
  --accent-fg: #fdf6d8;
  --accent-soft: rgba(184,134,11,.10);
  --accent-soft-strong: rgba(184,134,11,.18);

  --success: #16a34a;
  --success-soft: rgba(22,163,74,.10);
  --danger: #dc2626;
  --danger-soft: rgba(220,38,38,.10);
  --warn: #d97706;
  --info: #2563eb;

  --shadow-sm: 0 2px 6px rgba(75,55,15,.08);
  --shadow-md: 0 10px 24px rgba(75,55,15,.14);
  --shadow-lg: 0 24px 50px rgba(75,55,15,.18);
  --shadow-brand: 0 8px 24px rgba(184,134,11,.25);

  --overlay: rgba(43,31,8,.5);
  --scrim: linear-gradient(180deg, transparent, rgba(43,31,8,.4));

  --grid-opacity: .06;
  --noise-opacity: .04;
}