/* StealthyLabs playful neo-brutalist design tokens. */

@font-face {
    font-family: 'Oxanium';
    src: url('../assets/fonts/oxanium-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../assets/fonts/manrope-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Warm paper, black ink and sticker accents. */
    --color-void: #f2e2c3;
    --color-canvas: #fff4dd;
    --color-surface: #fffdf7;
    --color-surface-strong: #fff8e9;
    --color-surface-raised: #ffffff;
    --color-text: #26201a;
    --color-text-soft: #5c5347;
    --color-text-muted: #786d60;
    --color-cyan: #ff6f5e;
    --color-cyan-strong: #e84e3e;
    --color-indigo: #a5dcff;
    --color-amber: #ffd84d;
    --color-rose: #ffb9cc;
    --color-danger: #e84e3e;
    --color-success: #47b881;
    --color-border: #26201a;
    --color-border-strong: #120f0c;
    --color-sticker-ink: #26201a;
    --color-sticker-shadow: #120f0c;

    /* Type */
    --font-display: 'Manrope', 'Arial Rounded MT Bold', sans-serif;
    --font-text: 'Manrope', 'Segoe UI', sans-serif;
    --font-code: 'Oxanium', 'Cascadia Code', Consolas, monospace;
    --font-size-body: clamp(0.94rem, 0.3vw + 0.88rem, 1.05rem);
    --font-size-meta: 0.72rem;
    --font-size-h1: clamp(3rem, 9vw, 7rem);
    --font-size-h2: clamp(1.65rem, 3vw, 2.65rem);
    --font-size-h3: clamp(1.08rem, 1.4vw, 1.34rem);
    --font-leading-body: 1.65;
    --font-leading-tight: 0.94;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Shape and physical depth */
    --radius-sm: 0.45rem;
    --radius-md: 0.7rem;
    --radius-lg: 0.9rem;
    --radius-xl: 1.15rem;
    --border-ink: 2px solid var(--color-border);
    --shadow-soft: 4px 4px 0 var(--color-border);
    --shadow-card: 6px 6px 0 var(--color-border);
    --shadow-glow: 3px 3px 0 var(--color-border);

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 520ms;
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --layout-max: 1280px;
    --layout-nav: 68px;

    /* Compatibility aliases used by the existing pages. */
    --bg-primary: var(--color-canvas);
    --surface-low: var(--color-canvas);
    --surface: var(--color-surface);
    --surface-high: var(--color-surface-strong);
    --surface-highest: var(--color-surface-raised);
    --card-bg: var(--color-surface);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-soft);
    --text-muted: var(--color-text-muted);
    --text-subtle: #8f8272;
    --accent: var(--color-cyan);
    --accent-alt: var(--color-indigo);
    --accent-2: var(--color-indigo);
    --accent-green: var(--color-success);
    --accent-red: var(--color-danger);
    --accent-yellow: var(--color-amber);
    --accent-online: var(--color-success);
    --border: var(--color-border);
    --border-hover: var(--color-border-strong);
    --font-headline: var(--font-display);
    --main-font: var(--font-text);
    --font-mono: var(--font-code);
    --font-alt: var(--font-display);
    --h1-size: var(--font-size-h1);
    --h1-weight: 700;
    --h1-ls: -0.055em;
    --h1-leading: var(--font-leading-tight);
    --h2-size: var(--font-size-h2);
    --h2-weight: 700;
    --h2-ls: -0.035em;
    --h3-size: var(--font-size-h3);
    --h3-weight: 700;
    --body-size: var(--font-size-body);
    --body-weight: 450;
    --body-leading: var(--font-leading-body);
    --meta-size: var(--font-size-meta);
    --meta-weight: 700;
    --meta-ls: 0.12em;
    --meta-transform: uppercase;
    --mono-size: 0.78rem;
    --glass-bg: var(--color-surface);
    --glass-bg-strong: var(--color-surface-strong);
    --glass-border: var(--color-border);
    --glass-blur: none;
    --glass-shadow: var(--shadow-soft);
    --hover-tint: rgba(255, 111, 94, 0.16);
    --motion-fast: var(--duration-fast) var(--ease-standard);
    --motion-default: var(--duration-base) var(--ease-standard);
    --motion-spring: 420ms var(--ease-emphasized);
    --max-content: var(--layout-max);
    --navbar-h: var(--layout-nav);
    --glow-accent: none;
    --glow-accent-2: none;
    --shadow-accent-2: var(--shadow-soft);
    --shadow-live: 3px 3px 0 var(--color-border);
    --gradient-hero: var(--color-amber);
    --ambient-glow-color: var(--color-cyan);
    --ambient-glow-opacity: 1;
    --ambient-glow-size: 0;
    --ambient-glow-speed-1: 0s;
    --ambient-glow-speed-2: 0s;
}

[data-theme='dark'] {
    color-scheme: dark;
    --color-void: #161310;
    --color-canvas: #211d19;
    --color-surface: #2c2722;
    --color-surface-strong: #342e28;
    --color-surface-raised: #3d352e;
    --color-text: #fff4dd;
    --color-text-soft: #e7d6bd;
    --color-text-muted: #c2af98;
    --color-border: #fff4dd;
    --color-border-strong: #ffffff;
    --shadow-soft: 4px 4px 0 #0a0807;
    --shadow-card: 6px 6px 0 #0a0807;
    --shadow-glow: 3px 3px 0 #0a0807;
}

[data-theme='light'] {
    color-scheme: light;
}