/* ============================================================
   tokens.css  –  Design-system foundation
   All global CSS custom properties (design tokens) and reset.
   ============================================================ */

:root {
    /* ── Colors ───────────────────────────────────────────── */
    --ka-bg: #060606;
    --ka-surface: #0e0e0e;
    --ka-surface-2: #151515;
    --ka-accent: #6366f1;
    --ka-accent-light: #818cf8;
    --ka-accent-glow: rgba(99, 102, 241, 0.20);
    --ka-accent-subtle: rgba(99, 102, 241, 0.07);
    --ka-gradient: linear-gradient(135deg, #6366f1 0%, #a78bfa 50%, #818cf8 100%);
    --ka-text: rgba(255, 255, 255, 0.92);
    --ka-text-muted: rgba(255, 255, 255, 0.55);
    --ka-text-secondary: rgba(255, 255, 255, 0.72);
    --ka-text-faint: rgba(255, 255, 255, 0.3);
    --ka-border: rgba(255, 255, 255, 0.08);
    --ka-border-light: rgba(255, 255, 255, 0.12);
    --ka-gold: #f59e0b;
    --ka-gold-bg: rgba(245, 158, 11, 0.12);

    /* ── Typography ───────────────────────────────────────── */
    --ka-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --ka-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ka-text-xs: 11px;
    --ka-text-sm: 13px;
    --ka-text-base: 15px;
    --ka-text-md: 16px;
    --ka-text-lg: 18px;
    --ka-text-xl: 22px;
    --ka-text-2xl: 28px;
    --ka-text-3xl: 36px;

    /* ── Spacing ──────────────────────────────────────────── */
    --ka-space-1: 4px;
    --ka-space-2: 8px;
    --ka-space-3: 12px;
    --ka-space-4: 16px;
    --ka-space-5: 20px;
    --ka-space-6: 24px;
    --ka-space-8: 32px;
    --ka-space-10: 40px;
    --ka-space-12: 48px;
    --ka-space-16: 64px;

    /* ── Line Heights ─────────────────────────────────────── */
    --ka-leading-tight: 1.2;
    --ka-leading-snug: 1.4;
    --ka-leading-normal: 1.6;
    --ka-leading-relaxed: 1.8;

    /* ── Radii ────────────────────────────────────────────── */
    --ka-radius: 12px;
    --ka-radius-lg: 18px;
    --ka-radius-xl: 24px;
    --ka-radius-pill: 99px;

    /* ── Animation ────────────────────────────────────────── */
    --ka-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ka-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ka-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ka-transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --ka-dur-fast: 0.2s;
    --ka-dur-normal: 0.35s;
    --ka-dur-slow: 0.6s;
    --ka-dur-long: 1.2s;
    --ka-dur-ambient: 3s;
    --ka-dur-orbit: 8s;

    /* ── Glass ────────────────────────────────────────────── */
    --ka-glass-bg: rgba(14, 14, 14, 0.88);
    --ka-glass-blur: 16px;
}

/* ============================================================
   CSS Reset
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--ka-font-body);
    font-size: var(--ka-text-md);
    line-height: var(--ka-leading-normal);
    color: var(--ka-text);
    background: var(--ka-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

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

input,
textarea {
    font-family: inherit;
    font-size: 16px;
}