/* Hallmark · design-system: MBG Workbench · genre: modern-minimal · theme: Cobalt Operational */

:root {
    color-scheme: light;

    --color-paper: oklch(97.8% 0.008 248);
    --color-paper-2: oklch(95.8% 0.012 248);
    --color-surface: oklch(100% 0 0);
    --color-surface-raised: oklch(100% 0 0);
    --color-surface-sunken: oklch(96.2% 0.012 248);
    --color-ink: oklch(23% 0.035 255);
    --color-ink-2: oklch(37% 0.035 255);
    --color-muted: oklch(48% 0.03 255);
    --color-subtle: oklch(56% 0.025 255);
    --color-rule: oklch(88% 0.018 248);
    --color-rule-strong: oklch(79% 0.025 248);

    --color-accent: oklch(52% 0.19 255);
    --color-accent-hover: oklch(45% 0.18 255);
    --color-accent-active: oklch(39% 0.16 255);
    --color-accent-soft: oklch(94% 0.035 251);
    --color-accent-soft-hover: oklch(90% 0.055 251);
    --color-accent-ink: oklch(99% 0 0);
    --color-focus: oklch(58% 0.2 252);

    --color-success: oklch(43% 0.12 158);
    --color-success-soft: oklch(95% 0.035 158);
    --color-success-rule: oklch(81% 0.08 158);
    --color-success-ink: oklch(30% 0.09 158);
    --color-warning: oklch(45% 0.11 72);
    --color-warning-soft: oklch(96% 0.04 82);
    --color-warning-rule: oklch(82% 0.09 78);
    --color-warning-ink: oklch(31% 0.075 65);
    --color-danger: oklch(48% 0.18 25);
    --color-danger-soft: oklch(96% 0.035 24);
    --color-danger-rule: oklch(83% 0.08 25);
    --color-danger-ink: oklch(34% 0.13 25);
    --color-info: oklch(48% 0.15 250);
    --color-info-soft: oklch(95% 0.035 250);
    --color-info-rule: oklch(82% 0.07 250);
    --color-info-ink: oklch(33% 0.11 250);

    --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;

    --rule-thin: 1px;
    --radius-control: 0.5rem;
    --radius-card: 0.5rem;
    --radius-panel: 0.625rem;
    --radius-pill: 999px;
    --target-min: 2.75rem;

    --shadow-float: 0 10px 30px oklch(20% 0.04 255 / 0.12);
    --shadow-menu: 0 16px 40px oklch(20% 0.04 255 / 0.16);

    /* Compatibility aliases for the incumbent templates and chart scripts. */
    --primary-50: var(--color-accent-soft);
    --primary-100: var(--color-accent-soft-hover);
    --primary-200: oklch(83% 0.08 251);
    --primary-300: oklch(73% 0.12 252);
    --primary-400: oklch(63% 0.16 253);
    --primary-500: var(--color-focus);
    --primary-600: var(--color-accent);
    --primary-700: var(--color-accent-hover);
    --primary-800: var(--color-accent-active);
    --primary-900: oklch(32% 0.13 255);
    --brand-pastel: var(--color-accent-soft-hover);
    --brand-light: var(--color-accent-soft);
    --brand-dark: var(--color-ink);

    --neutral-50: var(--color-surface-sunken);
    --neutral-100: var(--color-paper-2);
    --neutral-200: var(--color-rule);
    --neutral-300: var(--color-rule-strong);
    --neutral-400: var(--color-subtle);
    --neutral-500: var(--color-muted);
    --neutral-600: var(--color-ink-2);
    --neutral-700: var(--color-ink-2);
    --neutral-800: var(--color-ink);
    --neutral-900: var(--color-ink);

    --success: var(--color-success);
    --success-light: var(--color-success-soft);
    --success-border: var(--color-success-rule);
    --success-chart-fill: oklch(60% 0.13 158 / 0.14);
    --warning: var(--color-warning);
    --warning-light: var(--color-warning-soft);
    --warning-border: var(--color-warning-rule);
    --warning-chart-fill: oklch(65% 0.13 78 / 0.14);
    --danger: var(--color-danger);
    --danger-light: var(--color-danger-soft);
    --danger-border: var(--color-danger-rule);
    --danger-chart-fill: oklch(61% 0.17 25 / 0.14);
    --info: var(--color-info);
    --info-light: var(--color-info-soft);
    --surface: var(--color-surface);

    --font-family: var(--font-body);
    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--text-xl);
    --font-size-2xl: var(--text-2xl);
    --border-radius: var(--radius-card);
    --border-radius-lg: var(--radius-panel);
    --border-radius-pill: var(--radius-pill);
    --transition-fast: var(--dur-fast) var(--ease-out);
    --transition-base: var(--dur-base) var(--ease-out);
    --shadow-soft: none;
    --shadow-md: var(--shadow-float);
    --shadow-lg: var(--shadow-menu);
}

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

    --color-paper: oklch(17% 0.025 255);
    --color-paper-2: oklch(20% 0.028 255);
    --color-surface: oklch(22% 0.028 255);
    --color-surface-raised: oklch(25% 0.03 255);
    --color-surface-sunken: oklch(19% 0.025 255);
    --color-ink: oklch(94% 0.012 248);
    --color-ink-2: oklch(84% 0.018 248);
    --color-muted: oklch(72% 0.025 248);
    --color-subtle: oklch(65% 0.025 248);
    --color-rule: oklch(33% 0.03 255);
    --color-rule-strong: oklch(42% 0.035 255);

    --color-accent: oklch(72% 0.14 251);
    --color-accent-hover: oklch(78% 0.12 251);
    --color-accent-active: oklch(82% 0.1 251);
    --color-accent-soft: oklch(26% 0.055 251);
    --color-accent-soft-hover: oklch(31% 0.07 251);
    --color-accent-ink: oklch(18% 0.04 255);
    --color-focus: oklch(77% 0.15 250);

    --color-success: oklch(76% 0.13 158);
    --color-success-soft: oklch(27% 0.05 158);
    --color-success-rule: oklch(44% 0.08 158);
    --color-success-ink: oklch(88% 0.07 158);
    --color-warning: oklch(80% 0.12 82);
    --color-warning-soft: oklch(29% 0.05 78);
    --color-warning-rule: oklch(48% 0.08 78);
    --color-warning-ink: oklch(90% 0.07 82);
    --color-danger: oklch(76% 0.14 25);
    --color-danger-soft: oklch(28% 0.06 25);
    --color-danger-rule: oklch(48% 0.1 25);
    --color-danger-ink: oklch(90% 0.06 25);
    --color-info: oklch(76% 0.12 250);
    --color-info-soft: oklch(28% 0.055 250);
    --color-info-rule: oklch(48% 0.08 250);
    --color-info-ink: oklch(90% 0.05 250);

    --primary-200: oklch(44% 0.08 251);
    --primary-300: oklch(53% 0.1 251);
    --primary-400: oklch(63% 0.12 251);
    --primary-900: oklch(88% 0.055 251);
    --success-chart-fill: oklch(70% 0.12 158 / 0.18);
    --warning-chart-fill: oklch(76% 0.11 82 / 0.18);
    --danger-chart-fill: oklch(72% 0.13 25 / 0.18);
    --shadow-float: 0 12px 32px oklch(5% 0.02 255 / 0.35);
    --shadow-menu: 0 20px 48px oklch(5% 0.02 255 / 0.45);
}

@media print {
    :root,
    :root[data-theme="dark"] {
        color-scheme: light;
        --color-paper: oklch(100% 0 0);
        --color-paper-2: oklch(98% 0 0);
        --color-surface: oklch(100% 0 0);
        --color-surface-raised: oklch(100% 0 0);
        --color-surface-sunken: oklch(98% 0 0);
        --color-ink: oklch(18% 0 0);
        --color-ink-2: oklch(30% 0 0);
        --color-muted: oklch(44% 0 0);
        --color-subtle: oklch(52% 0 0);
        --color-rule: oklch(85% 0 0);
        --color-rule-strong: oklch(72% 0 0);
    }
}