/* ==========================================================================
   RosettaHub design tokens
   One source for colour, type, radius and spacing across the console.
   Skins read these with a fallback, e.g. var(--rh-brand, #04488F), so a page
   that does not load this file still renders the light theme.
   Dark values switch on with [data-theme="dark"], or follow the OS with
   [data-theme="system"]. With no data-theme the console stays light: most
   skins still hold literal light colours until plan step 2.7.
   ========================================================================== */

/* Inter, self-hosted (wwwroot/lib/inter, @fontsource/inter 5.3.0, SIL OFL 1.1) */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../lib/inter/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../lib/inter/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../lib/inter/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../lib/inter/inter-latin-700-normal.woff2") format("woff2");
}

:root {
    /* Action windows: the inset of everything from the window's sides (title, content, button bar),
       and the height of the fixed button bar at the bottom (_ActionButtons) */
    --rh-panel-gutter: 10px;
    --rh-panel-bar-h: 52px;

    /* Brand */
    --rh-brand: #04488F;
    --rh-brand-hover: #033a75;
    --rh-brand-tint: rgba(4, 72, 143, .08);
    --rh-brand-tint-strong: rgba(4, 72, 143, .14);
    --rh-brand-ring: rgba(4, 72, 143, .22);
    --rh-on-brand: #ffffff;

    /* Neutrals: text, lines, surfaces */
    --rh-ink: #0f1b2d;
    --rh-ink-2: #334155;
    --rh-muted: #64748b;
    --rh-line: #e2e8f0;
    --rh-line-2: #cbd5e1;
    --rh-bg: #f6f8fb;
    --rh-surface: #ffffff;
    --rh-sunken: #f1f5f9;

    /* Status */
    --rh-ok: #15803d;
    --rh-ok-bg: #dcfce7;
    --rh-warn: #b45309;
    --rh-warn-bg: #fef3c7;
    --rh-bad: #b91c1c;
    --rh-bad-bg: #fee2e2;

    /* Type. Inter when installed, then the platform UI font. */
    --rh-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rh-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Action windows size to their content (plan 2.6), so text can be 14px */
    --rh-font-size: 14px;
    --rh-font-size-sm: 12.5px;
    --rh-font-size-table: 13px;
    --rh-font-size-title: 15px;

    /* Shape and space */
    --rh-radius-sm: 6px;
    --rh-radius: 8px;
    --rh-radius-lg: 12px;
    --rh-space-1: 4px;
    --rh-space-2: 8px;
    --rh-space-3: 12px;
    --rh-space-4: 16px;
    --rh-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .08);
    --rh-shadow-pop: 0 8px 24px rgba(15, 27, 45, .14);

    /* Code (workbench editor, JSON views) */
    --rh-code-bg: #f8fafc;
    --rh-code-gutter: #f1f5f9;
    --rh-code-selection: rgba(4, 72, 143, .14);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --rh-brand: #6aa5e8;
        --rh-brand-hover: #8dbbf0;
        --rh-brand-tint: rgba(106, 165, 232, .12);
        --rh-brand-tint-strong: rgba(106, 165, 232, .2);
        --rh-brand-ring: rgba(106, 165, 232, .3);
        --rh-on-brand: #0b1220;
        --rh-ink: #e6edf6;
        --rh-ink-2: #c3cfdd;
        --rh-muted: #8a9ab0;
        --rh-line: #243246;
        --rh-line-2: #33445c;
        --rh-bg: #0b1220;
        --rh-surface: #111a2b;
        --rh-sunken: #0e1626;
        --rh-ok: #4ade80;
        --rh-ok-bg: #0f2e1c;
        --rh-warn: #fbbf24;
        --rh-warn-bg: #33270b;
        --rh-bad: #f87171;
        --rh-bad-bg: #3a1414;
        --rh-shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --rh-shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
        --rh-code-bg: #0e1626;
        --rh-code-gutter: #111a2b;
        --rh-code-selection: rgba(106, 165, 232, .2);
    }
}

:root[data-theme="dark"] {
    --rh-brand: #6aa5e8;
    --rh-brand-hover: #8dbbf0;
    --rh-brand-tint: rgba(106, 165, 232, .12);
    --rh-brand-tint-strong: rgba(106, 165, 232, .2);
    --rh-brand-ring: rgba(106, 165, 232, .3);
    --rh-on-brand: #0b1220;
    --rh-ink: #e6edf6;
    --rh-ink-2: #c3cfdd;
    --rh-muted: #8a9ab0;
    --rh-line: #243246;
    --rh-line-2: #33445c;
    --rh-bg: #0b1220;
    --rh-surface: #111a2b;
    --rh-sunken: #0e1626;
    --rh-ok: #4ade80;
    --rh-ok-bg: #0f2e1c;
    --rh-warn: #fbbf24;
    --rh-warn-bg: #33270b;
    --rh-bad: #f87171;
    --rh-bad-bg: #3a1414;
    --rh-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --rh-shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
    --rh-code-bg: #0e1626;
    --rh-code-gutter: #111a2b;
    --rh-code-selection: rgba(106, 165, 232, .2);
}