/* Design tokens. Single source of truth for colour, type, space, motion.
   Canvas black and the text tokens are fixed identity. Anchor and accents are
   this project's chosen set: emerald primary, tangerine secondary, sky
   tertiary, magenta quaternary, plus gold retained as the curator-ratings
   region colour. Deliberately none of the sibling primaries (amber, aqua,
   cyan), so The Canon reads as its own place at a glance. */
: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: #0A0A0B;
    --anchor: #06202E;

    /* 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. Every one clears 7:1 against --canvas, so each is safe as text
       and as a fill under --text-on-accent. */
    --accent-primary: #24E07A;      /* results, active state, focus, primary action */
    --accent-secondary: #FF8A3D;    /* filter rail, popovers, links */
    --accent-tertiary: #4FC3FF;     /* statistics region */
    --accent-quaternary: #FF5FD2;   /* discovery region, playful detail */
    --accent-curator: #F5C518;      /* stars and tier chrome only */

    --accent-primary-dim: rgba(36, 224, 122, 0.16);
    --accent-secondary-dim: rgba(255, 138, 61, 0.16);
    --accent-tertiary-dim: rgba(79, 195, 255, 0.16);
    --accent-quaternary-dim: rgba(255, 95, 210, 0.16);
    --accent-curator-dim: rgba(245, 197, 24, 0.16);

    /* Medium. The Canon's one new semantic axis: bound once here, used for the
       medium badge on a card and for the medium series in every chart. */
    --medium-film: #FF8A3D;
    --medium-anime: #FF5FD2;
    --medium-book: #4FC3FF;

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

    /* 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
   emerald bloom top-right and a tangerine 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(36, 224, 122, 0.13), transparent 62%),
        radial-gradient(760px 520px at 8% 4%, rgba(255, 138, 61, 0.10), transparent 60%),
        linear-gradient(178deg, var(--canvas) 0%, var(--canvas) 38%, var(--anchor) 100%);
}
