/* ============================================================
   tokens.css — Design system « Reunion Trading Hub »
   Identite heritee de D:\Projects\reunion-trading\STYLE.md (continuite membres)
   + rigueur frontend-elite (oklch exact + hex fallback, ombres differenciees,
   easings, prefers-contrast/reduced-motion/forced-colors, AA verifie au runtime).
   Polices : Archivo Black (titres, style Impact) · Inter (corps) · JetBrains Mono (chiffres).
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- surfaces (near-black bleute, jamais #000) ---- */
  --bg: #070910;
  --bg-2: #0A0D16;
  --surface: #10131D;
  --surface-2: #161A26;
  --surface-3: #1B1F2D;
  --surface-glass: rgba(16, 19, 29, 0.62);
  --surface-glass-film: rgba(7, 9, 16, 0.40);
  --elevation-overlay: rgba(255, 255, 255, 0.04);

  /* ---- bordures ---- */
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-bright: rgba(255, 255, 255, 0.22);
  --grid-line: rgba(255, 255, 255, 0.05);

  /* ---- texte (off-white -> dim) ---- */
  --ink: #EAECF3;        /* principal */
  --ink-soft: #AEB6C6;   /* secondaire */
  --ink-mute: #79829A;   /* muted — texte sur --bg/--surface/--surface-2 (>=4.5:1). NE PAS utiliser comme texte sur --surface-3 (tombe a ~4.25:1). */
  --ink-dim: #4F586D;    /* dimmed — RESERVE decor non-signifiant uniquement (separateur/grille, <3:1). Jamais texte ni indicateur d'etat (1.4.11). Les indicateurs d'etat inactifs utilisent --ink-mute (>=4.5:1). */

  /* ---- bleu lumineux dominant (brand) ---- */
  --brand: #5DA8F2;
  --brand-soft: #7AB8F5;
  --brand-bright: #A6CFFA;
  --brand-deep: #3D8AD8;
  --brand-glow: rgba(93, 168, 242, 0.45);
  --brand-dim: rgba(93, 168, 242, 0.14);
  --brand-mist: rgba(93, 168, 242, 0.06);

  /* ---- accents secondaires ---- */
  --violet: #A78BFA;  --violet-dim: rgba(167, 139, 250, 0.16);  --violet-glow: rgba(167, 139, 250, 0.40);
  --cyan: #5EEAD4;    --cyan-dim: rgba(94, 234, 212, 0.14);     --cyan-glow: rgba(94, 234, 212, 0.22);
  --gold: #E4B14E;    --gold-dim: rgba(228, 177, 78, 0.14);  /* RESERVE XAU/USD */
  --scrim: rgba(3, 4, 8, 0.55);  /* voile near-black (vignette de fond) */

  /* ---- verdicts trading ---- */
  --bull: #3FD693;    --bull-dim: rgba(63, 214, 147, 0.14);
  --bear: #F26483;    --bear-dim: rgba(242, 100, 131, 0.14);
  --neutral: #8C95AC; --neutral-dim: rgba(140, 149, 172, 0.16);

  /* ---- CTA : fill bleu lumineux, TEXTE SOMBRE (--bg) = AA sur tout le degrade ---- */
  --cta-grad-a: #7AB8F5;
  --cta-grad-b: #5DA8F2;
  --cta-text: #060810;
  --focus-ring: #7AB8F5;   /* >=3:1 sur --bg et sur fills */

  /* ---- couche SEMANTIQUE (role-based, 2 niveaux) ---- */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-text-2: var(--ink-soft);
  --color-text-3: var(--ink-mute);
  --color-accent: var(--brand);
  --color-border: var(--line);
  --color-focus: var(--focus-ring);
  --color-positive: var(--bull);
  --color-negative: var(--bear);
  --color-neutral: var(--neutral);

  /* ---- typographie ---- */
  --font-display: "Archivo Black", Impact, "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-hero: clamp(2.6rem, 1.7rem + 4.4vw, 5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.7vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.75vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --measure: 68ch;
  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  /* ---- spacing — echelle complete (aucun trou) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --space-9: 6rem; --space-10: 8rem;

  --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --container: 1240px; --container-narrow: 880px; --nav-h: 68px;

  /* ---- ombres DIFFERENCIEES par elevation (une seule = AI-slop) ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 28px 70px rgba(0, 0, 0, 0.55);

  /* ---- glow (CTA / etat actif ; double d'un outline en forced-colors) ---- */
  --glow-brand: 0 0 0 1px rgba(93, 168, 242, 0.25), 0 8px 26px rgba(93, 168, 242, 0.28), 0 0 50px var(--brand-glow);
  --glow-brand-hover: 0 0 0 1px rgba(93, 168, 242, 0.4), 0 10px 32px rgba(93, 168, 242, 0.4), 0 0 64px var(--brand-glow);
  --glow-soft: 0 0 30px rgba(93, 168, 242, 0.18);

  /* ---- easings ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);          /* chiffres/valeurs, pas d'overshoot */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%,
    1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);

  --t: 0.25s; --t-fast: 0.15s; --t-slow: 0.55s;
  --z-aurora: 0; --z-base: 1; --z-sticky: 50; --z-header: 100; --z-overlay: 1000; --z-modal: 1100;
}

