/*
 * Kazazana design tokens. Derived from the brand kit (brand.css): crust brown is the single primary
 * colour, warm neutrals come from the brand's ink and surfaces, capulana teal and maize are reused
 * for success and warning. Every component reads these variables; never hard-code colours elsewhere.
 * Reference: docs/design-system.md
 */

@font-face {
    font-family: "Nunito Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("/webjars/fontsource-variable__nunito-sans/files/nunito-sans-latin-wght-normal.woff2") format("woff2-variations");
    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: "Nunito Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("/webjars/fontsource-variable__nunito-sans/files/nunito-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
    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;
}

:root {
    color-scheme: light;

    /* Neutrals */
    --color-bg: #faf7f2;
    --color-surface: #ffffff;
    --color-surface-subtle: #f6f1e9;
    --color-surface-hover: #f1eadf;
    --color-sidebar: #f5f0e8;
    --color-border: #e8dfd2;
    --color-border-strong: #d4c4ae;
    --color-text: #2e1e14;
    --color-text-muted: #6e5848;
    --color-text-subtle: #7d6858;

    /* Brand */
    --color-primary: #9a4a22;
    --color-primary-hover: #82401d;
    --color-primary-soft: #f7e9df;
    --color-on-primary: #ffffff;
    --color-accent: #e2a23b;
    --color-focus: #1f6f6a;

    /* Status: always paired with an icon or text, never colour alone */
    --color-success: #1f6f6a;
    --color-success-soft: #e0f0ec;
    --color-warning: #8a5a0b;
    --color-warning-soft: #fbefd6;
    --color-danger: #b3261e;
    --color-danger-soft: #fbe4e1;
    --color-info: #2f5f8a;
    --color-info-soft: #e3edf6;
    --color-neutral: #6e5848;
    --color-neutral-soft: #f1eadf;

    /* Typography */
    --font-sans: "Nunito Sans Variable", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --text-xs: 0.75rem;     /* 12px - captions, badges */
    --text-sm: 0.8125rem;   /* 13px - secondary text, table meta */
    --text-base: 0.9375rem; /* 15px - body, controls, tables */
    --text-md: 1rem;        /* 16px - inputs on touch devices (prevents iOS zoom) */
    --text-lg: 1.125rem;    /* 18px - section titles */
    --text-xl: 1.375rem;    /* 22px - page titles */
    --text-2xl: 1.75rem;    /* 28px - metric values, login heading */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --weight-normal: 400;
    --weight-medium: 600;
    --weight-bold: 700;
    --weight-heavy: 800;

    /* Spacing (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Shape and depth (used sparingly) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;
    --shadow-sm: 0 1px 2px rgba(46, 30, 20, 0.06);
    --shadow-md: 0 4px 16px rgba(46, 30, 20, 0.10);
    --shadow-lg: 0 16px 40px rgba(46, 30, 20, 0.18);

    /* Controls */
    --control-h: 38px;
    --control-h-sm: 32px;
    --control-font: var(--text-base);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent);

    /* Layout */
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --content-max: 1200px;
    --dialog-w: 440px;
    --drawer-w: 288px;

    /* Motion */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --duration: 160ms;
}

/* Touch devices: larger targets (WCAG 2.5.8) and 16px inputs (no zoom on iOS). */
@media (pointer: coarse) {
    :root {
        --control-h: 44px;
        --control-h-sm: 40px;
        --control-font: var(--text-md);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-bg: #15100b;
        --color-surface: #1e1610;
        --color-surface-subtle: #251c15;
        --color-surface-hover: #2d231a;
        --color-sidebar: #19130e;
        --color-border: #3a2e24;
        --color-border-strong: #4d3e31;
        --color-text: #f5ebdd;
        --color-text-muted: #bfa894;
        --color-text-subtle: #a8927e;

        --color-primary: #d9824f;
        --color-primary-hover: #e3966a;
        --color-primary-soft: #3a2418;
        --color-on-primary: #1e1610;
        --color-accent: #edb656;
        --color-focus: #edb656;

        --color-success: #6cc0b6;
        --color-success-soft: #17302d;
        --color-warning: #edb656;
        --color-warning-soft: #3a2d17;
        --color-danger: #f2867e;
        --color-danger-soft: #3f2220;
        --color-info: #8db8e0;
        --color-info-soft: #1c2a38;
        --color-neutral: #bfa894;
        --color-neutral-soft: #2a2018;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration: 0ms;
    }
}