/* ==========================================================================
   KataBump Docs — Design Tokens
   Repris tel quel du thème "Deep Space" de katabump.com/en/ :
   coque navy-noir en fond, or de la fusée en accent primaire,
   corail des ailerons en accent secondaire (usage parcimonieux).
   ========================================================================== */

: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: #f5a94a;
    --primary-dark: #d9832e;
    --primary-light: #ffd27a;
    --secondary: #e65559;
    --secondary-dark: #bc3d39;
    --accent: #f5a94a;

    /* É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(245 169 74 / 0.25);

    /* 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;
}