:root {
    /* Typography */
    --font-body: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
    --font-display: "Aptos Display", "Aptos", "Segoe UI Variable", sans-serif;
    --font-mono: "Consolas", "Monaco", "Courier New", monospace;

    /* Ink/Text */
    --color-ink: #111a24;
    --color-ink-strong: #0a1219;
    --color-ink-soft: #1e3248;
    --color-muted: #4b5e6f;
    --color-muted-strong: #344d63;

    /* Accent */
    --color-accent: #0c5d96;
    --color-accent-hover: #094a78;
    --color-accent-contrast: #ffffff;
    --color-focus: #1a6fd4;

    /* Surfaces */
    --color-surface: #eaeff5;
    --color-surface-soft: #dfe6ee;
    --color-surface-alt: #d4dde8;
    --color-surface-elevated: rgba(245, 248, 252, 0.96);
    --header-bg: rgba(228, 234, 240, 0.94);

    /* Borders */
    --color-border: rgba(12, 35, 60, 0.24);
    --color-border-strong: rgba(12, 35, 60, 0.34);

    /* Shadows */
    --color-shadow-soft: rgba(12, 30, 50, 0.14);
    --color-shadow-strong: rgba(12, 30, 50, 0.22);

    /* State Colors */
    --color-success-bg: #e4f5ea;
    --color-success-text: #1a5036;
    --color-error-bg: #fdecea;
    --color-error-text: #7a2420;
    --color-warn: #b45309;
    --color-warn-bg: #fef3c7;
    --color-warn-text: #78350f;

    /* Heatmap Status Colors — CVD-friendly teal/coral palette (cool=good, warm=bad) */
    --heatmap-succeeded: #1d6fb5;
    --heatmap-succeeded-bg: #dbeafe;
    --heatmap-failed: #dc2626;
    --heatmap-failed-bg: #fee2e2;
    --heatmap-pending: #9ca3af;
    --heatmap-pending-bg: #f9fafb;
    --heatmap-unknown: #374151;
    --heatmap-unknown-bg: #e5e7eb;
    --heatmap-issues: #d97706;
    --heatmap-issues-bg: #fef3c7;
    --heatmap-mismatch-border: #e15554;
    --heatmap-match-border: #2a9d8f;

    /* Layout */
    --header-height: 48px;
    --radius-sm: 2px;
    --radius: 4px;
    --radius-pill: 999px;
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease-in-out;
    --transition-smooth: 0.3s ease;
}

html[data-theme="dark"] {
    --color-ink: #d6e2f0;
    --color-ink-strong: #e8f0fa;
    --color-ink-soft: #b0c4d8;
    --color-muted: #7a9ab5;
    --color-muted-strong: #8fb0cc;

    --color-accent: #5eb4ff;
    --color-accent-hover: #7ec4ff;
    --color-accent-contrast: #0a1219;
    --color-focus: #5eb4ff;

    --color-surface: #1a2433;
    --color-surface-soft: #1e2a3a;
    --color-surface-alt: #243344;
    --color-surface-elevated: rgba(30, 42, 58, 0.96);
    --header-bg: rgba(14, 21, 31, 0.92);

    --color-border: rgba(180, 210, 240, 0.18);
    --color-border-strong: rgba(180, 210, 240, 0.28);

    --color-shadow-soft: rgba(0, 0, 0, 0.35);
    --color-shadow-strong: rgba(0, 0, 0, 0.50);

    --color-success-bg: #052e16;
    --color-success-text: #86efac;
    --color-error-bg: #450a0a;
    --color-error-text: #fca5a5;
    --color-warn-bg: #451a03;
    --color-warn-text: #fcd34d;

    --heatmap-succeeded: #5eb4ff;
    --heatmap-succeeded-bg: #1e3a5f;
    --heatmap-failed-bg: #43201f;
    --heatmap-pending-bg: #1e2a3a;
    --heatmap-unknown-bg: #111827;
    --heatmap-issues-bg: #451a03;
}