/* CU-TOKENS-PALIER-01 — source unique des design tokens Genealogo.
   Chargé en premier sur toutes les pages.
   CU-COLORS-FILE-01 (#467) : la PALETTE DE MARQUE vit désormais dans
   colors.css (importé ci-dessous) — violet, jaune aide, premium, pâle,
   verres/voiles, champs. Les tokens ci-dessous ne redéfinissent plus ces
   couleurs, ils les RÉFÉRENCENT (var(--colo-*)). */
@import url('colors.css');

/* CC-SATOSHI-GLOBAL-01 (#839) : POLICES CENTRALISÉES ici — tokens.css est chargé
   en premier sur TOUTES les pages, donc ces @font-face + tokens portent toute la
   typographie d'un seul endroit (self-hosted, CSP-safe : aucune requête externe).
   Satoshi en fonte VARIABLE (poids 300–900 + italique) : une famille, tous les
   poids. Instrument Serif reste déclarée (ne télécharge que si utilisée, swap) —
   elle sert le REVERT serif via --font-title. Licences à côté des woff2. */
@font-face {
  font-family: 'Satoshi';
  src: url('/public/assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/public/assets/fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/public/assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── Marque : voir colors.css (--colo-fresh, --colo-magenta, --colo-premium,
        --colo-help, --colo-pale, --colo-brand-bg/-2, --bg) ── */
  --color-valid: #4cdc8b;
  --color-error: #b3261e;
  --color-error-alt: #c0392b;
  --color-danger: #e11d48;
  --color-success: #1a7f4c;
  --color-success-bright: #2faf6b;
  --color-success-dark: #0d5c36;
  --color-success-text: #1d7a4f;

  /* ── Texte (canonique) ── */
  /* #839 : TOUTE la typographie passe par --font / --font-title. Bascule
     Satoshi ⇄ police d'origine en (dé)commentant UNE valeur (revert = décommenter
     la ligne d'origine et commenter la ligne Satoshi). */
  --font: 'Satoshi', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* #839/#906b : Satoshi. Plus de !important — theme.js ne force plus Inter inline. */
  /* --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; */ /* #839 REVERT : valeur d'origine (UI en Inter) — décommenter, commenter la ligne Satoshi */
  --font-title: var(--font); /* #839 : titres en Satoshi (suivent --font). REVERT SERIF = décommenter la ligne ci-dessous : */
  /* --font-title: 'Instrument Serif', Georgia, serif; */ /* #839 REVERT : titres/wordmark en serif d'origine */
  --text-fg: #1d2330;
  --text-muted: #6b7480;
  --text-subtle: #9aa2ad;
  --text-tertiary: #5b6573;
  --text-inverse: #fff;

  /* ── Texte (valeurs distinctes préservées — décisions D1–D6) ── */
  --text-fg-drawer: #1a1a1a;
  --text-muted-admin: #8a93a3;
  --text-muted-menu: #8a93a0;
  --text-muted-drawer: #9ca3af;
  --text-caption: #3c4453;
  --text-placeholder: #a8b0bc;
  --text-hint: #c5cad3;

  /* ── Typo (échelle + demi-points préservés) ── */
  --text-xs: 10px;
  --text-xs-plus: 10.5px;
  --text-2xs: 11px;
  --text-sm-alt: 11.5px;
  --text-sm: 12px;
  --text-sm-plus: 12.5px;
  --text-base: 13px;
  --text-base-plus: 13.5px;
  --text-md: 14px;
  --ui-fs-title: var(--text-md);
  --ui-fs: var(--text-base);
  --ui-fs-sm: var(--text-sm);

  /* ── Surfaces ── */
  --surface: #fff;
  --surface-inverse: #000;
  --surface-muted: #f4f5f8;
  --surface-control: #f0f2f6;
  --surface-subtle: #f6f7fa;
  --surface-subtle-2: #f6f7fb;
  --surface-subtle-3: #f2f4f8;
  --surface-subtle-4: #f3f4f6;
  --surface-subtle-5: #eef1f6;
  --surface-subtle-6: #eef0f4;
  --surface-subtle-7: #f8f9fb;
  --surface-subtle-8: #fafafa;
  --surface-subtle-9: #fbfbfe;
  --surface-subtle-10: #f1f2f7;
  --surface-subtle-11: #f7f8fb;
  --surface-accent-soft: #edecfe;
  --surface-error: #fff3f3;
  --surface-error-soft: #fdecea;
  --surface-success-soft: #e8f8ef;
  --surface-success-mid: #b8e6cc;
  --surface-success-badge: #e5f6ee;
  --surface-error-border: #f5c6c0;
  --surface-error-tint: #e8b4b0;
  --surface-account-hover: #f4f5f9;
  /* --surface-glass, --surface-glass-menu, --surface-overlay-modal(-light) :
     déplacés dans colors.css (verres/voiles de marque) */
  --surface-overlay: rgba(20, 25, 40, 0.32);
  --surface-overlay-dark: rgba(20, 24, 40, 0.42);
  --surface-scrim: rgba(20, 30, 50, 0.45);

  /* ── Bordures (chaque hex préservé) ── */
  --border: #e7e9ef;
  --border-login: #e2e6ee;
  --border-drawer: #eceef2;
  --border-alt: #e6e9ef;
  --border-strong: #dfe2e9;
  /* --field-* et --popin-* (champs + verre/voile des popins) : déplacés dans
     colors.css (CU-COLORS-FILE-01 #467) */
  --border-hover: #d7dbe3;
  --border-hover-alt: #c9cfdb;
  --border-muted: #cfd4dd;
  --border-panel: #eceef4;
  --border-panel-alt: #e4e8f2;
  --border-error: #f3c8c8;
  --border-chip: #dfe3ec;
  --border-account-sep: #f0f1f5;
  --shell-border: color-mix(in srgb, var(--colo-fresh) 8%, transparent); /* #467 : suit --colo-fresh */
  --text-icon-muted: #b8bfc9;

  /* ── Shell layout ── */
  /* #883 : DEUX largeurs, deux rôles.
     --sidebar-rail = la largeur FERMÉE, constante — c'est l'ANCRE DU GRAPHE :
       l'encre commence là et n'en bouge plus, quel que soit l'état du panneau.
     --sidebar-w = la largeur VIVANTE du panneau (72 fermé, 220 ouvert via
       html.sidebar-expanded) — le chrome qui doit ESQUIVER le panneau ouvert
       (topnav, #atlas-ctx, carrousel, panneau SA, ancrages Aperçu) la suit ;
       le surplus d'ouverture (148px) FLOTTE au-dessus de l'Atlas. */
  --sidebar-rail: 72px; /* CC-DESIGN-3-01 (#566) : rail 60→72 (plus confortable, icônes centrées) */
  --sidebar-w: var(--sidebar-rail);
  --topnav-h: 52px;
  --shell-surface: var(--surface-glass);
  --nav-active-bg: color-mix(in srgb, var(--colo-fresh) 12%, white);
  /* #883 (3) : survol FRANCHEMENT distinct — 6% → 12%, et base TRANSPARENTE au
     lieu de white : le même token tient sur la sidebar claire ET sombre
     (vo-dark redéfinit la surface, pas ce mix). Seul le token de marque parle. */
  /* #894 : la sidebar ne parle plus par la SURFACE mais par le TRAIT — ce token
     n'y sert plus (il reste pour .topnav-link, seul consommateur restant). */
  --nav-hover-bg: color-mix(in srgb, var(--colo-fresh) 12%, transparent);
  /* #894 — les TROIS ÉTATS de la sidebar, en tokens (aucune valeur en dur) :
     l'ENCRE dit TOUT (repos → survol → sélection). v3, retour Damien :
     l'épaisseur au survol est ABANDONNÉE (« ça fait sale ») — le trait reste
     constant, --nav-stroke est le seul token d'épaisseur. */
  --nav-ink: rgba(0, 0, 0, 0.34);     /* #894 (Damien) : noir 34 % au repos */
  --nav-ink-selected: var(--colo-fresh);
  --nav-ink-hover: rgba(0, 0, 0, 0.84); /* #894 (Damien) : noir 84 % au survol */
  --nav-stroke: 2;                    /* trait au repos (défaut Lucide) */

  /* ── Menu layout ── */
  --menu-pad: 14px;
  --menu-gap: 10px;
  --menu-bg: var(--surface-glass-menu);
  --menu-title-size: 12px;
  --menu-label-size: 12px;
  --menu-val-size: 11px;
  --tooltip-bg: var(--menu-bg);
  --tooltip-fg: var(--text-fg);

  /* ── Print modal layout ── */
  --pm-modal-h: min(84vh, 720px); /* CC-BTN-CHARTE-PRINT-01 : popin Print moins haute (constat Damien — 860px mangeait l'écran) */
  --pm-modal-w: min(1120px, calc(100vw - 32px));

  /* ── Alias modules (rétro-compat, zéro changement visuel) ── */
  --shell-fg: var(--text-fg);
  --shell-muted: var(--text-muted);
  --login-fg: var(--text-fg);
  --login-muted: var(--text-muted);
  --login-border: var(--border-login);
  --adm-font: var(--font);
  --adm-fresh: var(--colo-fresh);
  --adm-ink: var(--text-fg);
  --adm-mut: var(--text-muted);
  --adm-line: var(--border);
  --menu-fg: var(--text-fg);
  --menu-border: var(--border);
  --menu-muted: var(--text-muted-menu);
  --menu-accent: var(--colo-fresh);
  --pd-font: var(--font);
  --pd-fg: var(--text-fg-drawer);
  --pd-muted: var(--text-muted-drawer);
  --pd-border: var(--border-drawer);
  --pd-accent: var(--colo-fresh);
  --pm-fresh: var(--colo-fresh);
  --pm-magenta: var(--colo-magenta);
  --pm-valid: var(--color-valid);
  --pm-fg: var(--text-fg);
  --pm-muted: var(--text-muted);
  --pm-border: var(--border-login);
  --pm-font: var(--font);

  /* ── Rayons (valeur exacte préservée) ── */
  --radius-none: 0;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-26: 26px;
  --radius-full: 999px;
  --radius-circle: 50%;
  --radius-split-left: 20px 0 0 20px;
  --radius-split-right: 0 20px 20px 0;
  --menu-radius-sm: var(--radius-8);
  --menu-radius: var(--radius-14);

  /* ── Typo complémentaire (valeurs exactes) ── */
  --text-3xs: 9px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-32: 32px;
  --text-36: 36px;
  --text-rem-5625: 0.5625rem;
  --text-rem-625: 0.625rem;
  --text-rem-68: 0.68rem;
  --text-rem-72: 0.72rem;
  --text-rem-75: 0.75rem;
  --text-rem-78: 0.78rem;
  --text-rem-8125: 0.8125rem;
  --text-rem-85: 0.85rem;
  --text-rem-86: 0.86rem;
  --text-rem-875: 0.875rem;
  --text-rem-88: 0.88rem;
  --text-rem-8: 0.8rem;
  --text-rem-9: 0.9rem;
  --text-rem-92: 0.92rem;
  --text-rem-95: 0.95rem;
  --text-rem-1: 1rem;
  --text-rem-135: 1.35rem;
  --text-rem-1375: 1.375rem;
  --text-rem-13: 1.3rem;
  --text-rem-15: 1.5rem;
  --text-rem-165: 1.65rem;
  --text-rem-2: 2rem;
  --text-rem-225: 2.25rem;
  --text-rem-3: 3rem;
  --text-rem-38: 3.8rem;
  --text-display-sm: clamp(2rem, 3.5vw, 2.75rem);
  --text-display-lg: clamp(2.2rem, 4vw, 3rem);

  /* ── Ombres (valeur exacte préservée — D10 violette incluse) ── */
  --shadow-sidebar: 2px 0 24px color-mix(in srgb, var(--colo-fresh) 4%, transparent); /* #467 */
  --shadow-sidebar-drawer: 12px 0 40px rgba(20, 30, 50, .25);
  --shadow-chip: 0 2px 8px rgba(20,30,50,.06);
  --shadow-chip-md: 0 2px 10px rgba(20, 30, 50, .05);
  --shadow-chip-lg: 0 2px 10px rgba(20, 30, 50, .10);
  --shadow-tooltip: 0 6px 20px rgba(20, 30, 50, .18);
  --shadow-btn-hover: 0 6px 20px rgba(20,30,50,.18);
  --shadow-edit-toggle: 0 1px 2px color-mix(in srgb, var(--colo-fresh, var(--colo-fresh)) 25%, transparent);
  --shadow-cta: 0 4px 16px color-mix(in srgb, var(--colo-fresh, var(--colo-fresh)) 30%, transparent);
  --shadow-cta-glow: 0 4px 20px color-mix(in srgb, var(--colo-fresh) 35%, transparent);
  --shadow-cta-hover: 0 8px 24px color-mix(in srgb, var(--colo-fresh, var(--colo-fresh)) 38%, transparent);
  /* CC-SHEEN-RELOCATE-01 (#584) : lumière des CTA — halo radial plus CLAIR qui
     part du coin HAUT-DROIT et se dégrade en diagonale jusqu'au BAS-GAUCHE
     (#579). Blanc pur, AUCUNE valeur de marque → il vit ici (voie neutre) et
     non dans colors.css (voie exclusive de Cursor pour les couleurs).
     Usage : `background: var(--cta-sheen), var(--colo-fresh);` */
  --cta-sheen: radial-gradient(circle farthest-corner at 100% 0%,
    rgba(255, 255, 255, .32) 0%,
    rgba(255, 255, 255, .12) 55%,
    rgba(255, 255, 255, 0) 100%);
  --shadow-card: 0 4px 16px rgba(20, 30, 50, 0.12);
  --shadow-card-tint: 0 4px 16px color-mix(in srgb, var(--pm-fresh) 30%, transparent);
  --shadow-subtle: 0 2px 14px rgba(0, 0, 0, 0.04);
  --shadow-subtle-md: 0 2px 14px rgba(0, 0, 0, 0.05);
  --shadow-subtle-lg: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-dot: 0 1px 4px rgba(0, 0, 0, 0.15);
  --shadow-overlay-soft: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.1);
  --shadow-fresh-soft: 0 8px 28px color-mix(in srgb, var(--colo-fresh) 14%, transparent); /* #467 */
  --shadow-popin: 0 20px 60px rgba(20, 30, 50, 0.22);
  --shadow-onboarding: 0 18px 60px rgba(20, 30, 50, .14);
  --shadow-modal: 0 24px 70px rgba(20, 30, 50, .3);
  --shadow-modal-violet: 0 24px 80px rgba(26, 15, 46, 0.35);
  --shadow-drawer: -16px 0 48px rgba(26, 15, 46, 0.14);
  --shadow-pricing: 0 12px 34px rgba(20, 30, 50, .14);
  --shadow-help: 0 6px 20px color-mix(in srgb, var(--colo-help, var(--colo-help)) 35%, transparent);
  --shadow-inset-valid: inset 0 0 0 1px color-mix(in srgb, var(--pm-valid) 30%, transparent);
  --shadow-focus-fresh: 0 0 0 3px color-mix(in srgb, var(--colo-fresh) 18%, transparent);
  --shadow-focus-fresh-fb: 0 0 0 3px color-mix(in srgb, var(--colo-fresh, var(--colo-fresh)) 18%, transparent);
  --shadow-focus-fresh-35: 0 0 0 3px color-mix(in srgb, var(--colo-fresh, var(--colo-fresh)) 35%, transparent);
  --shadow-focus-valid-20: 0 0 0 3px color-mix(in srgb, var(--pm-valid) 20%, transparent);
  --shadow-focus-valid-35: 0 0 0 3px color-mix(in srgb, var(--pm-valid) 35%, transparent);
  --shadow-focus-valid-40: 0 0 0 4px color-mix(in srgb, var(--pm-valid) 40%, transparent);
  --shadow-focus-valid-1: 0 0 0 1px color-mix(in srgb, var(--pm-valid) 35%, transparent);
  --shadow-focus-accent: 0 0 0 4px color-mix(in srgb, var(--pd-accent) 20%, transparent);
  --shadow-focus-danger: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent);
  --shadow-carousel-ring: 0 0 14px color-mix(in srgb, currentColor 75%, transparent);
  --menu-shadow: 0 10px 34px rgba(20, 30, 50, 0.14);
}