/* ==========================================================================
   TesselBee — tokens de la charte (généré depuis charte/tokens.json, ne pas éditer à la main)
   Écran : thème sombre, partout, sans bascule. Le jeu clair ne sert qu’à l’impression (@media print).
   Les composants lisent des RÔLES (--surface, --ink, --accent…), jamais une valeur.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Rôles (thème sombre) */
    --surface: #070333;
    --surface-raised: #12123e;
    --scrim: #070333b8;
    --line: #1f234a;
    --line-strong: #686d87;
    --ink: #f5f6fc;
    --ink-muted: #b6b9cc;
    --ink-faint: #8c91a7;
    --accent: #3cb8fc;
    --accent-fill: var(--accent);
    --on-accent: #070333;
    --accent-soft: #0e1c4f;
    --highlight: #bc93ff;
    --success: #2dd4bf;
    --warning: #f7c24a;
    --danger: #ff7a85;

    /* Couleurs de marque et échelle Nuit (identiques partout) */
    --brand-cyan: #3cb8fc;
    --brand-blue: #3185fc;
    --brand-indigo: #4a33f6;
    --brand-violet: #8738fa;
    --brand-night: #070333;
    --nuit-50: #f5f6fc;
    --nuit-100: #eaecf5;
    --nuit-200: #d6d8e5;
    --nuit-300: #b6b9cc;
    --nuit-400: #8c91a7;
    --nuit-500: #686d87;
    --nuit-600: #4b506e;
    --nuit-700: #33375a;
    --nuit-800: #1f234a;
    --nuit-900: #12123e;
    --nuit-950: #070333;

    /* Typographie : une seule famille, Recursive, sous deux réglages (voir fonts/fonts.css) */
    --font-sans: 'Recursive Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Recursive Mono', ui-monospace, monospace;
    --type-display: 800 64px/68px var(--font-sans);
    --type-display-tracking: -0.02em;
    --type-h1: 750 44px/50px var(--font-sans);
    --type-h1-tracking: -0.015em;
    --type-h2: 700 30px/36px var(--font-sans);
    --type-h2-tracking: -0.01em;
    --type-h3: 650 21px/28px var(--font-sans);
    --type-body-lg: 400 19px/30px var(--font-sans);
    --type-body: 400 16px/26px var(--font-sans);
    --type-small: 400 14px/22px var(--font-sans);
    --type-label: 600 12px/16px var(--font-mono);
    --type-label-tracking: 0.08em;
    --type-code: 400 14px/22px var(--font-mono);
    --type-value: 500 13px/20px var(--font-mono);

    /* Espacements (base 4 px) */
    --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;

    /* Arrondis */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Ombres : seulement ce qui flotte dans une interface */
    --shadow-sm: 0 1px 2px #00000066;
    --shadow-lg: 0 12px 32px -4px #000000b3;
    --focus-ring: 0 0 0 2px #070333, 0 0 0 4px #3cb8fc;

    /* Mouvement : posé et précis, jamais de rebond */
    --duration-fast: 150ms;
    --duration-base: 240ms;
    --duration-slow: 400ms;
    --duration-video: 600ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Impression uniquement : un aplat Nuit coûte cher et rend mal sur papier. */
@media print {
    :root {
        color-scheme: light;
        --surface: #f5f6fc;
        --surface-raised: #ffffff;
        --scrim: #070333b8;
        --line: #d6d8e5;
        --line-strong: #7f849b;
        --ink: #070333;
        --ink-muted: #4b506e;
        --ink-faint: #686d87;
        --accent: #4a33f6;
        --accent-fill: var(--accent);
        --on-accent: #ffffff;
        --accent-soft: #e7e6fc;
        --highlight: #8738fa;
        --success: #0f766e;
        --warning: #8a5300;
        --danger: #c0283f;
        --shadow-sm: 0 1px 2px #07033314, 0 1px 3px #0703331f;
        --shadow-lg: 0 4px 8px #07033314, 0 16px 32px -4px #07033329;
        --focus-ring: 0 0 0 2px #f5f6fc, 0 0 0 4px #4a33f6;
    }
}

/* Recursive : la mono est un réglage de la même famille, servi sous le nom « Recursive Mono ». */
.tb-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }