/* ==========================================================================
   Système de design — mise-en-conformite-nis2.be
   Registre « console GRC » : dense, instrumenté, sans dégradé ni emoji.

   Deux surfaces, un seul jeu de tokens :
     [data-surface="console"]  → référentiels, recherche, crosswalk (sombre)
     [data-surface="document"] → commercial, sectoriel, légal (clair, défaut)

   La surface dépend de la PAGE, pas du système d'exploitation : on ne pilote
   donc pas via prefers-color-scheme. Le lecteur peut basculer manuellement.
   ========================================================================== */

:root {
    /* ---- Typographie ---------------------------------------------------- */
    --font-sans: 'IBM Plex Sans', ui-sans-serif, -apple-system, 'Segoe UI',
                 system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo,
                 Consolas, monospace;

    /* Échelle typographique — en px, une valeur par usage, pas d'entre-deux */
    --t-3xs: 11px;   /* étiquettes de colonnes, exposants          */
    --t-2xs: 12px;   /* métadonnées, mentions légales              */
    --t-xs:  13px;   /* chips, cellules denses, légendes           */
    --t-sm:  14px;   /* interface, navigation, tableaux            */
    --t-base:16px;   /* corps de texte                             */
    --t-md:  18px;   /* chapô, intertitres de fiche                */
    --t-lg:  21px;   /* h4 / titre de carte                        */
    --t-xl:  26px;   /* h3                                         */
    --t-2xl: 32px;   /* h2                                         */
    --t-3xl: 42px;   /* h1                                         */
    --t-4xl: 52px;   /* h1 d'accueil uniquement                    */

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-base:  1.6;
    --lh-loose: 1.75;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;

    --track-caps: 0.06em;   /* pour les libellés en capitales */

    /* ---- Espacement — grille de 4 ---------------------------------------- */
    --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;   --s-6: 24px;   --s-8: 32px;  --s-10: 40px;
    --s-12: 48px;  --s-16: 64px;  --s-20: 80px; --s-24: 96px;

    /* ---- Rayons — anguleux, registre instrument -------------------------- */
    --r-xs: 3px;  --r-sm: 5px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;

    /* ---- Mesures ---------------------------------------------------------- */
    --nav-h: 60px;            /* hauteur réelle de l'en-tête, sert au scroll-padding */
    --measure: 68ch;          /* longueur de ligne confortable en lecture */
    /* Trois largeurs, trois rôles. Toute autre valeur est une dérive :
       verify.mjs refuse les surcharges « max-width » en ligne dans le HTML. */
    --container: 1280px;         /* coquille applicative : consoles, tableaux larges */
    --container-article: 1080px; /* corps rédactionnel */
    --container-narrow: 860px;   /* en-tête de page, formulaires, pages légales */

    /* ---- Mouvement -------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0, 0.15, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;

    /* ---- Teintes des référentiels ----------------------------------------
       Même clarté et même chroma, seule la teinte varie : ce sont des
       étiquettes d'appartenance, pas des alertes. Elles ne doivent jamais
       concurrencer les couleurs de statut.                                  */
    --h-nis2:  262;
    --h-iso:   212;
    --h-cyfun: 168;
    --h-dora:  312;
    --h-law:    52;
}

/* ==========================================================================
   Surface CLAIRE — pages éditoriales, commerciales, légales (défaut)
   ========================================================================== */
:root,
[data-surface="document"] {
    --ground:      oklch(0.985 0.003 250);
    --surface:     oklch(1 0 0);
    --surface-2:   oklch(0.967 0.005 250);
    --surface-3:   oklch(0.945 0.007 250);
    --surface-inv: oklch(0.19 0.016 250);

    --line:        oklch(0.895 0.008 250);
    --line-strong: oklch(0.80 0.012 250);

    --ink:         oklch(0.24 0.018 250);
    --ink-2:       oklch(0.44 0.016 250);
    --ink-3:       oklch(0.505 0.016 250);   /* tenu à 4,5:1 sur --surface et --surface-2 */
    --ink-inv:     oklch(0.98 0.004 250);

    --accent:      oklch(0.50 0.15 250);
    --accent-hover:oklch(0.43 0.16 250);
    --accent-ink:  oklch(0.99 0.004 250);
    --accent-soft: oklch(0.955 0.028 250);
    --accent-line: oklch(0.86 0.06 250);

    --ok:      oklch(0.52 0.13 152);
    --warn:    oklch(0.50 0.12 76);   /* tenu à 4,5:1 sur --warn-soft */
    --risk:    oklch(0.52 0.17 25);
    --neutral: oklch(0.55 0.02 250);
    --ok-soft:      oklch(0.955 0.035 152);
    --warn-soft:    oklch(0.962 0.045 76);
    --risk-soft:    oklch(0.960 0.030 25);
    --neutral-soft: oklch(0.955 0.005 250);

    --chip-l: 0.42;   --chip-c: 0.09;     /* texte du chip  */
    --chip-bg-l: 0.96; --chip-bg-c: 0.03; /* fond du chip   */
    --chip-bd-l: 0.88; --chip-bd-c: 0.05; /* bordure        */

    --shadow-1: 0 1px 2px oklch(0.24 0.018 250 / 0.06);
    --shadow-2: 0 2px 8px oklch(0.24 0.018 250 / 0.08);
    --shadow-3: 0 12px 32px oklch(0.24 0.018 250 / 0.12);

    --focus: oklch(0.55 0.18 250);
    color-scheme: light;
}

/* ==========================================================================
   Surface SOMBRE — référentiels, recherche, crosswalk, comparateur
   ========================================================================== */
[data-surface="console"] {
    --ground:      oklch(0.168 0.014 252);
    --surface:     oklch(0.213 0.016 252);
    --surface-2:   oklch(0.252 0.018 252);
    --surface-3:   oklch(0.295 0.019 252);
    --surface-inv: oklch(0.96 0.005 252);

    --line:        oklch(0.318 0.020 252);
    --line-strong: oklch(0.425 0.023 252);

    --ink:         oklch(0.960 0.006 252);
    --ink-2:       oklch(0.780 0.013 252);
    --ink-3:       oklch(0.705 0.014 252);   /* tenu à 4,5:1 sur --ground et --surface-2 */
    --ink-inv:     oklch(0.20 0.016 252);

    --accent:      oklch(0.760 0.135 232);
    --accent-hover:oklch(0.840 0.120 232);
    --accent-ink:  oklch(0.18 0.030 232);
    --accent-soft: oklch(0.300 0.050 232);
    --accent-line: oklch(0.420 0.080 232);

    --ok:      oklch(0.780 0.145 152);
    --warn:    oklch(0.820 0.140 82);
    --risk:    oklch(0.720 0.155 25);
    --neutral: oklch(0.680 0.020 252);
    --ok-soft:      oklch(0.300 0.055 152);
    --warn-soft:    oklch(0.310 0.055 82);
    --risk-soft:    oklch(0.305 0.060 25);
    --neutral-soft: oklch(0.285 0.010 252);

    --chip-l: 0.84;   --chip-c: 0.105;
    --chip-bg-l: 0.29; --chip-bg-c: 0.045;
    --chip-bd-l: 0.40; --chip-bd-c: 0.065;

    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.40);
    --shadow-2: 0 3px 12px oklch(0 0 0 / 0.45);
    --shadow-3: 0 16px 40px oklch(0 0 0 / 0.55);

    --focus: oklch(0.82 0.14 232);
    color-scheme: dark;
}