/* Design tokens - the one set of colors, sizes and type shared by the app
   (style.css) and the public pages (marketing.css). UI_PLAN phase 1,
   direction C. Change a value here and both follow.

   Inter (SIL Open Font License, fonts/Inter-LICENSE.txt) is self-hosted:
   no request to a font service (privacy page promise, CSP 'self'). One
   variable file per subset; latin-ext only downloads when a page uses it. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-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;
}

/* `hidden` always wins: a component's own display rule (e.g. a flex
   label) would otherwise show an element the page hid (the US state
   list, NOTES 8 Nov 2026). */
[hidden] { display: none !important; }

:root {
    /* Type */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 26px;
    --text-2xl: 34px;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading: 1.5;
    --leading-tight: 1.2;

    /* Color */
    --color-bg: #f4f5f8;
    --color-surface: #ffffff;
    --color-surface-2: #f6f6fa;
    --color-ink: #1a1d29;
    --color-muted: #555a6e;
    --color-border: #e4e6ee;
    --color-border-strong: #d4d7e3;
    --color-accent: #4f46b8;
    --color-accent-hover: #3a3290;
    --color-accent-soft: #eeedfb;
    --color-accent-deep: #3a3290;   /* large indigo areas in dark mode */
    --color-on-accent: #ffffff;
    --color-ok: #2e7d4f;
    --color-ok-soft: #e4f2e9;
    --color-warn: #b4570f;
    --color-warn-soft: #fcefe2;
    --color-danger: #c0392b;
    --color-danger-hover: #a12f23;
    --color-danger-soft: #fcefed;
    --color-overlay: rgba(26, 29, 41, 0.4);

    /* Space (4px steps) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(26, 29, 41, 0.06);
    --shadow-md: 0 2px 6px rgba(26, 29, 41, 0.06), 0 10px 28px rgba(26, 29, 41, 0.08);

    /* Layout */
    --sidebar-w: 236px;
    --content-max: 1100px;
    --tabbar-h: 62px;

    color-scheme: light dark;
}

/* Dark mode (UI_PLAN phase 5): follows the device's own setting, no switch
   in the app. Only colors and shadows change. The accent is a lighter
   indigo here, so text on it (buttons, badges) turns dark: --color-on-accent. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #121420;
        --color-surface: #1b1e2c;
        --color-surface-2: #242838;
        --color-ink: #e8e9f1;
        --color-muted: #a3a7ba;
        --color-border: #2c3045;
        --color-border-strong: #3b4058;
        --color-accent: #8c85f2;
        --color-accent-hover: #a8a2f7;
        --color-accent-soft: #2a2852;
        --color-accent-deep: #302b72;
        --color-on-accent: #121420;
        --color-ok: #62c690;
        --color-ok-soft: #17301f;
        --color-warn: #f0a560;
        --color-warn-soft: #3a2816;
        --color-danger: #f17d6f;
        --color-danger-hover: #f59a8f;
        --color-danger-soft: #3c1e1b;
        --color-overlay: rgba(0, 0, 0, 0.6);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
    }
}