/* ===========================================================================
   Proto-SFC-Europe — Design tokens
   Institutional premium. OKLCH palette tinted toward the EU blue hue.
   ========================================================================= */

:root {
  /* ----- Type ----- */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

  /* Modular scale — fluid for marketing surfaces, clamped for legibility */
  --fs-xs:   clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --fs-base: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
  --fs-md:   clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  --fs-lg:   clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem);
  --fs-xl:   clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem);
  --fs-2xl:  clamp(2.4rem, 1.8rem + 3vw, 3.6rem);
  --fs-3xl:  clamp(3rem, 2rem + 5vw, 5rem);
  --fs-display: clamp(3.4rem, 2.2rem + 6vw, 6rem);

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;

  /* ----- Spacing (4pt) ----- */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ----- Layout ----- */
  --container-max: 1280px;
  --container-prose: 65ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ----- Radii ----- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ----- Motion ----- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    360ms;
  --dur-page:    520ms;

  /* ----- Z-index ----- */
  --z-base: 1;
  --z-sticky: 50;
  --z-modal: 100;
  --z-toast: 200;
}

/* =====================================================
   LIGHT (default) — ivoire chaud teinté UE blue
   ===================================================== */
:root,
[data-theme='light'] {
  /* Surfaces */
  --bg:           oklch(98% 0.005 85);    /* ivoire chaud */
  --bg-raised:   oklch(99.5% 0.003 85);
  --surface:      oklch(100% 0 0);         /* white cards */
  --surface-2:    oklch(96.5% 0.006 85);
  --surface-3:    oklch(94% 0.008 85);

  /* Text */
  --text:         oklch(22% 0.025 260);    /* deep navy */
  --text-strong:  oklch(15% 0.02 260);
  --text-muted:   oklch(45% 0.015 260);
  --text-subtle:  oklch(58% 0.012 260);

  /* Borders */
  --border:       oklch(90% 0.005 85);
  --border-strong:oklch(82% 0.008 85);
  --border-hover: oklch(70% 0.05 263);

  /* Accents — EU blue / yellow */
  --accent:        oklch(36% 0.18 263);   /* #003399 perceptual */
  --accent-hover:  oklch(42% 0.18 263);
  --accent-active: oklch(30% 0.18 263);
  --accent-fg:     oklch(99% 0.005 85);
  --accent-soft:   oklch(94% 0.04 263);
  --accent-line:   oklch(86% 0.06 263);

  --highlight:     oklch(85% 0.16 90);    /* #FFCC00 adouci */
  --highlight-soft:oklch(95% 0.08 90);
  --highlight-fg:  oklch(20% 0.04 90);

  /* Semantic */
  --success: oklch(58% 0.13 145);
  --success-soft: oklch(94% 0.05 145);
  --danger:  oklch(54% 0.18 25);
  --danger-soft: oklch(95% 0.05 25);
  --warning: oklch(72% 0.14 70);
  --warning-soft: oklch(96% 0.05 70);

  /* Shadows — warm soft */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 260 / 0.05);
  --shadow:    0 2px 8px oklch(20% 0.02 260 / 0.06), 0 1px 2px oklch(20% 0.02 260 / 0.04);
  --shadow-md: 0 8px 24px oklch(20% 0.02 260 / 0.08), 0 2px 6px oklch(20% 0.02 260 / 0.05);
  --shadow-lg: 0 20px 48px oklch(20% 0.02 260 / 0.12), 0 6px 12px oklch(20% 0.02 260 / 0.06);
  --shadow-focus: 0 0 0 3px oklch(36% 0.18 263 / 0.25);

  /* EU stars decorative */
  --eu-star-color: oklch(36% 0.18 263 / 0.06);
  --eu-flag-blue:  oklch(36% 0.18 263);
  --eu-flag-yellow:oklch(85% 0.16 90);

  /* Couleurs des 4 niveaux de maîtrise (light) */
  --lvl-1: oklch(40% 0.16 263);   /* Débutant — bleu UE profond */
  --lvl-2: oklch(58% 0.13 70);    /* Élémentaire — ambre */
  --lvl-3: oklch(50% 0.13 145);   /* Indépendant — vert eucalyptus */
  --lvl-4: oklch(48% 0.16 30);    /* Expérimenté — terracotta */
  --lvl-1-soft: oklch(94% 0.04 263);
  --lvl-2-soft: oklch(96% 0.05 70);
  --lvl-3-soft: oklch(94% 0.05 145);
  --lvl-4-soft: oklch(96% 0.04 30);

  color-scheme: light;
}

/* =====================================================
   DARK — bleu nuit chaud, teinté vers le hue UE
   ===================================================== */
