/* Hallmark · macrostructure: Index-First / Long Document / Catalogue · genre: modern-minimal · tone: technical · theme: custom graphite + #4E2ACA · 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 0);
    --color-paper-2: oklch(95.5% 0 0);
    --color-paper-3: oklch(92.5% 0 0);
    --color-ink: oklch(20% 0 0);
    --color-ink-2: oklch(34% 0 0);
    --color-rule: oklch(84% 0 0);
    --color-rule-2: oklch(55% 0 0);
    --color-muted: oklch(40% 0 0);
    --color-neutral: oklch(35% 0 0);
    --color-accent: oklch(44.8% 0.2255 282.72);
    --color-accent-hover: oklch(38% 0.2 282.72);
    --color-accent-ink: oklch(98% 0 0);
    --color-link: oklch(52% 0.19 282.72);
    --color-link-hover: oklch(44.8% 0.2255 282.72);
    --color-focus: oklch(58% 0.15 282.72);
    --color-graphite: oklch(16% 0 0);
    --color-graphite-ink: oklch(92% 0 0);
    --color-code-key: oklch(76% 0.1 282.72);
    --color-code-string: oklch(76% 0 0);
    --color-code-number: oklch(88% 0 0);
    --color-code-comment: oklch(66% 0 0);
    --color-overlay: oklch(8% 0 0 / 0.68);
    --color-info: oklch(94% 0 0);
    --color-warning: oklch(91% 0 0);
    --color-danger: oklch(88% 0 0);
    --shadow-whisper: 0 1px 2px oklch(20% 0 0 / 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-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-heading-color: var(--color-ink);
    --bs-emphasis-color: var(--color-ink);
    --bs-primary: var(--color-accent);
    --bs-primary-rgb: 78, 42, 202;
    --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(12% 0 0);
    --color-paper-2: oklch(16% 0 0);
    --color-paper-3: oklch(21% 0 0);
    --color-ink: oklch(95% 0 0);
    --color-ink-2: oklch(79% 0 0);
    --color-rule: oklch(30% 0 0);
    --color-rule-2: oklch(57% 0 0);
    --color-muted: oklch(73% 0 0);
    --color-neutral: oklch(79% 0 0);
    --color-accent: oklch(44.8% 0.2255 282.72);
    --color-accent-hover: oklch(52% 0.19 282.72);
    --color-accent-ink: oklch(98% 0 0);
    --color-link: oklch(62% 0.15 282.72);
    --color-link-hover: oklch(70% 0.12 282.72);
    --color-focus: oklch(58% 0.16 282.72);
    --color-graphite: oklch(9% 0 0);
    --color-graphite-ink: oklch(94% 0 0);
    --color-code-key: oklch(68% 0.12 282.72);
    --color-code-string: oklch(76% 0 0);
    --color-code-number: oklch(88% 0 0);
    --color-code-comment: oklch(66% 0 0);
    --color-overlay: oklch(4% 0 0 / 0.78);
    --color-info: oklch(20% 0 0);
    --color-warning: oklch(24% 0 0);
    --color-danger: oklch(28% 0 0);
    --shadow-whisper: 0 1px 2px oklch(4% 0 0 / 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-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-heading-color: var(--color-ink);
    --bs-emphasis-color: var(--color-ink);
    --bs-primary: var(--color-accent);
    --bs-primary-rgb: 78, 42, 202;
    --bs-primary-text-emphasis: var(--color-accent-hover);
    --bs-primary-bg-subtle: var(--color-paper-3);
    --bs-primary-border-subtle: var(--color-rule-2);
}