/* ══════════════════════════════════════════════════════════════
   Dr. Machine — Design Tokens v2.0 (Single Source of Truth)
   Aligned to AI_Brand_Guidelines v1.1 + docs/DESIGN_SYSTEM.md.
   ⛔ NO ORANGE — secondary = Slate, tertiary = Emerald.
   ══════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;          /* native controls (select/file/scrollbars) follow theme */

    /* ── Brand Core ── */
    --dm-cyan: #24A9E0;            /* primary fills / icons / borders / large accents */
    --dm-cyan-hover: #1a8ab5;
    --dm-cyan-ink: #0C6E9C;        /* accessible text/links/button-bg on LIGHT (AA) */
    --dm-cyan-bright: #5BC2EF;     /* links on DARK surfaces */
    --dm-cyan-muted: rgba(36, 169, 224, 0.2);
    --dm-cyan-subtle: rgba(36, 169, 224, 0.08);
    --dm-cyan-glow: rgba(36, 169, 224, 0.15);

    --dm-navy: #2D4470;
    --dm-navy-deep: #252161;

    /* ── Secondary (Slate) + Tertiary (Emerald) — replace orange's role ── */
    --dm-slate: #2D4470;
    --dm-slate-light: #7B9FCC;
    --dm-slate-soft: rgba(45, 68, 112, 0.10);
    --dm-emerald: #1A8F50;
    --dm-emerald-light: #6DD58C;
    --dm-emerald-soft: rgba(26, 143, 80, 0.10);
    --dm-violet: #5958A4;          /* data-viz only */

    /* ── Surfaces (Light) ── */
    --dm-bg: #F8FAFB;
    --dm-surface: #FFFFFF;
    --dm-surface-low: #F2F4F6;
    --dm-surface-high: #E6E8EA;

    /* ── MD3 Surface family (Light) — was undefined → broke careers ── */
    --md-surface: #FFFFFF;
    --md-on-surface: #191C1E;
    --md-on-surface-variant: #40484E;
    --md-surface-container-low: #F2F4F6;
    --md-surface-container: #ECEEF0;
    --md-surface-container-high: #E6E8EA;
    --md-background: #F8FAFB;

    /* ── Text (Light) ── */
    --dm-text: #191C1E;
    --dm-text-muted: #40484E;
    --dm-text-inverse: #FFFFFF;

    /* ── Semantic (Light) ── */
    --dm-success: #198639;
    --dm-error: #BA1A1A;
    --dm-warning: #B07A00;
    --dm-info: #0C6E9C;

    /* ── Borders (Light) ── */
    --dm-outline: #70787F;
    --dm-outline-variant: #BFC8CF;
    --dm-accent-secondary: #5958A4;

    /* ── Logo ── */
    --dm-logo-machine: #252161;

    /* ── Semantic roles (write new code with these) ── */
    --color-primary: var(--dm-cyan);
    --color-primary-strong: var(--dm-cyan-ink);   /* button-bg w/ white text (AA) */
    --color-on-primary: #FFFFFF;
    --color-link: var(--dm-cyan-ink);
    --color-secondary: var(--dm-slate);
    --color-secondary-soft: rgba(45, 68, 112, 0.10);
    --color-tertiary: var(--dm-emerald);
    --color-tertiary-soft: rgba(26, 143, 80, 0.10);
    --color-primary-soft: var(--dm-cyan-subtle);
    --color-primary-muted: var(--dm-cyan-muted);
    --color-bg: var(--dm-bg);
    --color-surface: var(--dm-surface);
    --color-surface-2: var(--md-surface-container);
    --color-surface-3: var(--dm-surface-high);
    --color-surface-sunken: var(--dm-surface-low);
    --color-on-surface: var(--dm-text);
    --color-on-surface-muted: var(--dm-text-muted);
    --color-border: var(--dm-outline-variant);
    --color-outline: var(--dm-outline);
    --color-success: var(--dm-success);
    --color-error: var(--dm-error);
    --color-warning: var(--dm-warning);
    --color-info: var(--dm-info);

    /* ── Form factor ── */
    --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
    --elev-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --elev-2: 0 2px 8px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
    --elev-3: 0 8px 24px rgba(16,24,40,.08), 0 24px 48px rgba(16,24,40,.10);
    --elev-primary: 0 8px 24px rgba(36,169,224,.28);
    --ease-standard: cubic-bezier(.4,0,.2,1);
    --ease-emphasized: cubic-bezier(.2,0,0,1);
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
    --ring: 0 0 0 3px rgba(36,169,224,.40);

    /* ── Code Syntax (Light) ── */
    --dm-code-keyword: #cf222e;
    --dm-code-type: #0550ae;
    --dm-code-string: #0a3069;
    --dm-code-number: #0550ae;
    --dm-code-comment: #6e7781;
    --dm-code-function: #8250df;
    --dm-code-macro: #953800;
    --dm-code-text: #24292f;
    --dm-code-bg: #f6f8fa;
}

