@font-face {
    font-family: "PolySans Bulky";
    src: url("../fonts/PolySans-Bulky.woff2") format("woff2"),
         url("../fonts/PolySans-Bulky.woff") format("woff"),
         url("../fonts/PolySans-Bulky.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.ttf") format("truetype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Bold.ttf") format("truetype");
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    --cream-lightest: #fff9f1;
    --cream-lighter: #fffdfa;
    --cream-medium: #f9f3eb;
    --cream-dark: #f4ece1;
    --warm-grey: #f2ece3;
    --grey: #e2dbd1;
    --black: #212121;
    --ink: #111111;
    --dark-grey: #585756;
    --med-grey: #6e665b;
    --navy: #0c3166;
    --navy-darker: #0c213f;
    --brand-blue: #007aff;
    --grey-blue: #809ac0;
    --highlighter: #d6fc3c;
    --highlighter-soft: #e8fd7e;

    --danger: #c74848;
    --danger-soft: #fbe9e9;
    --warning: #c9841f;
    --warning-soft: #fbf0dc;
    --success: #2fb560;
    --success-soft: #e1f5e8;
    --success-deep: #1f6a3d;

    --bg-canvas: var(--cream-lightest);
    --bg-surface: var(--cream-medium);
    --bg-sunken: var(--cream-dark);
    --bg-hero: var(--warm-grey);

    --text-primary: var(--black);
    --text-body: var(--dark-grey);
    --text-muted: var(--med-grey);
    --text-inverse: var(--cream-lightest);

    --border-hairline: var(--black);
    --border-subtle: var(--grey);

    --accent-text: var(--navy);

    --font-display: "PolySans Bulky", "Arial Black", system-ui, sans-serif;
    --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

    --fs-display-xxl: clamp(4rem, 8vw + 1rem, 8.5rem);
    --fs-display-xl: clamp(2.75rem, 4.5vw + 1rem, 4.5rem);
    --fs-display-l:  clamp(2.25rem, 3vw + 1rem, 3rem);
    --fs-display-m:  clamp(1.75rem, 2vw + 0.75rem, 2.25rem);
    --fs-h1:         1.875rem;
    --fs-h2:         1.5rem;
    --fs-h3:         1.25rem;
    --fs-h4:         1.125rem;
    --fs-body:       0.9375rem;
    --fs-small:      0.8125rem;
    --fs-caption:    0.6875rem;

    --lh-display: 0.95;
    --lh-heading: 1.15;
    --lh-body:    1.55;
    --lh-compact: 1.35;

    --tracking-display: -0.028em;
    --tracking-heading: -0.012em;
    --tracking-body:    0;
    --tracking-caps:    0.08em;
    --tracking-eyebrow: 0.14em;

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;
    --space-8: 3.75rem;
    --space-9: 5rem;
    --space-10: 7rem;

    --radius-xs: 0.375rem;
    --radius-s:  0.75rem;
    --radius-m:  1rem;
    --radius-l:  1.5rem;
    --radius-pill: 20rem;

    --border-w: 1px;
    --border-w-emphasis: 1.5px;

    --ring-focus: 0 0 0 2px var(--cream-lightest), 0 0 0 4px var(--highlighter);

    --t-fast:   120ms;
    --t-base:   180ms;
    --t-slow:   280ms;
    --t-enter:  240ms;
    --e-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --e-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

    --container-narrow: 30rem;
    --container-reading: 44rem;
    --container-wide: 76rem;
    --container-full: 92rem;

    --z-base: 1;
    --z-sticky: 50;
    --z-overlay: 90;
    --z-modal: 100;
    --z-toast: 120;
}

[data-theme="dark"] {
    --cream-lightest: #181818;
    --cream-lighter:  #1f1f1f;
    --cream-medium:   #232323;
    --cream-dark:     #2c2c2c;
    --warm-grey:      #141414;
    --grey:           #3e3e3e;

    --accent-text: var(--text-primary);

    --black: #fff9f1;
    --dark-grey: rgba(255, 249, 241, 0.82);
    --med-grey:  rgba(255, 249, 241, 0.55);

    --text-primary: #fff9f1;
    --text-body:    rgba(255, 249, 241, 0.82);
    --text-muted:   rgba(255, 249, 241, 0.55);
    --text-inverse: #181818;

    --border-hairline: rgba(255, 249, 241, 0.16);
    --border-subtle:   rgba(255, 249, 241, 0.07);

    --bg-canvas:  #181818;
    --bg-surface: #232323;
    --bg-sunken:  #111111;
    --bg-hero:    #141414;

    --ring-focus: 0 0 0 2px #181818, 0 0 0 4px var(--highlighter);

    --danger-soft:  rgba(199, 72, 72, 0.18);
    --warning-soft: rgba(201, 132, 31, 0.18);
    --success-soft: rgba(47, 181, 96, 0.18);

    --grey-blue: rgba(255, 249, 241, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0ms;
        --t-base: 0ms;
        --t-slow: 0ms;
        --t-enter: 0ms;
    }
}