/* Design tokens. Light is the default; dark applies when the OS prefers it
   (unless the user forced light) or when data-theme="dark" is set by the
   toggle. Everything in base.css reads these - override them in theme.css,
   never edit base.css per system. Palette: Brickmaker brand (Fired Clay,
   Kiln Charcoal, Signal Cyan, Warm Limestone, Mortar, Slate). */

@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap;
    src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }

:root {
    color-scheme: light;
    --font-body: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
    --font-display: "Space Grotesk", "Inter", system-ui, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;

    --bg: #FFF9F2;          /* Warm Limestone */
    --card: #FFFFFF;
    --surface-2: #F7F0E7;   /* table headers, ghost buttons, wells */
    --ink: #202326;         /* Kiln Charcoal */
    --muted: #687074;       /* Slate */
    --line: #E7DED3;        /* Mortar */
    --line-strong: #D6CABC;

    --brand: #D95F3B;       /* Fired Clay - fills (buttons) */
    --brand-d: #B84A29;     /* hover, and text-safe clay on light */
    --on-brand: #FFFFFF;
    --link: #B84A29;
    --tint: #FBE9E1;        /* clay wash: tags, hover rows, selected */
    --live: #19B7C6;        /* Signal Cyan - focus/"live" accents only */
    --ring: rgba(25, 183, 198, .45);

    --topbar-bg: #202326;
    --topbar-ink: #FFF9F2;
    --topbar-muted: #B9BEC1;
    --topbar-line: #3A3F43;

    --ok: #046C4E;   --ok-bg: #DDF5E8;
    --warn: #9A5A06; --warn-bg: #FCEFD2;
    --err: #B42318;  --err-bg: #FDE4E1;  --danger: #B42318;

    --role-admin: #6D4AD6; --role-editor: #1F6FEB; --role-viewer: #5E676C;
    --code-bg: #202326; --code-ink: #F1ECE5;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(32, 35, 38, .06), 0 4px 14px rgba(32, 35, 38, .05);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #16181A;
        --card: #1F2224;
        --surface-2: #272B2E;
        --ink: #F1ECE5;
        --muted: #9DA4A8;
        --line: #33383C;
        --line-strong: #454B50;

        --brand: #E2683F;
        --brand-d: #F08A68;
        --on-brand: #1A0F0B;
        --link: #F39672;
        --tint: #3A2620;
        --live: #29C7D5;
        --ring: rgba(41, 199, 213, .5);

        --topbar-bg: #0F1113;
        --topbar-line: #2B3033;

        --ok: #5FD3A0;   --ok-bg: #12332A;
        --warn: #F2B95B; --warn-bg: #3A2C10;
        --err: #FF8A80;  --err-bg: #3D1A17;  --danger: #C93B33;

        --role-admin: #8B6CF0; --role-editor: #3F86F0; --role-viewer: #6E787D;
        --code-bg: #0F1113;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #16181A;
    --card: #1F2224;
    --surface-2: #272B2E;
    --ink: #F1ECE5;
    --muted: #9DA4A8;
    --line: #33383C;
    --line-strong: #454B50;

    --brand: #E2683F;
    --brand-d: #F08A68;
    --on-brand: #1A0F0B;
    --link: #F39672;
    --tint: #3A2620;
    --live: #29C7D5;
    --ring: rgba(41, 199, 213, .5);

    --topbar-bg: #0F1113;
    --topbar-line: #2B3033;

    --ok: #5FD3A0;   --ok-bg: #12332A;
    --warn: #F2B95B; --warn-bg: #3A2C10;
    --err: #FF8A80;  --err-bg: #3D1A17;  --danger: #C93B33;

    --role-admin: #8B6CF0; --role-editor: #3F86F0; --role-viewer: #6E787D;
    --code-bg: #0F1113;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
}