.dark, [data-theme="drmachine-dark"] {
    color-scheme: dark;           /* native controls match dark mode even on class-only toggle */

    /* ── Brand (Dark) ── */
    --dm-cyan-ink: #24A9E0;        /* on dark, plain cyan is readable */

    /* ── Surfaces (Dark) — corrected to brand guide ── */
    --dm-bg: #121416;
    --dm-surface: #1E2022;
    --dm-surface-low: #1A1C1E;
    --dm-surface-high: #282A2C;

    --md-surface: #1E2022;
    --md-on-surface: #E2E2E5;
    --md-on-surface-variant: #BDC8D0;
    --md-surface-container-low: #1A1C1E;
    --md-surface-container: #1E2022;
    --md-surface-container-high: #282A2C;
    --md-background: #121416;

    /* ── Text (Dark) ── */
    --dm-text: #E2E2E5;
    --dm-text-muted: #BDC8D0;

    /* ── Secondary / Tertiary (Dark) ── */
    --dm-slate: #7B9FCC;
    --dm-slate-soft: rgba(123, 159, 204, 0.14);
    --dm-emerald: #6DD58C;
    --dm-emerald-soft: rgba(109, 213, 140, 0.12);

    /* ── Semantic (Dark) ── */
    --dm-success: #6DD58C;
    --dm-error: #FFB4AB;
    --dm-warning: #FFDEA1;
    --dm-info: #5BC2EF;

    /* ── Borders (Dark) ── */
    --dm-outline: #88929A;
    --dm-outline-variant: #3E484F;
    --dm-accent-secondary: #C2C1FF;

    /* ── Logo ── */
    --dm-logo-machine: #DAE5ED;

    /* ── Semantic role overrides (Dark) ── */
    --color-primary-strong: var(--dm-cyan);
    --color-link: var(--dm-cyan-bright);
    --color-secondary: var(--dm-slate-light);
    --color-secondary-soft: rgba(123, 159, 204, 0.14);
    --color-tertiary: var(--dm-emerald-light);
    --color-tertiary-soft: rgba(109, 213, 140, 0.12);

    --elev-1: 0 1px 2px rgba(0,0,0,.30);
    --elev-2: 0 8px 24px rgba(0,0,0,.45);
    --elev-3: 0 24px 48px rgba(0,0,0,.55);
    --elev-primary: 0 10px 30px rgba(36,169,224,.30);
    --ring: 0 0 0 3px rgba(91,194,239,.50);

    /* ── Code Syntax (Dark) ── */
    --dm-code-keyword: #ff7b72;
    --dm-code-type: #79c0ff;
    --dm-code-string: #a5d6ff;
    --dm-code-number: #79c0ff;
    --dm-code-comment: #8b949e;
    --dm-code-function: #d2a8ff;
    --dm-code-macro: #f0883e;
    --dm-code-text: #c9d1d9;
    --dm-code-bg: #161b22;
}