/* ---- oklch override : MEME couleur sRGB (contraste identique) + gamut P3.
   Valeurs converties par calcul exact (scripts/hex-to-oklch.mjs), zero approximation. ---- */
@supports (color: oklch(0 0 0)) {
  :root {
    --bg: oklch(0.1410 0.0159 270.35);
    --bg-2: oklch(0.1606 0.0198 269.89);
    --surface: oklch(0.1886 0.0210 271.37);
    --surface-2: oklch(0.2196 0.0244 270.06);
    --surface-3: oklch(0.2420 0.0275 271.90);
    --ink: oklch(0.9436 0.0096 273.35);
    --ink-soft: oklch(0.7750 0.0245 264.42);
    --ink-mute: oklch(0.6077 0.0380 269.05);
    --ink-dim: oklch(0.4607 0.0361 266.79);
    --brand: oklch(0.7148 0.1321 249.88);
    --brand-soft: oklch(0.7644 0.1090 249.04);
    --brand-bright: oklch(0.8401 0.0746 249.94);
    --brand-deep: oklch(0.6223 0.1404 251.37);
    --violet: oklch(0.7090 0.1592 293.54);
    --violet-glow: oklch(0.7090 0.1592 293.54 / 0.40);
    --cyan: oklch(0.8549 0.1251 181.07);
    --cyan-glow: oklch(0.8549 0.1251 181.07 / 0.22);
    --gold: oklch(0.7887 0.1294 81.39);
    --scrim: oklch(0.0810 0.0150 271 / 0.55);
    --bull: oklch(0.7813 0.1587 159.48);
    --bear: oklch(0.6891 0.1758 9.51);
    --neutral: oklch(0.6704 0.0356 268.50);
    --cta-grad-a: oklch(0.7644 0.1090 249.04);
    --cta-grad-b: oklch(0.7148 0.1321 249.88);
    --focus-ring: oklch(0.7644 0.1090 249.04);
    --line: oklch(1 0 0 / 0.075);
    --line-strong: oklch(1 0 0 / 0.14);
    --line-bright: oklch(1 0 0 / 0.22);
    --grid-line: oklch(1 0 0 / 0.05);
    --elevation-overlay: oklch(1 0 0 / 0.04);
  }
}

/* ---- prefers-contrast: more (Baseline) ---- */
@media (prefers-contrast: more) {
  :root {
    --surface-glass: var(--surface);
    --surface-glass-film: transparent;
    --line: rgba(255, 255, 255, 0.3);
    --line-strong: rgba(255, 255, 255, 0.45);
    --ink-soft: var(--ink);
    --ink-mute: var(--ink-soft);
  }
}

/* ---- reduced-transparency : enhancement-only ---- */
@media (prefers-reduced-transparency: reduce) {
  :root { --surface-glass: var(--surface); --surface-glass-film: transparent; }
}

/* ---- reduced-motion : safety net global ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- forced-colors / Windows High Contrast ---- */
@media (forced-colors: active) {
  :root { --focus-ring: Highlight; }
  :where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}