/* ============================================================================
   Design system Skillopolis — publie depuis src/styles/tokens.css.
   Version 4. Ne pas editer ce fichier directement : republier via
   scripts/publish-design-system.mjs dans le depot skillopolis.
   ============================================================================ */
/* ============================================================================
   Skillopolis — jetons de design unifies.

   Un seul systeme, deux modes de surface :
     · mode clair  (`:root`)      — direction « Atlas » d'ecole-api, pour les
                                    ecrans denses en donnees (tables, formulaires).
     · mode verre  (`.on-glass`)  — la coquille sombre du HUD d'ItCity, posee
                                    par-dessus la ville 3D.

   Les composants ne consomment JAMAIS une couleur brute : ils lisent des jetons
   de role (`--ui-*`). C'est ce qui permet au meme balisage de fonctionner dans
   les deux modes sans une seule regle dupliquee.

   L'or d'ItCity (#f5b731) n'est plus un accent d'interface : il est reserve au
   monde 3D (anneau de survol, selection). L'accent d'interface est unique et
   bleu, comme le veut Atlas.
   ========================================================================= */

:root {
    /* --- Palette brute Atlas ------------------------------------------- */
    --slate-900: #1B1F27;
    --slate-600: #68707E;
    --slate-400: #9BA1AC;
    --slate-200: #D3D6DD;
    --slate-100: #E4E6EB;
    --slate-050: #F7F8FA;
    --slate-025: #FBFBFC;
    --white: #FFFFFF;

    --blue-600: #3454C4;
    --blue-500: #3E63DD;
    --blue-050: #EBEFFC;

    --green-600: #1F9D55;
    --green-050: #E7F7ED;
    --amber-600: #C97A0C;
    --amber-050: #FCF1DF;
    --red-600: #C4392F;
    --red-050: #FBEAE8;
    --violet-600: #7B4FE0;
    --violet-050: #F0EBFC;

    /* Or : monde 3D uniquement — survol, selection, mise en avant in-game. */
    --gold-500: #F5B731;
    --gold-ink: #241A00;

    /* --- Jetons de role — mode clair ----------------------------------- */
    --ui-page: var(--slate-050);
    --ui-bg: var(--white);
    --ui-bg-subtle: var(--slate-025);
    --ui-bg-sunken: var(--slate-050);

    --ui-fg: var(--slate-900);
    --ui-fg-muted: var(--slate-600);
    --ui-fg-faint: var(--slate-400);

    --ui-border: var(--slate-100);
    --ui-border-strong: var(--slate-200);

    --ui-accent: var(--blue-500);
    --ui-accent-hover: var(--blue-600);
    --ui-accent-fg: var(--white);
    --ui-accent-soft: var(--blue-050);

    --ui-hover: var(--slate-050);
    --ui-shadow: none;
    --ui-backdrop: none;

    /* Statuts : couleur de texte + fond associe. */
    --status-success: var(--green-600);
    --status-success-bg: var(--green-050);
    --status-warning: var(--amber-600);
    --status-warning-bg: var(--amber-050);
    --status-danger: var(--red-600);
    --status-danger-bg: var(--red-050);
    --status-help: var(--violet-600);
    --status-help-bg: var(--violet-050);
    --status-neutral: var(--slate-600);
    --status-neutral-bg: rgba(27, 31, 39, 0.06);

    /* --- Formes -------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-full: 999px;

    /* --- Typographie --------------------------------------------------- */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

    --text-page-title: 22px;
    --text-title: 15px;
    --text-body: 13px;
    --text-meta: 12px;
    --text-label: 11px;
    --text-eyebrow: 10.5px;

    /* --- Rythme -------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --transition: 150ms ease;
    --z-panel: 40;
    --z-modal: 100;
    --z-loader: 200;
}

/* ============================================================================
   Theme sombre.

   Trois etats, pas deux : un choix explicite pose `data-theme` sur la racine,
   mais le reglage « systeme » — le defaut — n'en pose AUCUN. Il faut donc
   couvrir les deux chemins, et garder l'un et l'autre gagnants dans leur sens :

     · `@media (prefers-color-scheme: dark)` avec `:not([data-theme="light"])`
       pour que le choix explicite « clair » l'emporte sur un systeme sombre ;
     · `:root[data-theme="dark"]` pour que le choix explicite « sombre »
       l'emporte sur un systeme clair.

   Seuls les JETONS sont redefinis. Aucun composant n'est redeclare ici : une
   couleur dont la seule definition vit dans un bloc de theme ne s'applique
   jamais dans l'etat « systeme », et la page rend alors le texte d'un theme sur
   le fond de l'autre.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ui-page: #0F1319;
        --ui-bg: #161B22;
        --ui-bg-subtle: #1B212A;
        --ui-bg-sunken: #0B0E13;

        --ui-fg: #E6EAF0;
        --ui-fg-muted: #9BA6B4;
        --ui-fg-faint: #6B7583;

        --ui-border: #262D38;
        --ui-border-strong: #38424F;

        /* Le bleu Atlas manque de contraste sur fond sombre : il est eclairci,
           comme il l'est deja en mode verre. */
        --ui-accent: #6E8CF5;
        --ui-accent-hover: #8AA2F8;
        --ui-accent-fg: #0E1330;
        --ui-accent-soft: rgba(110, 140, 245, 0.18);

        --ui-hover: rgba(255, 255, 255, 0.06);
        --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

        --status-success: #38C793;
        --status-success-bg: rgba(56, 199, 147, 0.16);
        --status-warning: #FFB454;
        --status-warning-bg: rgba(255, 180, 84, 0.16);
        --status-danger: #FF7A7A;
        --status-danger-bg: rgba(255, 122, 122, 0.16);
        --status-help: #B79BFF;
        --status-help-bg: rgba(183, 155, 255, 0.16);
        --status-neutral: #9BA6B4;
        --status-neutral-bg: rgba(255, 255, 255, 0.08);
    }
}

