/* Anime 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: aqua primary, bubblegum
   pink secondary, spring green tertiary, sunny yellow quaternary, plus
   tangerine 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: #1E0B33;

    /* 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: #3DE0E8;      /* results, active state, focus, primary action */
    --accent-secondary: #FF5FA8;    /* filters region, links, informational chrome */
    --accent-tertiary: #5DE88C;     /* statistics region, age guidance, success */
    --accent-quaternary: #FFD84D;   /* discovery region, playful detail */
    --accent-curator: #FF9A3C;      /* ratings region only */

    --accent-primary-dim: rgba(61, 224, 232, 0.16);
    --accent-secondary-dim: rgba(255, 95, 168, 0.16);
    --accent-tertiary-dim: rgba(93, 232, 140, 0.16);
    --accent-quaternary-dim: rgba(255, 216, 77, 0.16);
    --accent-curator-dim: rgba(255, 154, 60, 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 aqua
   bloom top-right and a pink 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(61, 224, 232, 0.13), transparent 62%),
        radial-gradient(760px 520px at 8% 4%, rgba(255, 95, 168, 0.10), transparent 60%),
        linear-gradient(178deg, var(--canvas) 0%, var(--canvas) 38%, var(--anchor) 100%);
}