/* =====================================================================
   Ascenzia · Tokens web (charte refonte ascenzia.ai, v1 du 14/10/2026)
   Source : kit de marque interne + DA deck V3.1. Contrastes vérifiés WCAG 2.2 AA.
   Mode sombre par défaut (marque) ; mode clair via [data-theme="light"]
   sur <html> ou sur une section (.section--light).
   ===================================================================== */

/* Polices : auto-hébergées, voir fonts.css (@font-face) et fonts/*.woff2. Charger fonts.css avant tokens.css. */

:root{
  /* ---------- Palette brute (ne pas utiliser directement dans les composants) ---------- */
  --navy-950:#11151d;  /* fond « deep » */
  --navy-900:#1a202c;  /* fond sombre principal, encre sur clair */
  --navy-800:#232a37;  /* cartes sur sombre */
  --navy-700:#2d3748;  /* fin du dégradé, surfaces hautes */
  --slate-600:#4c5464; /* texte courant sur clair */
  --slate-500:#646b78; /* légendes sur clair (web, remplace #767e8e) : 5,14:1 off, 4,88:1 sunk */
  --slate-400:#7f8798; /* bord de champ sur sombre */
  --slate-300:#a8aebc; /* texte secondaire sur sombre */
  --slate-200:#ededf2; /* texte principal sur sombre */
  --off-50:#fafafb;    /* fond clair */
  --sunk-100:#f4f4f6;  /* fond clair enfoncé */
  --white:#ffffff;

  --gold-50:#fbf6ec;   /* teinte de fond douce (clair) */
  --gold-300:#e5bd78;  /* survol bouton primaire */
  --gold-400:#ddac63;  /* or de marque : accent, filets, chiffres clés */
  --gold-600:#b9863a;  /* bouton primaire pressé */
  --gold-700:#8e662b;  /* texte or sur fond clair */

  --teal-400:#52bec0;  /* « menthe » du kit : pilier Gouverner, focus sur sombre */
  --teal-700:#23797b;  /* teal lisible sur clair (web) */
  --mint-200:#a8dedf;  /* menthe claire, données */
  --blue-300:#93aed0;  /* ardoise : pilier Superviser, info */
  --blue-700:#4f6f96;  /* ardoise lisible sur clair */
  --bord-400:#c26476;  /* bordeaux : pilier Sécuriser (aplat, filet, grand texte) */
  --bord-300:#d98597;  /* bordeaux lisible en petit texte sur sombre (web) */
  --bord-700:#8b3a4a;  /* bordeaux sur clair */
  --error-dark:#f2b8b5; --error-light:#b3261e;

  /* ---------- Typo ---------- */
  --font-display:'League Spartan',system-ui,sans-serif;  /* H1, chiffres, sur-titres */
  --font-title:'Poppins',system-ui,sans-serif;           /* H2, seconde ligne italique or */
  --font-body:'Open Sans',system-ui,sans-serif;          /* texte courant */
  --font-mono:'JetBrains Mono',ui-monospace,monospace;   /* étiquettes, données, légendes */

  /* Échelle fluide 360 px → 1440 px */
  --fs-hero:clamp(3rem,1.2rem + 6.6vw,7.5rem);         /* 48 → 120 px, une phrase par écran */
  --fs-giant:clamp(6rem,2rem + 17vw,16rem);           /* 96 → 256 px, chiffre plein écran */
  --fs-display:clamp(2.75rem,1.6rem + 4.6vw,6rem);    /* 44 → 96 px, titre de scène */
  --fs-h1:clamp(2.25rem,1.7rem + 2.4vw,3.75rem);       /* 36 → 60 px, H1 pages */
  --fs-h2:clamp(1.75rem,1.45rem + 1.3vw,2.625rem);     /* 28 → 42 px */
  --fs-h3:clamp(1.25rem,1.15rem + .45vw,1.5rem);       /* 20 → 24 px */
  --fs-lead:clamp(1.125rem,1.06rem + .3vw,1.3125rem);  /* 18 → 21 px */
  --fs-body:1.0625rem;                                 /* 17 px */
  --fs-small:.9375rem;                                 /* 15 px */
  --fs-eyebrow:.8125rem;                               /* 13 px, capitales espacées */
  --fs-mono:.75rem;                                    /* 12 px */
  --fs-kpi:clamp(2.5rem,1.9rem + 2.6vw,4rem);          /* 40 → 64 px */
  --lh-tight:1.0; --lh-title:1.15; --lh-body:1.6;
  --ls-eyebrow:.14em; --ls-mono:.08em; --ls-display:-.03em;

  /* ---------- Espacements, rayons, ombres ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --section-y:clamp(64px,8vw,128px);
  --container:1200px; --container-wide:1320px; --gutter:clamp(20px,4vw,40px);
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-pill:999px;
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px rgba(0,0,0,.28);
  --shadow-shot:0 0 0 1px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.45),0 0 80px rgba(82,190,192,.10);
  --glow-gold:0 0 30px rgba(221,172,99,.45);

  /* ---------- Motion ---------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:160ms; --dur:320ms; --dur-reveal:640ms; --stagger:90ms;

  /* ---------- Rôles sémantiques : MODE SOMBRE (défaut) ---------- */
  --bg:var(--navy-900);
  --bg-gradient:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 100%);
  --bg-deep:var(--navy-950);
  --surface:var(--navy-800);
  --surface-2:rgba(255,255,255,.04);
  --border:rgba(237,237,242,.09);
  --border-strong:rgba(237,237,242,.18);
  --text:var(--slate-200);        /* 13,98:1 sur navy-900 */
  --text-muted:var(--slate-300);  /* 7,34:1 sur navy-900, 6,48:1 sur carte */
  --text-subtle:#8a92a3;          /* 5,0:1 sur navy-900, 4,61:1 sur carte */
  --accent:var(--gold-400);       /* 7,89:1 sur navy-900 */
  --accent-text:var(--gold-400);
  --link:var(--gold-400);
  --link-hover:var(--gold-300);
  --focus:var(--teal-400);        /* 7,37:1 sur navy-900 */
  --input-bg:var(--navy-950);
  --input-border:var(--slate-400);/* 3,99:1 sur carte (non-texte >= 3:1) */
  --error:var(--error-dark);      /* 9,56:1 */
  --pillar-create:var(--gold-400);
  --pillar-supervise:var(--blue-300);
  --pillar-secure:var(--bord-300);
  --pillar-govern:var(--teal-400);
  --btn-primary-bg:var(--gold-400); --btn-primary-text:var(--navy-900); /* 7,89:1 */
  --btn-primary-hover:var(--gold-300);                                  /* 9,23:1 */
  --btn-primary-active:var(--gold-600);                                 /* 5,08:1 */
  --btn-secondary-text:var(--gold-400); --btn-secondary-border:rgba(221,172,99,.55);
  --btn-ghost-text:var(--slate-200);
  /* réserve, non utilisé */ --badge-dev-text:var(--blue-300); --badge-dev-border:rgba(147,174,208,.55); /* 6,65:1 */
  color-scheme:dark;
}

