/* ============================================================
   Lyes Hammadouche — Portfolio Design Tokens
   Dark mode default. Light mode via [data-theme="light"].
   ============================================================ */

:root {
  /* --- Dark mode (default) --- */
  --bg:           #000000;
  --bg-elevated:  #000000;
  --surface:      #000000;
  --surface-alt:  #121212;
  --fg:           #ffffff;
  --fg-secondary: #e0e0e0;
  --fg-muted:     #888888;
  --border:       #ffffff;
  --border-subtle:#333333;

  /* Accent — "consciousness" violet */
  --accent:       #8b5cf6;
  --accent-hover: #7c3aed;
  --accent-muted: rgba(139, 92, 246, 0.12);
  --accent-glow:  rgba(139, 92, 246, 0.06);

  /* Warm — revelation gold */
  --warm:         #c9a96e;

  /* Typography */
  --font-serif:   'Cormorant Garamond', Georgia, 'Noto Serif SC', serif;
  --font-sans:    'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, 'Noto Sans SC', sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;

  /* Type scale */
  --text-display:  clamp(40px, 6vw, 72px);
  --text-h1:       clamp(32px, 4vw, 48px);
  --text-h2:       clamp(24px, 3vw, 32px);
  --text-h3:       clamp(18px, 2vw, 22px);
  --text-body:     16px;
  --text-body-lg:  18px;
  --text-small:    14px;
  --text-caption:  12px;
  --text-label:    11px;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;
  --space-5xl:  128px;

  /* Layout */
  --max-width:    1200px;
  --gutter:       24px;
  --nav-height:   64px;

  /* Radii - Forced to 0px (Pas d'arrondi) */
  --radius-sm:  0px;
  --radius-md:  0px;
  --radius-lg:  0px;
  --radius-xl:  0px;
  --radius-full:0px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   400ms;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.8);

  /* Overlay */
  --overlay-bg:  rgba(0, 0, 0, 0.95);
}

/* --- Light mode --- */
[data-theme="light"] {
  --bg:           #ffffff;
  --bg-elevated:  #ffffff;
  --surface:      #ffffff;
  --surface-alt:  #f5f5f5;
  --fg:           #000000;
  --fg-secondary: #202020;
  --fg-muted:     #777777;
  --border:       #000000;
  --border-subtle:#dddddd;

  --accent:       #6d28d9;
  --accent-hover: #5b21b6;
  --accent-muted: rgba(109, 40, 217, 0.08);
  --accent-glow:  rgba(109, 40, 217, 0.04);

  --warm:         #c9a96e;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.18);
  --overlay-bg:  rgba(255, 255, 255, 0.98);
}