/* tokens.css : jetons d'Eligive.
   Sa demande (09/11/2026) : la référence de CONTENU.md, « rebrand dans les couleurs hyperliquid ».
   Mesures Hyperliquid reprises telles quelles du projet elys-charity (même jour, même outil).
   Structure reprise du gabarit de jetons de la base db/ (3 couches). Couleurs MESURÉES le 09/11/2026 sur le vrai rendu de
   app.hyperliquid.xyz/trade (styles calculés + pixels, outils/navigateur.mjs) et sur hyperliquid.xyz :
     panneau #0F1A1F, page et filets #1B2429, contrôle #273035, accent #50D2C1 (texte dessus #04060C),
     texte #F6FEFD / #D2DAD7 / #949E9C / #878C8F, achat #1FA67D, vente #ED7088, sarcelle #17453F et #1E5D52,
     menthe du logo #97FCE4 (app.hyperliquid.xyz/coins/HYPE.svg), vert profond #03211C et #0F3933 (hyperliquid.xyz).
   Choix maison, non mesurés chez Hyperliquid : --accent-warning (ambre), --accent-info. Police : Geist (OFL), car
   celle d'Hyperliquid est propriétaire. */

/* 1. PRIMITIVES */
:root {
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --code: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-title: 28px;
  --fs-metric: clamp(26px, 2.6vw, 34px); --fs-hero: clamp(38px, 5vw, 64px);
  --fw: 500; --fw-strong: 600; --tracking: -.012em; --tracking-caps: .06em; --lh: 1.55;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-card: 14px; --radius-hero: 20px;
  --radius-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-14: 56px; --sp-20: 80px;
  --content-max: 1180px; --nav-h: 60px; --input-h: 40px; --btn-h: 38px;
  --dur-fast: .15s; --dur: .2s; --dur-slow: .35s;
  --ease-std: ease; --ease-soft: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-land: cubic-bezier(.2, .9, .3, 1); --ease-pop: cubic-bezier(.2, 1.4, .4, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);

  /* Hyperliquid, mesuré */
  --hl-panel: #0F1A1F; --hl-page: #1B2429; --hl-control: #273035; --hl-control-hi: #343E43;
  --hl-accent: #50D2C1; --hl-on-accent: #04060C; --hl-mint: #97FCE4; --hl-teal: #17453F; --hl-teal-hi: #1E5D52;
  --hl-deep: #03211C; --hl-deep-2: #0F3933;
  --hl-text: #F6FEFD; --hl-text-2: #D2DAD7; --hl-text-3: #949E9C; --hl-text-4: #878C8F; --hl-line-hi: #575E62;
  --hl-buy: #1FA67D; --hl-sell: #ED7088;

  /* Eligive, mesuré sur le logo fourni */
  --brand-mint: #9CFBE9; --brand-deep: #022120;
}

/* 2. SÉMANTIQUES (un seul thème : Eligive sur Hyperliquid) */
:root {
  --bg-body: var(--hl-panel); --bg-card: var(--hl-page); --bg-elevated: var(--hl-control); --bg-hover: var(--hl-control);
  --bg-sunken: #0B1418; --bg-glass: rgba(15, 26, 31, .82); --bg-float: #1F292E;
  --line: var(--hl-page); --line-card: var(--hl-control); --line-hi: var(--hl-line-hi);
  --text-bright: var(--hl-text); --text-normal: var(--hl-text-2); --text-muted: var(--hl-text-3);
  --text-faint: var(--hl-text-4); --text-dim: var(--hl-line-hi);
  --accent: var(--hl-accent); --accent-strong: var(--hl-mint); --on-accent: var(--hl-on-accent);
  --accent-deep: var(--hl-teal); --accent-deep-hi: var(--hl-teal-hi);
  --accent-success: var(--hl-buy); --accent-error: var(--hl-sell);
  --accent-warning: #E8B04B; --accent-info: var(--hl-accent);
  --focus-ring: 0 0 0 2px var(--hl-panel), 0 0 0 4px var(--hl-accent);
}

/* Recettes : lisent les jetons par color-mix, jamais redéclarées ailleurs. */
:root {
  --accent-wash: color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-edge: color-mix(in srgb, var(--accent) 38%, transparent);
  --success-soft: color-mix(in srgb, var(--accent-success) 14%, transparent);
  --error-soft: color-mix(in srgb, var(--accent-error) 14%, transparent);
  --warning-soft: color-mix(in srgb, var(--accent-warning) 13%, transparent);
  --row-hover: color-mix(in srgb, var(--text-bright) 3%, transparent);
  --veil: color-mix(in srgb, var(--hl-panel) 72%, transparent);
  --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, .55), 0 0 0 1px var(--line-card);
}

/* 3. COMPOSANTS */
:root {
  --btn-r: var(--radius-md); --btn-px: 16px; --btn-fs: var(--fs-sm); --btn-press: .97; --btn-disabled-o: .38;
  --card-r: var(--radius-card); --card-p: 20px; --field-r: var(--radius-md); --field-px: 12px;
  --badge-r: var(--radius-xs); --badge-p: 2px 7px; --toast-r: var(--radius-md);
  --toast-ms-ok: 3000; --toast-ms-warn: 4500; --toast-ms-error: 6000;
}