[data-theme='dark'] {
  --bg:           oklch(15.5% 0.02 263);
  --bg-raised:    oklch(18% 0.022 263);
  --surface:      oklch(20% 0.024 263);
  --surface-2:    oklch(23% 0.026 263);
  --surface-3:    oklch(27% 0.028 263);

  --text:         oklch(95% 0.005 85);
  --text-strong:  oklch(99% 0.003 85);
  --text-muted:   oklch(72% 0.015 263);
  --text-subtle:  oklch(58% 0.018 263);

  --border:       oklch(28% 0.026 263);
  --border-strong:oklch(36% 0.028 263);
  --border-hover: oklch(60% 0.1 263);

  --accent:        oklch(78% 0.12 263);   /* eclairci pour dark */
  --accent-hover:  oklch(84% 0.13 263);
  --accent-active: oklch(72% 0.12 263);
  --accent-fg:     oklch(15% 0.02 263);
  --accent-soft:   oklch(28% 0.06 263);
  --accent-line:   oklch(38% 0.08 263);

  --highlight:     oklch(88% 0.16 90);
  --highlight-soft:oklch(38% 0.05 90);
  --highlight-fg:  oklch(20% 0.04 90);

  --success: oklch(74% 0.13 145);
  --success-soft: oklch(28% 0.05 145);
  --danger:  oklch(72% 0.16 25);
  --danger-soft: oklch(28% 0.05 25);
  --warning: oklch(82% 0.14 70);
  --warning-soft: oklch(30% 0.05 70);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow:    0 2px 8px oklch(0% 0 0 / 0.4), 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 8px 24px oklch(0% 0 0 / 0.45), 0 2px 6px oklch(0% 0 0 / 0.3);
  --shadow-lg: 0 20px 48px oklch(0% 0 0 / 0.55), 0 6px 12px oklch(0% 0 0 / 0.35);
  --shadow-focus: 0 0 0 3px oklch(78% 0.12 263 / 0.4);

  --eu-star-color: oklch(85% 0.16 90 / 0.06);
  --eu-flag-blue:  oklch(40% 0.18 263);
  --eu-flag-yellow:oklch(85% 0.16 90);

  /* Couleurs des 4 niveaux (dark — éclaircis pour le contraste) */
  --lvl-1: oklch(75% 0.13 263);
  --lvl-2: oklch(78% 0.14 70);
  --lvl-3: oklch(74% 0.13 145);
  --lvl-4: oklch(74% 0.15 30);
  --lvl-1-soft: oklch(28% 0.05 263);
  --lvl-2-soft: oklch(28% 0.05 70);
  --lvl-3-soft: oklch(28% 0.05 145);
  --lvl-4-soft: oklch(28% 0.05 30);

  color-scheme: dark;
}

/* Auto dark from system if no explicit theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           oklch(15.5% 0.02 263);
    --bg-raised:    oklch(18% 0.022 263);
    --surface:      oklch(20% 0.024 263);
    --surface-2:    oklch(23% 0.026 263);
    --surface-3:    oklch(27% 0.028 263);
    --text:         oklch(95% 0.005 85);
    --text-strong:  oklch(99% 0.003 85);
    --text-muted:   oklch(72% 0.015 263);
    --text-subtle:  oklch(58% 0.018 263);
    --border:       oklch(28% 0.026 263);
    --border-strong:oklch(36% 0.028 263);
    --border-hover: oklch(60% 0.1 263);
    --accent:        oklch(78% 0.12 263);
    --accent-hover:  oklch(84% 0.13 263);
    --accent-active: oklch(72% 0.12 263);
    --accent-fg:     oklch(15% 0.02 263);
    --accent-soft:   oklch(28% 0.06 263);
    --accent-line:   oklch(38% 0.08 263);
    --highlight:     oklch(88% 0.16 90);
    --highlight-soft:oklch(38% 0.05 90);
    --highlight-fg:  oklch(20% 0.04 90);
    --success: oklch(74% 0.13 145);
    --danger:  oklch(72% 0.16 25);
    --warning: oklch(82% 0.14 70);
    --shadow:    0 2px 8px oklch(0% 0 0 / 0.4), 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-md: 0 8px 24px oklch(0% 0 0 / 0.45), 0 2px 6px oklch(0% 0 0 / 0.3);
    --shadow-lg: 0 20px 48px oklch(0% 0 0 / 0.55), 0 6px 12px oklch(0% 0 0 / 0.35);
    --shadow-focus: 0 0 0 3px oklch(78% 0.12 263 / 0.4);
    --eu-star-color: oklch(85% 0.16 90 / 0.06);
    color-scheme: dark;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-page: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}