/* ---------- Rôles sémantiques : MODE CLAIR ---------- */
[data-theme="light"],.section--light{
  --bg:var(--off-50);
  --bg-gradient:none;
  --bg-deep:var(--sunk-100);
  --surface:var(--white);
  --surface-2:var(--sunk-100);
  --border:rgba(26,32,44,.09);
  --border-strong:rgba(26,32,44,.18);
  --text:var(--navy-900);         /* 15,64:1 sur off-50 */
  --text-muted:var(--slate-600);  /* 7,30:1 */
  --text-subtle:var(--slate-500); /* 5,14:1 */
  --accent:var(--gold-400);       /* aplat et filet uniquement (1,98:1) */
  --accent-text:var(--gold-700);  /* 4,93:1 sur off-50 */
  --link:var(--gold-700);
  --link-hover:var(--navy-900);
  --focus:var(--teal-700);        /* 4,92:1 */
  --input-bg:var(--white);
  --input-border:#8a919f;         /* 3,17:1 sur blanc */
  --error:var(--error-light);     /* 6,54:1 */
  --pillar-create:var(--gold-700);
  --pillar-supervise:var(--blue-700);
  --pillar-secure:var(--bord-700);
  --pillar-govern:var(--teal-700);
  --btn-primary-bg:var(--gold-400); --btn-primary-text:var(--navy-900);
  --btn-primary-hover:var(--gold-300);
  --btn-primary-active:var(--gold-600);
  --btn-secondary-text:var(--navy-900); --btn-secondary-border:var(--navy-900);
  --btn-ghost-text:var(--navy-900);
  --badge-dev-text:var(--blue-700); --badge-dev-border:rgba(79,111,150,.6); /* 4,98:1 */
  color-scheme:light;
}

/* Section « deep » (fond le plus sombre : FAQ, preuves, pied de page) */
.section--deep{--bg:var(--navy-950);--bg-gradient:none;--surface:#171c26}