/* Design tokens shared by every page on hubiq.tech.
   One source of truth for palette, type scale, spacing, radii and motion.
   Colours are OKLCH primitives; every translucent surface, border and glow is
   derived from them with color-mix() / relative colour syntax so an alpha
   variant never has to be hand-written again. */

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

@layer tokens {
    :root {
        color-scheme: dark;

        /* ---------- Palette primitives ---------- */
        --primary: oklch(59% 0.215 289);        /* ≈ #7C5CFF electric violet */
        --primary-deep: oklch(50% 0.215 289);   /* ≈ #5A3FE0 pressed / gradient end */
        --primary-soft: oklch(74% 0.15 293);    /* ≈ #B197FF links, accents on dark */
        --accent: oklch(73% 0.2 345);           /* ≈ #FF6BCB magenta, used sparingly */

        --bg: oklch(14% 0.012 285);             /* ≈ #08080F */
        --surface: oklch(18% 0.014 285);        /* ≈ #11111B */

        --text-primary: oklch(96% 0.005 80);    /* ≈ #F4F2EE warm off-white */
        --text-secondary: oklch(76% 0.02 285);  /* ≈ #B0B0C2, ~9:1 on bg */
        --text-tertiary: oklch(64% 0.03 285);   /* ≈ #8A8AA3, ≥5:1 on bg (AA at 12px) */

        /* ---------- Derived: surfaces, borders, glows ---------- */
        --surface-glass: color-mix(in oklch, var(--surface) 72%, transparent);
        --surface-glass-soft: color-mix(in oklch, var(--surface) 60%, transparent);
        --border: oklch(100% 0 0 / 0.08);
        --border-strong: oklch(100% 0 0 / 0.14);
        --border-hover: oklch(from var(--primary) l c h / 0.45);
        --glow-primary: oklch(from var(--primary) l c h / 0.18);
        --glow-primary-hover: oklch(from var(--primary) l c h / 0.3);
        --tint-primary: oklch(from var(--primary) l c h / 0.12);
        --tint-accent: oklch(from var(--accent) l c h / 0.06);
        --selection: oklch(from var(--primary) l c h / 0.4);

        --gradient-brand: linear-gradient(120deg, var(--primary) 0%, var(--primary-soft) 50%, var(--accent) 100%);

        /* ---------- Typography ---------- */
        --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif;
        --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

        /* Fluid scale: rem + vw so text still grows under browser zoom (WCAG 1.4.4). */
        --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13 → 14 */
        --step-0: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);        /* 16 → 17 */
        --step-1: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem);         /* 19 → 24 */
        --step-2: clamp(1.5rem, 1.15rem + 1.7vw, 1.875rem);       /* 24 → 30 */
        --step-3: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem);        /* 30 → 40 */
        --step-4: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);            /* 40 → 72 */
        --text-xs: 0.75rem;                                       /* 12: kickers, labels, footer meta */

        --text-wordmark: 1.375rem;

        --tracking-label: 0.08em;
        --tracking-tight: -0.03em;         /* display h1 only */
        --tracking-heading: -0.02em;       /* h2 and smaller headings */
        --tracking-snug: -0.01em;
        --leading-body: 1.6;
        --leading-snug: 1.2;
        --leading-tight: 1.1;

        --measure: 58ch;                   /* ≈ 72 characters of Inter at body size */
        --page-max: 1120px;

        /* ---------- Spacing (4pt) ---------- */
        --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-section: clamp(4.5rem, 4rem + 4vw, 7rem);          /* 72 → 112 between sections */
        --gutter: max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right));

        /* ---------- Shape & motion ---------- */
        --radius-sm: 10px;
        --radius-md: 12px;
        --radius-lg: 18px;
        --radius-pill: 999px;

        /* ---------- Chrome ---------- */
        --header-compact: 3rem;            /* sticky header height once the page has scrolled */
        --header-shrink-range: 120px;      /* scroll distance over which the header shrinks */
        --blur-glass: 12px;
        --layer-header: 10;

        --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --duration-fast: 150ms;
        --duration-base: 250ms;
        --duration-slow: 600ms;
        --duration-arm: 1s;                /* delay before smooth scrolling is armed after load */
    }

    @media (prefers-contrast: more) {
        :root {
            --border: oklch(100% 0 0 / 0.3);
            --border-strong: oklch(100% 0 0 / 0.45);
            --text-secondary: oklch(86% 0.01 285);
            --text-tertiary: oklch(74% 0.02 285);
        }
    }

    /* Print: remap the palette once here so page sheets never hand-paint colours.
       Translucent surfaces and glows go transparent; ink is near-black on white. */
    @media print {
        :root {
            --bg: #fff;
            --text-primary: #111;
            --text-secondary: #222;
            --text-tertiary: #444;
            --border: #ddd;
            --border-strong: #999;
            --primary-soft: #111;
            --tint-primary: transparent;
            --tint-accent: transparent;
            --surface-glass: transparent;
            --surface-glass-soft: transparent;
            --glow-primary: transparent;
            --glow-primary-hover: transparent;
            --selection: transparent;
        }
    }
}