:root[data-theme="dark"] {
    --ui-page: #0F1319;
    --ui-bg: #161B22;
    --ui-bg-subtle: #1B212A;
    --ui-bg-sunken: #0B0E13;

    --ui-fg: #E6EAF0;
    --ui-fg-muted: #9BA6B4;
    --ui-fg-faint: #6B7583;

    --ui-border: #262D38;
    --ui-border-strong: #38424F;

    --ui-accent: #6E8CF5;
    --ui-accent-hover: #8AA2F8;
    --ui-accent-fg: #0E1330;
    --ui-accent-soft: rgba(110, 140, 245, 0.18);

    --ui-hover: rgba(255, 255, 255, 0.06);
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --status-success: #38C793;
    --status-success-bg: rgba(56, 199, 147, 0.16);
    --status-warning: #FFB454;
    --status-warning-bg: rgba(255, 180, 84, 0.16);
    --status-danger: #FF7A7A;
    --status-danger-bg: rgba(255, 122, 122, 0.16);
    --status-help: #B79BFF;
    --status-help-bg: rgba(183, 155, 255, 0.16);
    --status-neutral: #9BA6B4;
    --status-neutral-bg: rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   Mode verre — a poser sur tout conteneur flottant au-dessus de la 3D.
   Seuls les jetons de role changent : aucun composant n'est redefini.
   ========================================================================= */
.on-glass {
    --ui-page: transparent;
    --ui-bg: rgba(24, 20, 30, 0.78);
    --ui-bg-subtle: rgba(255, 255, 255, 0.05);
    --ui-bg-sunken: rgba(0, 0, 0, 0.22);

    --ui-fg: #F3EFF7;
    --ui-fg-muted: rgba(255, 255, 255, 0.62);
    --ui-fg-faint: rgba(255, 255, 255, 0.42);

    --ui-border: rgba(255, 255, 255, 0.14);
    --ui-border-strong: rgba(255, 255, 255, 0.24);

    /* L'accent est eclairci : le bleu Atlas manque de contraste sur fond sombre. */
    --ui-accent: #6E8CF5;
    --ui-accent-hover: #8AA2F8;
    --ui-accent-fg: #0E1330;
    --ui-accent-soft: rgba(110, 140, 245, 0.18);

    --ui-hover: rgba(255, 255, 255, 0.1);
    --ui-shadow: 0 24px 70px rgba(20, 6, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --ui-backdrop: blur(20px) saturate(1.3);

    /* Les fonds de statut clairs deviennent illisibles sur du verre sombre :
       on garde la teinte de texte et on remplace le fond par un voile. */
    --status-success: #38C793;
    --status-success-bg: rgba(56, 199, 147, 0.16);
    --status-warning: #FFB454;
    --status-warning-bg: rgba(255, 180, 84, 0.16);
    --status-danger: #FF7A7A;
    --status-danger-bg: rgba(255, 122, 122, 0.16);
    --status-help: #B79BFF;
    --status-help-bg: rgba(183, 155, 255, 0.16);
    --status-neutral: rgba(255, 255, 255, 0.7);
    --status-neutral-bg: rgba(255, 255, 255, 0.1);

    color: var(--ui-fg);
}