/* Cascade layer order for the whole application. Declared here because this file loads first;
   every other stylesheet only appends to a layer named below. Ordering the layers explicitly means
   a page rule can no longer lose to a component rule just because of source order — which is how
   the circuit-error banner ended up unreadable. */
@layer reset, tokens, base, components, pages, utilities;

@layer tokens {
    :root {
        color-scheme: light dark;

        /* ---- primitives: never referenced by components, only by the aliases below ---- */

        --gray-0: #ffffff;
        --gray-25: #fbfcfe;
        --gray-50: #f9fbfd;
        --gray-100: #eef2f6;
        --gray-150: #f6f8fb;
        --gray-200: #d8e0ea;
        --gray-300: #bcc8d6;
        --gray-500: #5c6b7f;
        --gray-600: #405069;
        --gray-700: #314158;
        --gray-800: #26364a;
        --gray-900: #17202a;

        --ink-950: #0d1117;
        --ink-900: #141a22;
        --ink-850: #1a212b;
        --ink-800: #202834;
        --ink-700: #2a3441;
        --ink-600: #3a4757;
        --ink-400: #8b9ab0;
        --ink-200: #c3cedd;
        --ink-50: #e8eef6;

        /* Darkened from #2367e8, which reached only 4.44:1 as badge text on --blue-soft-tint. */
        --blue-base: #1f5ed6;
        --blue-soft-tint: #eaf1ff;
        --blue-line: #9ab8f6;
        --green-base: #106a48;
        --green-soft-tint: #e9f8f0;
        --green-line: #9fd5b8;
        --amber-base: #92500b;
        --amber-soft-tint: #fff4df;
        --amber-line: #f0d2a8;
        --red-base: #b52d2d;
        --red-soft-tint: #fff0f0;
        --red-line: #e6aaaa;

        /* ---- scales ---- */

        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --space-8: 32px;
        --space-10: 40px;

        --radius-sm: 4px;
        --radius-md: 6px;
        --radius-lg: 8px;
        --radius-pill: 999px;

        --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

        --text-2xs: 11px;
        --text-xs: 12px;
        --text-sm: 13px;
        --text-md: 14px;
        --text-lg: 16px;
        --text-xl: 18px;
        --text-2xl: 26px;

        --leading-tight: 1.2;
        --leading-normal: 1.45;
        --leading-relaxed: 1.55;

        --weight-medium: 500;
        --weight-semibold: 600;
        --weight-bold: 700;
        --weight-heavy: 800;

        --control-h-sm: 30px;
        --control-h-md: 34px;
        --control-h-lg: 38px;
        --tap-min: 44px;

        --duration-fast: 120ms;
        --duration-base: 180ms;
        --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

        --z-sticky: 40;
        --z-popover: 50;
        --z-overlay: 800;
        --z-modal: 900;
        /* Above the modal: a circuit error has to stay visible over whatever is open. */
        --z-banner: 1000;

        --focus-ring-width: 2px;
        --focus-ring-offset: 2px;

        /* ---- semantic aliases: the only names components may use ---- */

        --bg: var(--gray-100);
        --surface: var(--gray-0);
        --surface-muted: var(--gray-150);
        --surface-rail: var(--gray-50);
        --surface-composer: var(--gray-25);

        --border: var(--gray-200);
        --border-strong: var(--gray-300);

        --text: var(--gray-900);
        --text-secondary: var(--gray-700);
        /* Darkened from the original #66758a and #718096, which measured 4.14:1 on the active
           session tint and 3.87:1 on the rail — both below the 4.5:1 minimum. */
        --text-muted: var(--gray-500);
        --text-label: var(--gray-600);
        --text-on-accent: var(--gray-0);
        --code-fg: var(--gray-800);

        --accent: var(--blue-base);
        --accent-bg: var(--blue-soft-tint);
        --accent-border: var(--blue-line);
        --accent-fg: var(--gray-0);
        --focus-ring: var(--accent);

        --success-fg: var(--green-base);
        --success-bg: var(--green-soft-tint);
        --success-border: var(--green-line);

        --warning-fg: var(--amber-base);
        --warning-bg: var(--amber-soft-tint);
        --warning-border: var(--amber-line);

        --danger-fg: var(--red-base);
        --danger-bg: var(--red-soft-tint);
        --danger-border: var(--red-line);

        --shadow: 0 10px 30px rgba(21, 31, 47, 0.08);
        --hatch: rgba(92, 107, 127, 0.09);
        --scrollbar-thumb: rgba(92, 107, 127, 0.34);
        --scrollbar-thumb-hover: rgba(92, 107, 127, 0.58);
    }

    /* The dark palette lives in one place and is applied by two selectors: the OS preference, and
       an explicit choice stamped on <html>. The explicit choice has to win in both directions,
       so the light values are restated rather than relying on the media query not matching. */
    @media (prefers-color-scheme: dark) {
        :root {
            color-scheme: dark;

            --bg: var(--ink-950);
            --surface: var(--ink-900);
            --surface-muted: var(--ink-800);
            --surface-rail: var(--ink-900);
            --surface-composer: var(--ink-850);

            --border: var(--ink-700);
            --border-strong: var(--ink-600);

            --text: var(--ink-50);
            --text-secondary: var(--ink-200);
            --text-muted: var(--ink-400);
            --text-label: var(--ink-400);
            --text-on-accent: var(--ink-950);
            --code-fg: var(--ink-200);

            --accent: #6c9bff;
            --accent-bg: #17233a;
            --accent-border: #2e4574;
            --accent-fg: var(--ink-950);

            --success-fg: #4fd79e;
            --success-bg: #10261d;
            --success-border: #1f5340;

            --warning-fg: #ffb454;
            --warning-bg: #2a1f0d;
            --warning-border: #5b4014;

            --danger-fg: #ff8078;
            --danger-bg: #2b1615;
            --danger-border: #5c2626;

            --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
            --hatch: rgba(139, 154, 176, 0.12);
            --scrollbar-thumb: rgba(139, 154, 176, 0.30);
            --scrollbar-thumb-hover: rgba(139, 154, 176, 0.52);
        }
    }

    :root[data-theme="dark"] {
        color-scheme: dark;

        --bg: var(--ink-950);
        --surface: var(--ink-900);
        --surface-muted: var(--ink-800);
        --surface-rail: var(--ink-900);
        --surface-composer: var(--ink-850);

        --border: var(--ink-700);
        --border-strong: var(--ink-600);

        --text: var(--ink-50);
        --text-secondary: var(--ink-200);
        --text-muted: var(--ink-400);
        --text-label: var(--ink-400);
        --text-on-accent: var(--ink-950);
        --code-fg: var(--ink-200);

        --accent: #6c9bff;
        --accent-bg: #17233a;
        --accent-border: #2e4574;
        --accent-fg: var(--ink-950);

        --success-fg: #4fd79e;
        --success-bg: #10261d;
        --success-border: #1f5340;

        --warning-fg: #ffb454;
        --warning-bg: #2a1f0d;
        --warning-border: #5b4014;

        --danger-fg: #ff8078;
        --danger-bg: #2b1615;
        --danger-border: #5c2626;

        --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        --hatch: rgba(139, 154, 176, 0.12);
        --scrollbar-thumb: rgba(139, 154, 176, 0.30);
        --scrollbar-thumb-hover: rgba(139, 154, 176, 0.52);
    }

    :root[data-theme="light"] {
        color-scheme: light;

        --bg: var(--gray-100);
        --surface: var(--gray-0);
        --surface-muted: var(--gray-150);
        --surface-rail: var(--gray-50);
        --surface-composer: var(--gray-25);

        --border: var(--gray-200);
        --border-strong: var(--gray-300);

        --text: var(--gray-900);
        --text-secondary: var(--gray-700);
        --text-muted: var(--gray-500);
        --text-label: var(--gray-600);
        --text-on-accent: var(--gray-0);
        --code-fg: var(--gray-800);

        --accent: var(--blue-base);
        --accent-bg: var(--blue-soft-tint);
        --accent-border: var(--blue-line);
        --accent-fg: var(--gray-0);

        --success-fg: var(--green-base);
        --success-bg: var(--green-soft-tint);
        --success-border: var(--green-line);

        --warning-fg: var(--amber-base);
        --warning-bg: var(--amber-soft-tint);
        --warning-border: var(--amber-line);

        --danger-fg: var(--red-base);
        --danger-bg: var(--red-soft-tint);
        --danger-border: var(--red-line);

        --shadow: 0 10px 30px rgba(21, 31, 47, 0.08);
        --hatch: rgba(92, 107, 127, 0.09);
        --scrollbar-thumb: rgba(92, 107, 127, 0.34);
        --scrollbar-thumb-hover: rgba(92, 107, 127, 0.58);
    }
}

@layer reset {
    html {
        font-family: var(--font-sans);
        color: var(--text);
        background: var(--bg);
    }
}