/* =========================================================================
   Design tokens — Trivia Hero
   Extraits de la maquette « TriviaHero Accueil » (palette or/laiton sur nuit).
   ========================================================================= */
:root {
    /* --- Fonds & surfaces --- */
    --bg:            #0a0e18; /* fond global (canvas) */
    --surface-1:     #050B1F; /* section principale */
    --surface-2:     #04081A; /* section alternée / footer */
    --surface-3:     #0A1A3F; /* cartes */
    --surface-4:     #081533; /* dégradé bas de carte */
    --surface-dark:  #0E1526; /* texte sur or, puces sombres */
    --bezel-a:       #1a2030; /* biseau device (haut) */
    --bezel-b:       #0c1020; /* biseau device (bas) / notch */

    /* --- Accents --- */
    --gold:   #F5C518; /* or — accent primaire, CTA */
    --brass:  #CDB878; /* laiton — accents secondaires, liens */

    /* --- Texte --- */
    --ink:        #F7F5EF;              /* texte principal */
    --ink-70:     rgba(247, 245, 239, .70);
    --ink-62:     rgba(247, 245, 239, .62);
    --ink-55:     rgba(247, 245, 239, .55);
    --ink-45:     rgba(247, 245, 239, .45);
    --ink-32:     rgba(247, 245, 239, .32);

    /* --- Bordures (laiton translucide) --- */
    --line:      rgba(205, 184, 120, .28);
    --line-soft: rgba(205, 184, 120, .18);
    --line-strong: rgba(205, 184, 120, .40);

    /* --- Rayons --- */
    --r-sm:  12px;
    --r-md:  14px;
    --r-lg:  18px;
    --r-xl:  20px;
    --r-pill: 999px;

    /* --- Ombres --- */
    --shadow-device: 0 40px 90px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(205, 184, 120, .14);
    --shadow-soft:   0 30px 60px -30px rgba(0, 0, 0, .7);

    /* --- Dégradés hero (radiaux dorés de la maquette) --- */
    --hero-glow-top: radial-gradient(120% 60% at 50% -6%, rgba(245, 197, 24, .16), transparent 60%);
    --hero-glow-bottom: radial-gradient(90% 50% at 50% 100%, rgba(10, 26, 63, .9), var(--surface-1) 70%);
    --hero-rings: repeating-radial-gradient(circle at 50% 30%, transparent 0 44px, rgba(245, 197, 24, .06) 44px 45px);
    --hero-desktop: radial-gradient(70% 90% at 18% 30%, rgba(245, 197, 24, .14), transparent 55%),
                    radial-gradient(60% 80% at 82% 60%, rgba(10, 26, 63, .7), transparent 60%);
    --final-glow: radial-gradient(120% 80% at 50% 0%, rgba(245, 197, 24, .12), transparent 60%);
    --card-grad:  linear-gradient(150deg, var(--surface-3), var(--surface-4));

    /* --- Typographie --- */
    --font-title: 'Cinzel', Georgia, serif;          /* titres (latin) */
    --font-title-ar: 'Aref Ruqaa', 'Cinzel', serif;  /* titres (arabe) */
    --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- Rythme / conteneur --- */
    --container: 1140px;
    --gutter: 24px;

    /* Hauteur de la top nav desktop (padding-block 22px×2 + logo 38px = 82px).
       Sert d'offset au hero plein écran desktop : nav + hero = exactement 100svh. */
    --nav-h: 82px;
}