/* AP Neural Web — Design Tokens V1 */

:root {
    /* Brand */
    --ap-black: #08090b;
    --ap-black-soft: #101114;
    --ap-graphite: #18191d;
    --ap-surface: #24262c;
    --ap-line: #34363d;

    --ap-gray: #979aa2;
    --ap-gray-light: #c3c5ca;
    --ap-white: #f3f3f1;

    --ap-wine: #8b1538;
    --ap-wine-active: #b5204a;
    --ap-wine-deep: #580b23;
    --ap-wine-text: #cf5578;

    /* Semantic */
    --color-bg: var(--ap-black);
    --color-bg-soft: var(--ap-black-soft);
    --color-surface: var(--ap-graphite);
    --color-surface-elevated: var(--ap-surface);
    --color-border: var(--ap-line);

    --color-text: var(--ap-white);
    --color-text-soft: var(--ap-gray-light);
    --color-text-muted: var(--ap-gray);

    --color-accent: var(--ap-wine);
    --color-accent-hover: var(--ap-wine-active);
    --color-accent-deep: var(--ap-wine-deep);

    /* Typography */
    --font-display:
        "Space Grotesk",
        "Arial Narrow",
        "Segoe UI",
        sans-serif;

    --font-body:
        "Manrope",
        "Segoe UI",
        Arial,
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    /* Fluid type */
    --text-xs: clamp(0.72rem, 0.68rem + 0.16vw, 0.82rem);
    --text-sm: clamp(0.84rem, 0.80rem + 0.18vw, 0.95rem);
    --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
    --text-lg: clamp(1.12rem, 1rem + 0.5vw, 1.4rem);

    --text-h3: clamp(1.55rem, 1.2rem + 1.4vw, 2.5rem);
    --text-h2: clamp(2.3rem, 1.6rem + 3vw, 5rem);
    --text-h1: clamp(3.2rem, 2rem + 5vw, 7.5rem);

    /* Layout */
    --container: 90rem;
    --gutter: clamp(1rem, 3vw, 3.5rem);
    --section-space: clamp(5rem, 9vw, 10rem);

    /* Shape */
    --radius-xs: 4px;
    --radius-sm: 7px;
    --radius-md: 14px;

    /* Motion */
    --ease-ap: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 180ms;
    --duration-normal: 360ms;
    --duration-slow: 700ms;

    /* Layer */
    --z-header: 100;
    --z-overlay: 500;
}