/*
 * zombi.dev design tokens. Source of truth: the zombi.dev design system (tokens.json).
 * Plain CSS: works in Blade pages and the React app. Imported by app.css before zombi-theme.css.
 *
 * Themes: light (Daylight) and dark (Crypt). <html class="light"> or <html class="dark"> forces a theme
 * (the user's choice). No class = follow the device setting ("system"); no script needed.
 * Every text pair is 4.5:1 or more and every control border, indicator and focus ring 3:1 or more,
 * in both themes (see the contrast table in claude/design-system.md).
 */

/* Fonts: self-hosted. Paths are relative to this file (resources/css -> resources/fonts), so Vite bundles them with hashed names. Only these 5 weights ship; latin-ext downloads only when a page uses those characters. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext-800-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-800-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Light (Daylight). Also the fallback when the device setting is unknown. */
:root,
.light {
    --surface: #f3f1e8;
    --surface-raised: #ffffff;
    --surface-sunken: #e7e4d7;
    --line: #d3cfbf;
    --line-strong: #7a7f70;
    --ink: #151915;
    --ink-muted: #545d53;
    --ichor: #3c7a12;
    --ichor-text: #336a0e;
    --on-ichor: #ffffff;
    --ichor-hover: #336a0e;
    --amber: #8a5700;
    --on-amber: #ffffff;
    --wound: #a33914;
    --on-wound: #ffffff;
    --wound-hover: #8a2f10;
    --signal: #1d64a6;
    --on-signal: #ffffff;
    --focus-ring: #22460a;
    --focus-gap: #ffffff;
    --overlay: rgb(21 25 21 / 0.5);
    --shadow-color: rgb(21 25 21 / 0.16);
    color-scheme: light;
}

/* Dark (Crypt), chosen by the user. */
.dark {
    --surface: #0e120f;
    --surface-raised: #171d18;
    --surface-sunken: #090c0a;
    --line: #2b352d;
    --line-strong: #62716a;
    --ink: #ebe7d6;
    --ink-muted: #a3ad9f;
    --ichor: #9be84a;
    --ichor-text: #9be84a;
    --on-ichor: #0e120f;
    --ichor-hover: #b4f070;
    --amber: #f5b43c;
    --on-amber: #0e120f;
    --wound: #ff7a4d;
    --on-wound: #0e120f;
    --wound-hover: #ff9670;
    --signal: #7cc4ff;
    --on-signal: #0e120f;
    --focus-ring: #9be84a;
    --focus-gap: #0e120f;
    --overlay: rgb(0 0 0 / 0.6);
    --shadow-color: rgb(0 0 0 / 0.55);
    color-scheme: dark;
}

/* Dark (Crypt), following the device setting when the user hasn't chosen. */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --surface: #0e120f;
        --surface-raised: #171d18;
        --surface-sunken: #090c0a;
        --line: #2b352d;
        --line-strong: #62716a;
        --ink: #ebe7d6;
        --ink-muted: #a3ad9f;
        --ichor: #9be84a;
        --ichor-text: #9be84a;
        --on-ichor: #0e120f;
        --ichor-hover: #b4f070;
        --amber: #f5b43c;
        --on-amber: #0e120f;
        --wound: #ff7a4d;
        --on-wound: #0e120f;
        --wound-hover: #ff9670;
        --signal: #7cc4ff;
        --on-signal: #0e120f;
        --focus-ring: #9be84a;
        --focus-gap: #0e120f;
        --overlay: rgb(0 0 0 / 0.6);
        --shadow-color: rgb(0 0 0 / 0.55);
        color-scheme: dark;
    }
}

/* shadcn/ui names, pointing at the zombi.dev tokens. Components use these; don't give them their own values. */
:root,
.light,
.dark {
    --background: var(--surface);
    --foreground: var(--ink);
    --card: var(--surface-raised);
    --card-foreground: var(--ink);
    --popover: var(--surface-raised);
    --popover-foreground: var(--ink);
    --primary: var(--ichor);
    --primary-foreground: var(--on-ichor);
    --secondary: var(--surface-sunken);
    --secondary-foreground: var(--ink);
    --muted: var(--surface-sunken);
    --muted-foreground: var(--ink-muted);
    --accent: var(--surface-sunken);
    --accent-foreground: var(--ink);
    --destructive: var(--wound);
    --destructive-foreground: var(--on-wound);
    --border: var(--line);
    --input: var(--line-strong);
    --ring: var(--focus-ring);
    --chart-1: var(--ichor);
    --chart-2: var(--signal);
    --chart-3: var(--amber);
    --chart-4: var(--wound);
    --chart-5: var(--ink-muted);
    --sidebar: var(--surface-raised);
    --sidebar-foreground: var(--ink);
    --sidebar-primary: var(--ichor);
    --sidebar-primary-foreground: var(--on-ichor);
    --sidebar-accent: var(--surface-sunken);
    --sidebar-accent-foreground: var(--ink);
    --sidebar-border: var(--line);
    --sidebar-ring: var(--focus-ring);
    --radius: 0.5rem;
    --shadow-pop: 0 8px 24px var(--shadow-color);
    --shadow-float: 0 -8px 24px var(--shadow-color);

    /* Plain-CSS copies of the Tailwind scale, for Blade pages and the design-system previews */
    --font-sans: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --tap-target: 3rem;
    --tap-target-min: 1.5rem;
    --content-max: 80rem;

    /* Motion */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}