/* ==========================================================================
   V — Design Tokens
   03_DESIGN_SYSTEM: one visual language, two identities (dark / light).
   Every color, radius, easing and duration in the project lives here.
   ========================================================================== */

:root {
    /* ---- Depth (background layers, darkest → lightest) ---- */
    --bg-deep: #08070d;
    --bg-raised: #0d0c14;
    --surface-glass: rgba(20, 18, 30, 0.55);
    --surface-glass-strong: rgba(22, 20, 33, 0.78);
    --surface-hover: rgba(32, 29, 48, 0.65);
    --surface-solid: #12111b;

    /* ---- Lines ---- */
    --border-subtle: rgba(235, 232, 255, 0.07);
    --border-active: rgba(235, 232, 255, 0.18);
    --divider: linear-gradient(90deg, transparent, rgba(235, 232, 255, 0.12), transparent);

    /* ---- Text ---- */
    --text-primary: #f2f0fa;
    --text-secondary: #a3a0b8;
    --text-muted: #666378;
    --text-inverse: #0b0a12;

    /* ---- Accent language: purple = creativity, pink = warmth ---- */
    --accent: #9d7bfa;
    --accent-warm: #f272b6;
    --accent-soft: rgba(157, 123, 250, 0.14);
    --accent-glow: rgba(157, 123, 250, 0.28);
    --warm-glow: rgba(242, 114, 182, 0.20);
    --ok: #3ecf8e;
    --idle: #e6b450;
    --danger: #f26d6d;

    /* ---- Ambient scene (tuned by theme + time of day) ---- */
    --scene-glow-a: rgba(124, 90, 230, 0.17);
    --scene-glow-b: rgba(214, 84, 156, 0.10);
    --scene-intensity: 1;
    --mouse-light: rgba(150, 118, 245, 0.055);
    --particle-color: 200, 185, 255;

    /* ---- Elevation (opacity, never darkness) ---- */
    --shadow-rest: 0 6px 24px -8px rgba(5, 3, 14, 0.45);
    --shadow-lift: 0 24px 60px -18px rgba(5, 3, 14, 0.6), 0 0 0 1px rgba(235, 232, 255, 0.04);
    --shadow-glow: 0 8px 40px -6px var(--accent-glow);

    /* ---- Glass ---- */
    --glass-blur: 18px;

    /* ---- Radii (one scale, never mixed randomly) ---- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* ---- Type ---- */
    --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;

    --size-hero: clamp(2.5rem, 5.5vw, 4.15rem);
    --size-h2: clamp(1.9rem, 3.6vw, 2.75rem);
    --size-h3: clamp(1.25rem, 2vw, 1.5rem);
    --size-body: 1rem;
    --size-small: 0.875rem;
    --size-micro: 0.72rem;

    /* ---- Space ---- */
    --space-section: clamp(6rem, 12vh, 9.5rem);
    --content-max: 1180px;
    --content-pad: clamp(1.25rem, 4vw, 2.5rem);

    /* ---- Motion: physical for UI, cinematic for journeys ---- */
    --ease-physical: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-instant: 140ms;
    --dur-quick: 260ms;
    --dur-smooth: 520ms;
    --dur-cinematic: 900ms;

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Light identity — not an inversion, a second atmosphere.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    --bg-deep: #f3f1f8;
    --bg-raised: #eceaf4;
    --surface-glass: rgba(255, 255, 255, 0.62);
    --surface-glass-strong: rgba(255, 255, 255, 0.85);
    --surface-hover: rgba(255, 255, 255, 0.92);
    --surface-solid: #ffffff;

    --border-subtle: rgba(24, 18, 48, 0.08);
    --border-active: rgba(24, 18, 48, 0.2);
    --divider: linear-gradient(90deg, transparent, rgba(24, 18, 48, 0.14), transparent);

    --text-primary: #171425;
    --text-secondary: #55516b;
    --text-muted: #928fa5;
    --text-inverse: #f7f5ff;

    --accent: #7c53f0;
    --accent-warm: #e0519e;
    --accent-soft: rgba(124, 83, 240, 0.10);
    --accent-glow: rgba(124, 83, 240, 0.22);
    --warm-glow: rgba(224, 81, 158, 0.16);

    --scene-glow-a: rgba(136, 100, 240, 0.16);
    --scene-glow-b: rgba(230, 110, 175, 0.12);
    --mouse-light: rgba(124, 83, 240, 0.05);
    --particle-color: 110, 82, 200;

    --shadow-rest: 0 6px 24px -10px rgba(60, 45, 120, 0.18);
    --shadow-lift: 0 24px 55px -20px rgba(60, 45, 120, 0.28), 0 0 0 1px rgba(24, 18, 48, 0.04);
    --shadow-glow: 0 8px 36px -6px var(--accent-glow);

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.65;
    min-height: 100svh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--dur-smooth) var(--ease-physical);
}

::selection {
    background: var(--accent);
    color: var(--text-inverse);
}

img,
video,
canvas {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
}

/* Focus is part of the motion language — it animates in, never color-only. */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
    transition: outline-offset var(--dur-instant) var(--ease-physical);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.content-width {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
}

.glass-surface {
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition:
        background-color var(--dur-quick) var(--ease-physical),
        border-color var(--dur-quick) var(--ease-physical),
        box-shadow var(--dur-quick) var(--ease-physical),
        transform var(--dur-quick) var(--ease-physical);
}

.mono-label {
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10001;
    padding: 0.6rem 1rem;
    background: var(--surface-solid);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-sm);
    font-size: var(--size-small);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-quick) var(--ease-physical);
}

.skip-link:focus-visible {
    transform: translateY(0);
}