/* Hallmark · macrostructure: Index-First / Long Document / Catalogue · genre: modern-minimal · tone: technical · theme: custom violet · nav: N13 · footer: Ft2 · design-system: docs/design.md · designed-as-app
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("fonts/space-grotesk-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/source-sans-3-latin.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
    --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", monospace;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.25rem;
    --text-3xl: 3rem;
    --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);

    --radius-input: 0.375rem;
    --radius-card: 0.625rem;
    --radius-pill: 999px;
    --rule-hair: 1px;
    --rule-fine: 2px;
    --focus-offset: 1px;
    --banner-height: 4rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-long: 420ms;

    --z-base: 1;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 400;
    --z-tooltip: 600;
}

[data-bs-theme="light"] {
    --color-paper: oklch(98% 0.007 285);
    --color-paper-2: oklch(95.5% 0.012 285);
    --color-paper-3: oklch(92.5% 0.018 285);
    --color-ink: oklch(22% 0.025 285);
    --color-ink-2: oklch(35% 0.028 285);
    --color-rule: oklch(86% 0.018 285);
    --color-rule-2: oklch(58% 0.03 285);
    --color-muted: oklch(42% 0.025 285);
    --color-neutral: oklch(38% 0.025 285);
    --color-accent: oklch(40% 0.18 292);
    --color-accent-hover: oklch(32% 0.17 292);
    --color-accent-ink: oklch(97% 0.008 285);
    --color-focus: oklch(62% 0.19 292);
    --color-graphite: oklch(19% 0.025 285);
    --color-graphite-ink: oklch(92% 0.012 285);
    --color-code-key: oklch(78% 0.15 292);
    --color-code-string: oklch(80% 0.1 155);
    --color-code-number: oklch(82% 0.11 75);
    --color-code-comment: oklch(68% 0.025 285);
    --color-overlay: oklch(10% 0.02 285 / 0.68);
    --color-info: oklch(94% 0.035 255);
    --color-warning: oklch(94% 0.05 85);
    --color-danger: oklch(94% 0.045 25);
    --shadow-whisper: 0 1px 2px oklch(20% 0.02 285 / 0.08);

    --bs-body-bg: var(--color-paper);
    --bs-body-color: var(--color-ink-2);
    --bs-secondary-color: var(--color-muted);
    --bs-tertiary-bg: var(--color-paper-3);
    --bs-border-color: var(--color-rule);
    --bs-link-color: var(--color-accent);
    --bs-link-hover-color: var(--color-accent-hover);
    --bs-heading-color: var(--color-ink);
    --bs-emphasis-color: var(--color-ink);
    --bs-primary: var(--color-accent);
    --bs-primary-rgb: 65, 41, 153;
    --bs-primary-text-emphasis: var(--color-accent-hover);
    --bs-primary-bg-subtle: var(--color-paper-3);
    --bs-primary-border-subtle: var(--color-rule-2);
}

[data-bs-theme="dark"] {
    --color-paper: oklch(14% 0.018 285);
    --color-paper-2: oklch(18% 0.022 285);
    --color-paper-3: oklch(22% 0.026 285);
    --color-ink: oklch(94% 0.012 285);
    --color-ink-2: oklch(78% 0.018 285);
    --color-rule: oklch(30% 0.028 285);
    --color-rule-2: oklch(55% 0.035 285);
    --color-muted: oklch(72% 0.022 285);
    --color-neutral: oklch(78% 0.018 285);
    --color-accent: oklch(72% 0.15 292);
    --color-accent-hover: oklch(80% 0.12 292);
    --color-accent-ink: oklch(15% 0.02 285);
    --color-focus: oklch(78% 0.16 292);
    --color-graphite: oklch(11% 0.018 285);
    --color-graphite-ink: oklch(94% 0.012 285);
    --color-code-key: oklch(78% 0.15 292);
    --color-code-string: oklch(80% 0.1 155);
    --color-code-number: oklch(82% 0.11 75);
    --color-code-comment: oklch(68% 0.025 285);
    --color-overlay: oklch(5% 0.015 285 / 0.78);
    --color-info: oklch(23% 0.04 255);
    --color-warning: oklch(25% 0.045 85);
    --color-danger: oklch(24% 0.05 25);
    --shadow-whisper: 0 1px 2px oklch(5% 0.015 285 / 0.3);

    --bs-body-bg: var(--color-paper);
    --bs-body-color: var(--color-ink-2);
    --bs-secondary-color: var(--color-muted);
    --bs-tertiary-bg: var(--color-paper-3);
    --bs-border-color: var(--color-rule);
    --bs-link-color: var(--color-accent);
    --bs-link-hover-color: var(--color-accent-hover);
    --bs-heading-color: var(--color-ink);
    --bs-emphasis-color: var(--color-ink);
    --bs-primary: var(--color-accent);
    --bs-primary-rgb: 174, 145, 255;
    --bs-primary-text-emphasis: var(--color-accent-hover);
    --bs-primary-bg-subtle: var(--color-paper-3);
    --bs-primary-border-subtle: var(--color-rule-2);
}