/* =============================================================================
   WebTasks — "Mission Control" instrument-console theme
   -----------------------------------------------------------------------------
   Single cohesive look in light + dark, switched by data-wt-theme on <html>
   ("system" is resolved to a concrete light/dark value by theme.js).
   Ported from the Claude Design project "foss-instrument-console".

   Two token layers:
     • Console tokens (--bg/--panel/--line/--ink/--con-*) — used directly by the
       bespoke console markup (topbar, rail, board, cards, dialogs).
     • Semantic --wt-* tokens — mapped onto the console tokens so the bespoke UI
       primitives keep working unchanged.
   ========================================================================== */

:root {
    /* Make native controls (range, <select> popup, scrollbars, date pickers) follow the theme. */
    color-scheme: light;

    /* ---- primitives (theme-agnostic) ---- */
    --wt-z-header: 30;
    --wt-z-dialog: 60;
    --wt-z-menu: 1100;

    --wt-dur-fast: 120ms;
    --wt-dur-base: 200ms;
    --wt-dur-slow: 300ms;
    --wt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

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

    --wt-font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wt-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wt-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --wt-control-radius: 6px;
    --wt-card-radius: 8px;
    --wt-col-radius: 8px;
    --wt-btn-height: 34px;
    --wt-btn-height-sm: 30px;

    /* Gradient-mesh glow background for the app — the console colors, no grid lines. */
    --con-mesh-bg-image:
        radial-gradient(60% 50% at 80% 32%, color-mix(in srgb, #FF1A6C 26%, transparent), transparent 70%),
        radial-gradient(55% 55% at 28% 38%, color-mix(in srgb, #3AACFF 24%, transparent), transparent 70%),
        radial-gradient(45% 45% at 60% 16%, color-mix(in srgb, #483AFF 22%, transparent), transparent 70%),
        radial-gradient(52% 52% at 55% 82%, color-mix(in srgb, #FFC83A 20%, transparent), transparent 70%);
    --con-mesh-bg-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --con-mesh-bg-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

    /* ---- LIGHT palette (base) ---- */
    --bg: #d3dae1;
    --panel: #ffffff;
    --panel-2: #f4f7fa;
    --inset: #eef2f6;
    --line: #d7dee7;
    --line-2: #aab6c4;
    --ink: #0f1722;
    --ink-2: #3d4a5b;
    --ink-3: #4e5a69;
    --grid: rgba(15, 23, 34, .09);
    --con-primary: #1A6BBF;
    --con-green: #0E9E55;
    --con-yellow: #C99700;
    --con-red: #D32F2A;
    --con-sky: #3C7194;
    --con-orange: #E07B16;
    --con-scrim: color-mix(in srgb, #2a3646 60%, transparent);

    /* ---- semantic --wt-* mapping (theme-lazy; resolves per active palette) ---- */
    --wt-bg: var(--bg);
    --wt-surface: var(--panel);
    --wt-surface-raised: var(--panel);
    --wt-surface-2: var(--inset);
    --wt-surface-sunken: var(--inset);
    --wt-surface-hover: var(--panel-2);
    --wt-surface-translucent: var(--panel);
    --wt-text: var(--ink);
    --wt-text-muted: var(--ink-2);
    --wt-text-faint: var(--ink-3);
    --wt-text-disabled: var(--ink-3);
    --wt-border: var(--line);
    --wt-border-strong: var(--line-2);
    --wt-primary: var(--con-primary);
    --wt-primary-hover: color-mix(in srgb, var(--con-primary) 82%, white);
    --wt-primary-soft: color-mix(in srgb, var(--con-primary) 14%, transparent);
    --wt-primary-contrast: #ffffff;
    --wt-focus-ring: color-mix(in srgb, var(--con-primary) 45%, transparent);
    --wt-danger: var(--con-red);
    --wt-danger-soft: color-mix(in srgb, var(--con-red) 15%, transparent);
    --wt-danger-contrast: #ffffff;
    --wt-success: var(--con-green);
    --wt-success-soft: color-mix(in srgb, var(--con-green) 14%, transparent);
    --wt-success-contrast: #07130c;
    --wt-warning: var(--con-yellow);
    --wt-warning-soft: color-mix(in srgb, var(--con-yellow) 16%, transparent);
    --wt-warning-contrast: #1a1205;
    --wt-info: var(--con-sky);
    --wt-info-soft: color-mix(in srgb, var(--con-sky) 14%, transparent);
    --wt-info-contrast: #ffffff;
    --wt-chip-bg: var(--inset);
    --wt-check-empty: var(--line-2);
    --wt-scrim: var(--con-scrim);
    --wt-brand-gradient: var(--con-primary);

    --wt-shadow-sm: 0 1px 2px rgba(5, 7, 10, .18);
    --wt-shadow-md: 0 12px 30px -12px rgba(5, 7, 10, .45);
    --wt-shadow-lg: 0 30px 70px rgba(5, 7, 10, .40);

    /* ---- layout tokens consumed by the board/card CSS (single density) ---- */
    --wt-board-gap: 14px;
    --wt-board-pad: 16px;
    --wt-col-pad: 14px;
    --wt-item-gap: 8px;
    --wt-card-pad: 10px 12px;
    --wt-row-h: auto;
    --wt-row-pad-y: 10px;
    --wt-row-pad-x: 12px;
    --wt-fs-title: 13.5px;
    --wt-fs-note: 12px;
    --wt-fs-meta: 10px;
    --wt-title-gap: 6px;
    --wt-header-pad: 11px 18px;
}

/* ---- DARK palette ---- */
:root[data-wt-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0f14;
    --panel: #141821;
    --panel-2: #1a1f29;
    --inset: #0f1218;
    --line: #232936;
    --line-2: #323a4a;
    --ink: rgba(255, 255, 255, .92);
    --ink-2: rgba(255, 255, 255, .58);
    --ink-3: rgba(255, 255, 255, .38);
    --grid: rgba(255, 255, 255, .10);
    --con-primary: #2E83D6;
    --con-green: #2BD27A;
    --con-yellow: #FEC400;
    --con-red: #F0524B;
    --con-sky: #55A0D2;
    --con-orange: #F58C28;
    --con-scrim: color-mix(in srgb, #05070a 66%, transparent);
}

/* =============================================================================
   Radzen compatibility shim — the Radzen dialog host + any residual Radzen UI
   follow the console palette. Removed with Radzen in the final cleanup.
   ========================================================================== */
:root {
    --rz-text-color: var(--ink);
    --rz-text-secondary-color: var(--ink-2);
    --rz-text-tertiary-color: var(--ink-3);
    --rz-text-disabled-color: var(--ink-3);
    --rz-border-color: var(--line);
    --rz-base-background-color: var(--bg);
    --rz-body-background-color: var(--bg);
    --rz-body-color: var(--ink);
    --rz-panel-background-color: var(--panel);
    --rz-card-background-color: var(--panel);
    --rz-input-background-color: var(--inset);
    --rz-input-value-color: var(--ink);
    --rz-input-placeholder-color: var(--ink-3);
    --rz-primary: var(--con-primary);
    --rz-primary-dark: color-mix(in srgb, var(--con-primary) 85%, black);
    --rz-link-color: var(--con-primary);
    --rz-link-hover-color: color-mix(in srgb, var(--con-primary) 78%, white);
    --rz-danger: var(--con-red);
    --rz-success: var(--con-green);
    --rz-warning: var(--con-yellow);
    --rz-info: var(--con-sky);
    --rz-text-font-family: var(--wt-font-body);

    /* ---- Toast notifications: console panel + accent (not solid severity blocks) ----
       Flip the toast body to a dark panel with ink text; only the icon carries the
       severity color (the left-accent bar + typography are set in site.css). Because
       --panel-2/--ink/--con-* are theme-scoped, this adapts to light/dark for free. */
    --rz-notification-success-background-color: var(--panel-2);
    --rz-notification-warning-background-color: var(--panel-2);
    --rz-notification-error-background-color: var(--panel-2);
    --rz-notification-info-background-color: var(--panel-2);
    --rz-notification-success-color: var(--ink);
    --rz-notification-warning-color: var(--ink);
    --rz-notification-error-color: var(--ink);
    --rz-notification-info-color: var(--ink);
    --rz-notification-success-icon-color: var(--con-green);
    --rz-notification-warning-icon-color: var(--con-yellow);
    --rz-notification-error-icon-color: var(--con-red);
    --rz-notification-info-icon-color: var(--con-sky);
    --rz-notification-border-radius: 9px;
    --rz-notification-padding: 12px 14px;
    --rz-notification-gap: 10px;
    --rz-notification-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}
