/* ==========================================================================
   Primeva Entertainment — design tokens
   One source of truth for colour, type, space, radius and motion.

   The palette is taken from the studio's own mark: the ground is the exact
   charcoal of the logo plate (#0D0F10) and the brand colour is the exact ivory
   of the emblem (#F9F5F0). Nothing is pure black or pure white — both read as
   cheap at large areas, and the artwork is not built from them either.

   A single metallic accent (bronze) is allowed, and only for rules, eyebrows and
   live indicators. Every status also carries a word, so colour is never the
   only signal.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Surfaces — warm-neutral charcoal, never #000 */
    --bg: #0d0f10;            /* the exact logo plate */
    --bg-alt: #101214;
    --surface: #15181a;
    --surface-2: #1b1f22;
    --surface-3: #232830;
    --border: #262b2e;
    --border-strong: #3b4247;

    /* Text */
    --white: #fbf8f2;         /* warm white, for emphasis */
    --text: #f4f2ed;
    --text-2: #b6b2a9;
    --text-dim: #85827b;
    --text-faint: #5f5d58;

    /* Brand — the emblem's ivory */
    --ivory: #f9f5f0;         /* the exact emblem colour */
    --ivory-2: #ede5d6;
    --ivory-dim: #c9c1b1;
    --bronze: #c2a472;
    --bronze-line: rgba(194, 164, 114, 0.3);

    /* Accent: the primary interactive colour. Ivory fills, ink labels. */
    --accent: #f0e8d9;
    --accent-strong: #f9f5f0;
    --accent-contrast: #0d0f10;
    --accent-tint: rgba(249, 245, 240, 0.08);
    --accent-line: rgba(249, 245, 240, 0.24);

    /* Semantic status: five meanings, warmed so they sit beside ivory rather
       than beside a code editor's palette */
    --status-available: #4fbf7f;
    --status-verified: #4fbf7f;
    --status-roadmap: #d9a441;
    --status-adapter: #7cb0ff;
    --status-notverified: #8a8880;
    --status-unsupported: #e5675e;
    --status-available-tint: rgba(79, 191, 127, 0.12);
    --status-roadmap-tint: rgba(217, 164, 65, 0.12);
    --status-adapter-tint: rgba(124, 176, 255, 0.12);
    --status-notverified-tint: rgba(138, 136, 128, 0.12);
    --status-unsupported-tint: rgba(229, 103, 94, 0.12);

    /* Project status: how far along a game is, which is not a claim about quality */
    --status-announced: #b08ae8;
    --status-announced-tint: rgba(176, 138, 232, 0.12);

    /* Atmosphere: the light a cinematic page is lit by */
    --glow-1: rgba(249, 245, 240, 0.055);
    --glow-2: rgba(194, 164, 114, 0.05);
    --glow-3: rgba(120, 150, 190, 0.04);
    --vignette: rgba(0, 0, 0, 0.62);
    --grain-opacity: 0.045;

    /* Callouts */
    --note: #7cb0ff;
    --tip: #4fbf7f;
    --warning: #d9a441;
    --danger: #e5675e;

    /* Type — Cinzel is a titling face: capitals only, never body copy. */
    --font-display: 'Cinzel', 'Times New Roman', serif;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --step--1: 0.8125rem;
    --step-0: 0.9375rem;
    --step-1: 1.0625rem;
    --step-2: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --step-3: clamp(1.5rem, 1.3rem + 1vw, 2.05rem);
    --step-4: clamp(1.9rem, 1.5rem + 1.9vw, 2.85rem);
    --step-5: clamp(2.3rem, 1.6rem + 3vw, 3.75rem);
    --step-6: clamp(2.6rem, 1.6rem + 4.4vw, 5.4rem);

    /* Display sizes: the two registers the marketing pages are set in. */
    --display-1: clamp(2.75rem, 1.35rem + 6vw, 5.9rem);
    --display-2: clamp(2rem, 1.3rem + 3.1vw, 3.6rem);
    --display-3: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
    --tracking-tight: -0.01em;
    --tracking-label: 0.22em;
    --tracking-wordmark: 0.42em;

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.65;

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Radius */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.45);

    /* Layout */
    --page-max: 1240px;
    --prose-max: 74ch;
    --header-h: 64px;
    --sidebar-w: 290px;
    --toc-w: 240px;
    --gutter: clamp(1rem, 3vw, 2.5rem);

    /* Motion */
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Focus */
    --focus-ring: 2px solid var(--accent-strong);
    --focus-offset: 2px;

    /* z-index scale */
    --z-header: 40;
    --z-drawer: 50;
    --z-search: 60;
}

/* Light theme. Not the default identity, but a reader who needs it gets a fully
   contrast-checked alternative rather than an inverted site: warm paper rather
   than white, and the ivory/ink pair reversed so the buttons stay legible. */
[data-theme='light'] {
    color-scheme: light;

    --bg: #f4f1ea;
    --bg-alt: #faf8f3;
    --surface: #faf8f3;
    --surface-2: #efeae0;
    --surface-3: #e4ddd0;
    --border: #d8d1c3;
    --border-strong: #b3ab9c;

    --white: #0d0f10;
    --text: #15130f;
    --text-2: #3f3b33;
    --text-dim: #5f5a50;
    --text-faint: #7d776b;

    --ivory: #0d0f10;
    --ivory-2: #2a2620;
    --ivory-dim: #6b655a;
    --bronze: #7d5f2c;
    --bronze-line: rgba(125, 95, 44, 0.34);

    --accent: #1d1a15;
    --accent-strong: #0d0f10;
    --accent-contrast: #f9f5f0;
    --accent-tint: rgba(13, 15, 16, 0.06);
    --accent-line: rgba(13, 15, 16, 0.2);

    --status-available: #1a7f37;
    --status-verified: #1a7f37;
    --status-roadmap: #8a6100;
    --status-adapter: #0a58ca;
    --status-notverified: #5f5a50;
    --status-unsupported: #b42318;
    --status-available-tint: rgba(26, 127, 55, 0.1);
    --status-roadmap-tint: rgba(138, 97, 0, 0.1);
    --status-adapter-tint: rgba(10, 88, 202, 0.1);
    --status-notverified-tint: rgba(95, 90, 80, 0.1);
    --status-unsupported-tint: rgba(180, 35, 24, 0.1);

    --status-announced: #5b3a9e;
    --status-announced-tint: rgba(91, 58, 158, 0.1);

    --glow-1: rgba(13, 15, 16, 0.05);
    --glow-2: rgba(138, 107, 52, 0.05);
    --glow-3: rgba(13, 15, 16, 0.03);
    --vignette: rgba(21, 19, 15, 0.06);
    --grain-opacity: 0.03;

    --shadow-1: 0 1px 2px rgba(21, 19, 15, 0.07);
    --shadow-2: 0 6px 20px rgba(21, 19, 15, 0.09);
    --shadow-3: 0 18px 48px rgba(21, 19, 15, 0.13);
}