@layer tokens, reset, base, layout, components, utilities;

@layer tokens {
    :root {
        --color-accent: #0F766E;
        --color-accent-dark: #0B5F59;
        --color-aqua: #5EEAD4;
        --color-aqua-light: #99F6E4;
        --color-ink: #0F172A;
        --color-slate: #1E293B;
        --color-slate-line: #334155;
        --color-muted: #475569;
        --color-muted-on-dark: #CBD5E1;
        --color-footer-text: #E2E8F0;
        --color-neutral: #F1F5F9;
        --color-white: #FFFFFF;
        --color-page: #F5FBFA;
        --color-mint: #E3F4F1;
        --color-line: #D5E5E2;
        --color-error: #B91C1C;
        --color-error-on-dark: #FCA5A5;
        --color-error-border-on-dark: #F87171;

        --font-sans: 'Rubik', system-ui, sans-serif;
        --font-mono: 'JetBrains Mono', monospace;

        --container: 1280px;
        --gutter: clamp(20px, 3vw, 32px);
        --section-y: clamp(56px, 8vw, 96px);
        --hero-top: clamp(36px, 5vw, 64px);
        --space-block: clamp(48px, 6vw, 72px);

        --radius-badge: 8px;
        --radius-control: 10px;
        --radius-button: 12px;
        --radius-frame: 14px;
        --radius-card: 18px;
        --radius-panel: 22px;
        --radius-pill: 999px;

        --fg-muted: var(--color-muted);
        --fg-accent: var(--color-accent);
        --link: var(--color-accent-dark);
        --link-hover: var(--color-ink);
        --hover: var(--color-accent-dark);
        --focus: var(--color-accent);
        --line: var(--color-line);
    }
}