/* ==========================================================================
   KataBump Docs — Design Tokens
   Fond "Deep Space" (coque navy-noir) de katabump.com/en/, avec un accent
   primaire personnalisé (plum #412c55) à la place de l'or d'origine du
   site principal, et le corail comme accent secondaire (usage parcimonieux).

   --primary est la couleur "d'identité" exacte demandée (#412c55) — utilisée
   telle quelle comme point sombre des dégradés/du texte en dégradé.
   --primary-light (#9a79b9, même teinte éclaircie) est LA couleur utilisée
   partout ailleurs comme accent lisible (liens, états actifs, icônes,
   bordures) : #412c55 seul donne un contraste ~1.6:1 sur le fond quasi-noir
   (#05060f), loin des 4.5:1 requis pour du texte — voir IA/design-system.md.
   ========================================================================== */

:root {
    --white: #FFFFFF;

    /* Backgrounds — near-black navy, plusieurs paliers d'élévation */
    --bg-primary: #05060f;
    --bg-secondary: #0a0c1c;
    --bg-tertiary: #12142b;
    --bg-card: #0e1024;
    --bg-hover: #1a1c38;

    /* Text */
    --text-primary: #f4f3f7;
    --text-secondary: #9c9cb5;
    --text-muted: #64647f;
    --text-accent: #85859e;

    /* Brand accents */
    --primary: #412c55;
    --primary-dark: #24182f;
    --primary-light: #9a79b9;
    --secondary: #e65559;
    --secondary-dark: #bc3d39;
    --accent: #412c55;

    /* État */
    --danger: #e0574f;
    --success: #34d399;
    --warning: #eab155;
    --info: #7c88c4;
    --error: #e0574f;

    /* Borders */
    --border: #201f38;
    --border-light: #34334f;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow: 0 2px 8px 0 rgb(0 0 0 / 0.35);
    --shadow-md: 0 6px 16px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.5);
    --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.55);
    --shadow-glow: 0 0 24px rgb(154 121 185 / 0.35);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --gradient-accent: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(5, 6, 15, 0) 0%, rgba(5, 6, 15, 0.9) 100%);

    /* Starfield partagé — six points épars tuilés sur une grille de 280px.
       Réutilisé en couche background-image sur chaque section pleine
       largeur pour que le ciel se lise comme un canevas continu. */
    --stars-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, 0.55) 0, transparent 60%),
        radial-gradient(1px 1px at 90px 120px, rgba(255, 255, 255, 0.4) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 160px 60px, rgba(255, 255, 255, 0.5) 0, transparent 60%),
        radial-gradient(1px 1px at 210px 170px, rgba(255, 255, 255, 0.35) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 260px 20px, rgba(255, 255, 255, 0.45) 0, transparent 60%),
        radial-gradient(1px 1px at 40px 190px, rgba(255, 255, 255, 0.3) 0, transparent 60%);
    --stars-size: 280px 280px, 280px 280px, 280px 280px, 280px 280px, 280px 280px, 280px 280px;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Layout doc */
    --nav-height: 64px;
    --sidebar-width: 272px;
    --outline-width: 240px;
    --content-max-width: 760px;
}