/* ==========================================================================
   NexusForge Studio — design tokens
   One source of truth for colour, type, space, radius and motion.
   The palette carries over the studio's existing identity (steel accent, dark
   technical surfaces) and adds semantic status colours so a claim's strength is
   always visible. Colour is never the only signal: every status also has a label.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Surfaces */
    --bg: #0a0b0d;
    --bg-alt: #0c0e11;
    --surface: #121417;
    --surface-2: #181b1f;
    --surface-3: #1f242a;
    --border: #22262c;
    --border-strong: #39414c;

    /* Text */
    --white: #ffffff;
    --text: #eceff2;
    --text-2: #b3bcc6;
    --text-dim: #767f8a;
    --text-faint: #5b636d;

    /* Accent (steel, restrained) */
    --accent: #9eaab7;
    --accent-strong: #dce4ee;
    --accent-contrast: #0a0b0d;
    --accent-tint: rgba(158, 170, 183, 0.12);
    --accent-line: rgba(158, 170, 183, 0.28);

    /* Semantic status: 14 allowed values, five meanings */
    --status-available: #3fb950;
    --status-verified: #3fb950;
    --status-roadmap: #d29922;
    --status-adapter: #58a6ff;
    --status-notverified: #8b949e;
    --status-unsupported: #f85149;
    --status-available-tint: rgba(63, 185, 80, 0.12);
    --status-roadmap-tint: rgba(210, 153, 34, 0.12);
    --status-adapter-tint: rgba(88, 166, 255, 0.12);
    --status-notverified-tint: rgba(139, 148, 158, 0.12);
    --status-unsupported-tint: rgba(248, 81, 73, 0.12);

    /* Project status: how far along a game is, which is not a claim about quality */
    --status-announced: #a371f7;
    --status-announced-tint: rgba(163, 113, 247, 0.12);

    /* Atmosphere: the light that a game studio page is lit by */
    --glow-1: rgba(158, 170, 183, 0.1);
    --glow-2: rgba(120, 150, 190, 0.09);
    --glow-3: rgba(163, 113, 247, 0.06);
    --vignette: rgba(0, 0, 0, 0.55);
    --grain-opacity: 0.05;

    /* Callouts */
    --note: #58a6ff;
    --tip: #3fb950;
    --warning: #d29922;
    --danger: #f85149;

    /* Type */
    --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.45rem);
    --step-3: clamp(1.5rem, 1.3rem + 0.9vw, 1.95rem);
    --step-4: clamp(1.85rem, 1.5rem + 1.6vw, 2.6rem);
    --step-5: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
    --step-6: clamp(2.1rem, 1.55rem + 3.4vw, 4.1rem);

    --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. */
[data-theme='light'] {
    color-scheme: light;

    --bg: #f7f8fa;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2f4f7;
    --surface-3: #e8ecf1;
    --border: #d8dee6;
    --border-strong: #b4bdc9;

    --text: #14181d;
    --text-2: #3c454f;
    --text-dim: #5d6772;
    --text-faint: #79828d;

    --accent: #45586e;
    --accent-strong: #1d2a38;
    --accent-contrast: #ffffff;
    --accent-tint: rgba(69, 88, 110, 0.08);
    --accent-line: rgba(69, 88, 110, 0.22);

    --status-available: #1a7f37;
    --status-verified: #1a7f37;
    --status-roadmap: #9a6700;
    --status-adapter: #0a58ca;
    --status-notverified: #5d6772;
    --status-unsupported: #b42318;
    --status-available-tint: rgba(26, 127, 55, 0.1);
    --status-roadmap-tint: rgba(154, 103, 0, 0.1);
    --status-adapter-tint: rgba(10, 88, 202, 0.1);
    --status-notverified-tint: rgba(93, 103, 114, 0.1);
    --status-unsupported-tint: rgba(180, 35, 24, 0.1);

    --status-announced: #6639ba;
    --status-announced-tint: rgba(102, 57, 186, 0.1);

    --glow-1: rgba(69, 88, 110, 0.09);
    --glow-2: rgba(69, 88, 110, 0.07);
    --glow-3: rgba(102, 57, 186, 0.05);
    --vignette: rgba(16, 24, 40, 0.06);
    --grain-opacity: 0.035;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
    --shadow-2: 0 6px 20px rgba(16, 24, 40, 0.1);
    --shadow-3: 0 18px 48px rgba(16, 24, 40, 0.14);
}