/* =====================================================================
   DESIGN TOKENS — change the whole look from this one file.
   Every colour, font, radius, shadow, spacing and background lives here.
   ===================================================================== */
:root {
    /* ---- Brand palette ---------------------------------------------- */
    --brand-orange:      #ff7a45;
    --brand-orange-deep: #ff5e3a;
    --brand-pink:        #ff4d9d;
    --brand-purple:      #8b5cf6;
    --brand-violet:      #6366f1;
    --brand-teal:        #19c2a8;
    --brand-blue:        #38bdf8;
    --brand-yellow:      #ffd23f;
    --brand-green:       #34d399;

    /* ---- Surfaces & background -------------------------------------- */
    --color-bg:          #4187ef;  /* page background — light blue (Trivia Party V2) */
    --color-bg-2:        #14233f;  /* inputs / elevated — dark navy */
    --color-surface:     rgba(8, 16, 34, 0.42);
    --color-surface-2:   rgba(8, 16, 34, 0.58);
    --color-surface-solid:#14233f;
    --color-border:      rgba(255, 255, 255, 0.16);
    --color-border-soft: rgba(255, 255, 255, 0.10);

    /* Coloured glows behind the hero (radial blobs). */
    --glow-1: radial-gradient(60% 60% at 12% 8%,  rgba(139, 92, 246, 0.45), transparent 70%);
    --glow-2: radial-gradient(55% 55% at 88% 4%,  rgba(255, 77, 157, 0.40), transparent 70%);
    --glow-3: radial-gradient(70% 70% at 50% 110%, rgba(25, 194, 168, 0.35), transparent 70%);
    --page-bg: var(--color-bg);

    /* ---- Text ------------------------------------------------------- */
    --color-text:        #f5f6fa;
    --color-text-muted:  #9aa1ad;
    --color-text-dim:    #6b7280;
    --color-text-on-accent: #ffffff;

    /* ---- Gradients -------------------------------------------------- */
    --grad-brand:   linear-gradient(135deg, #1a5be0 0%, #0133ba 100%);
    --grad-sunset:  linear-gradient(135deg, #ffb347 0%, #ff5e3a 55%, #ff2d8f 100%);
    --grad-violet:  linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    --grad-ocean:   linear-gradient(135deg, #4aa3ff 0%, #2f6bdf 55%, #1b46be 100%);
    --grad-teal:    linear-gradient(135deg, #19c2a8 0%, #38bdf8 100%);
    --grad-pink:    linear-gradient(135deg, #ff4d9d 0%, #c026d3 100%);
    --grad-lime:    linear-gradient(135deg, #34d399 0%, #a3e635 100%);
    --grad-text:    linear-gradient(90deg, var(--brand-orange), var(--brand-pink));

    /* ---- Typography -------------------------------------------------
       Display: Bricolage Grotesque (high-character grotesque).
       Body:    Hanken Grotesk (clean, highly legible).            */
    --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --fs-xs:   0.78rem;
    --fs-sm:   0.9rem;
    --fs-base: 1rem;
    --fs-lg:   1.18rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.75rem;
    --fs-hero: clamp(2.6rem, 6vw, 4.75rem);

    /* ---- Spacing scale ---------------------------------------------- */
    --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;

    /* ---- Radii ------------------------------------------------------ */
    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    /* ---- Shadows ---------------------------------------------------- */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md:  0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-glow:0 10px 40px rgba(255, 94, 58, 0.35);

    /* ---- Layout ----------------------------------------------------- */
    --container:      1180px;
    --container-narrow: 760px;
    --header-height:  76px;

    /* ---- Motion ----------------------------------------------------- */
    --transition: 160ms ease;
    --transition-slow: 320ms ease;

    /* Glossy candy-button sheen: a clean, symmetric top shine (no bubble dots) */
    --btn-sheen:
        linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 62%);

    /* ---- Answer-option colours (A/B/C/D) ---------------------------- */
    /* Answer palette — violet / sky-blue / orange / teal. All white text.
       Red + green are reserved for the reveal (wrong / correct), so no option
       uses them as a base colour. */
    --opt-a: #7c5cff;  /* violet    */
    --opt-b: #3d8bef;  /* sky blue  */
    --opt-c: #f5862e;  /* orange    */
    --opt-d: #14b8a6;  /* teal      */
    --opt-a-text: #fff; /* all options use white text now */

    /* Brand theme */
    --tp-blue:       #1460ce; /* header */
    --tp-blue-light: #4187ef; /* page / game background */
    --pal-green:  #008e2a;
    --pal-blue:   #0133ba;
    --pal-red:    #f4081e;
    --pal-yellow: #fad920;
}