/* Movie Compass — design tokens. Single source of truth for colour, type,
   space, motion. Canvas black and the text tokens are fixed identity. The
   anchor and accents are this project's chosen set: gold primary, sky
   secondary, lime tertiary, violet quaternary, plus crimson reserved for the
   curator-ratings region. */
:root {
    /* Native chrome the page cannot paint itself: the <select> popup list, the
       scrollbars, the focus ring defaults. Without this the OS renders a white
       dropdown over a black interface. */
    color-scheme: dark;

    /* Ground */
    --canvas: #0A0A0C;
    --anchor: #2A0E18;

    /* Glass */
    --panel-fill: rgba(255, 255, 255, 0.055);
    --panel-fill-raised: rgba(255, 255, 255, 0.085);
    --panel-fill-sunken: rgba(0, 0, 0, 0.32);
    --panel-border: rgba(255, 255, 255, 0.14);
    --panel-border-bright: rgba(255, 255, 255, 0.26);
    --panel-blur: 14px;
    --panel-lift: 0 8px 24px rgba(0, 0, 0, 0.55);
    --panel-lift-high: 0 18px 48px rgba(0, 0, 0, 0.7);

    /* Accents */
    --accent-primary: #FFC93C;      /* results, active state, focus, primary action */
    --accent-secondary: #4FA9FF;    /* filters region, links, informational chrome */
    --accent-tertiary: #B6E82F;     /* statistics region, success, positive */
    --accent-quaternary: #C77DFF;   /* discovery region, playful detail */
    --accent-curator: #FF4D6D;      /* ratings region only */

    --accent-primary-dim: rgba(255, 201, 60, 0.16);
    --accent-secondary-dim: rgba(79, 169, 255, 0.16);
    --accent-tertiary-dim: rgba(182, 232, 47, 0.16);
    --accent-quaternary-dim: rgba(199, 125, 255, 0.16);
    --accent-curator-dim: rgba(255, 77, 109, 0.16);

    /* Text */
    --text-primary: #EFEDE9;
    --text-secondary: #C6C1BA;
    --text-on-accent: #0A0A0C;

    /* Type */
    --font-ui: Tahoma, Verdana, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Form */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --border: 1px;

    /* Space */
    --space-unit: 8px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;

    /* Motion */
    --motion-hover: 180ms;
    --motion-base: 280ms;
    --motion-celebrate: 640ms;
    --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-entrance: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Page backdrop: one gradient per surface, canvas -> anchor, plus a wide gold
   bloom top-right and a violet wash top-left. Fixed so it does not scroll with
   content. Attach via <div class="page-glow"> as the first child of <body> on
   every page. */
.page-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 78% -8%, rgba(255, 201, 60, 0.13), transparent 62%),
        radial-gradient(760px 520px at 8% 4%, rgba(199, 125, 255, 0.10), transparent 60%),
        linear-gradient(178deg, var(--canvas) 0%, var(--canvas) 38%, var(--anchor) 100%);
}
