/* Design tokens v1 — dark gammas only. Add, do not replace app.css :root names. */

:root {
    --surface: var(--bg1);
    --surface-2: #243044;
    --border-hover: var(--border2);
    --brand: var(--purple);
    --brand-light: #C084FC;
    --brand-dark: var(--purple2);
    --dim: #64748B;
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-chip: 4px;
    --dash-pad: 16px;
    --dash-gap: 16px;
    --dash-row: 42px;
    --status-available: #4ADE80;
    --status-booked: #FFB020;
    --status-sold: #F0554E;
    --status-sold-full: #35C36B;
    --status-frozen: var(--brand-light);
    --status-nfs: #9CA3AF;
    --terms-full: #38BDF8;
    --terms-inst: #FACC15;
    --chart-1: var(--fact);
    --chart-2: var(--plan);
    --chart-3: #38BDF8;
    --chart-4: var(--attn);
    --chart-5: #14B8A6;
    --chart-6: #06B6D4;
    --chart-7: #A3E635;
    --chart-8: var(--lag);
    --chart-villa: #14B8A6;
}

/* Semantic lock — same in every gamma (html always has data-gamma after boot). */
html[data-gamma],
[data-gamma] {
    --plan: #5694F8;
    --fact: #35C36B;
    --rem: #94A3B8;
    --attn: #F0A93B;
    --lag: #F26A62;
}

html[data-gamma="slate"],
[data-gamma="slate"] {
    --bg: #0F172A;
    --surface: #1E293B;
    --surface-2: #243044;
    --border: #334155;
    --border-hover: #475569;
    --text: #F1F5F9;
    --muted: #94A3B8;
    --dim: #64748B;
    --brand: #A855F7;
    --brand-light: #C084FC;
    --brand-dark: #7C3AED;
    --mud-palette-primary: #A855F7;
    --mud-palette-primary-lighten: #C084FC;
    --mud-palette-primary-darken: #7C3AED;
    --mud-palette-primary-rgb: 168, 85, 247;
}

html[data-gamma="graphite"],
[data-gamma="graphite"] {
    --bg: #141619;
    --surface: #1E2126;
    --surface-2: #262A31;
    --border: #343941;
    --border-hover: #454B55;
    --text: #EEF0F2;
    --muted: #98A0AB;
    --dim: #6B727C;
    --brand: #6172F3;
    --brand-light: #8B98F7;
    --brand-dark: #4553D6;
    --mud-palette-primary: #6172F3;
    --mud-palette-primary-lighten: #8B98F7;
    --mud-palette-primary-darken: #4553D6;
    --mud-palette-primary-rgb: 97, 114, 243;
}

html[data-gamma="deepsea"],
[data-gamma="deepsea"] {
    --bg: #0A1B1E;
    --surface: #122A2E;
    --surface-2: #183338;
    --border: #244449;
    --border-hover: #33585E;
    --text: #E8F1F1;
    --muted: #8FA9AB;
    --dim: #647E80;
    --brand: #2DD4BF;
    --brand-light: #5EE7D5;
    --brand-dark: #14B8A6;
    --mud-palette-primary: #2DD4BF;
    --mud-palette-primary-lighten: #5EE7D5;
    --mud-palette-primary-darken: #14B8A6;
    --mud-palette-primary-rgb: 45, 212, 191;
}

html[data-gamma="sand"],
[data-gamma="sand"] {
    --bg: #16120F;
    --surface: #221D18;
    --surface-2: #2A241E;
    --border: #3A322A;
    --border-hover: #4C4239;
    --text: #F3EEE7;
    --muted: #A99C8D;
    --dim: #7A7063;
    --brand: #C2683F;
    --brand-light: #D98A63;
    --brand-dark: #A24F2C;
    --mud-palette-primary: #C2683F;
    --mud-palette-primary-lighten: #D98A63;
    --mud-palette-primary-darken: #A24F2C;
    --mud-palette-primary-rgb: 194, 104, 63;
}

html[data-gamma="nordic"],
[data-gamma="nordic"] {
    --bg: #12161A;
    --surface: #1B2127;
    --surface-2: #222931;
    --border: #2F3944;
    --border-hover: #3F4B58;
    --text: #EDF1F5;
    --muted: #93A0AD;
    --dim: #68757F;
    --brand: #7FA6C9;
    --brand-light: #A2C1DB;
    --brand-dark: #5D85A8;
    --mud-palette-primary: #7FA6C9;
    --mud-palette-primary-lighten: #A2C1DB;
    --mud-palette-primary-darken: #5D85A8;
    --mud-palette-primary-rgb: 127, 166, 201;
}

html[data-gamma="plum"],
[data-gamma="plum"] {
    --bg: #16101C;
    --surface: #221829;
    --surface-2: #291E31;
    --border: #382A42;
    --border-hover: #4A3856;
    --text: #F2ECF4;
    --muted: #A493AE;
    --dim: #77687F;
    --brand: #E879A6;
    --brand-light: #F0A0C2;
    --brand-dark: #C95886;
    --mud-palette-primary: #E879A6;
    --mud-palette-primary-lighten: #F0A0C2;
    --mud-palette-primary-darken: #C95886;
    --mud-palette-primary-rgb: 232, 121, 166;
}

html[data-gamma] {
    --mud-palette-background: var(--bg);
    --mud-palette-surface: var(--surface);
    --mud-palette-text-primary: var(--text);
    --mud-palette-text-secondary: var(--muted);
    --mud-palette-appbar-background: var(--bg);
    --mud-palette-drawer-background: var(--bg);
    --mud-palette-drawer-text: var(--text);
    --mud-palette-drawer-icon: var(--muted);
    --mud-palette-lines-default: var(--border);
    --mud-palette-divider: var(--border);
    --status-frozen: var(--brand-light);
    --chart-1: var(--fact);
    --chart-2: var(--plan);
    --chart-4: var(--attn);
    --chart-8: var(--lag);
}

html[data-radius="sharp"] {
    --radius-control: 4px;
    --radius-card: 6px;
    --radius-chip: 3px;
}

html[data-radius="canon"] {
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-chip: 4px;
}

html[data-radius="soft"] {
    --radius-control: 12px;
    --radius-card: 18px;
    --radius-chip: 8px;
}

html[data-density="compact"] {
    --dash-pad: 12px;
    --dash-gap: 10px;
    --dash-row: 34px;
}

html[data-density="canon"] {
    --dash-pad: 16px;
    --dash-gap: 16px;
    --dash-row: 42px;
}

html[data-density="roomy"] {
    --dash-pad: 24px;
    --dash-gap: 24px;
    --dash-row: 52px;
}

/* Pin unmigrated screens to canonical slate (as-is hex, including old plan/fact). */
[data-legacy-dark] {
    --bg: #0F172A;
    --bg1: #1E293B;
    --bg2: #1E293B;
    --surface: #1E293B;
    --surface-2: #243044;
    --border: #334155;
    --border2: #475569;
    --border-hover: #475569;
    --text: #F1F5F9;
    --muted: #94A3B8;
    --sub: #94A3B8;
    --dim: #64748B;
    --purple: #A855F7;
    --purple2: #7C3AED;
    --brand: #A855F7;
    --brand-light: #C084FC;
    --brand-dark: #7C3AED;
    --gold: #F59E0B;
    --green: #22C55E;
    --red: #EF4444;
    --blue: #3B82F6;
    --teal: #14B8A6;
    --plan: #3B82F6;
    --fact: #22C55E;
    --rem: #94A3B8;
    --attn: #F59E0B;
    --lag: #EF4444;
    --mud-palette-primary: #A855F7;
    --mud-palette-primary-lighten: #C084FC;
    --mud-palette-primary-darken: #7C3AED;
    --mud-palette-primary-rgb: 168, 85, 247;
    --mud-palette-background: #0F172A;
    --mud-palette-surface: #1E293B;
    --mud-palette-text-primary: #F1F5F9;
    --mud-palette-text-secondary: #94A3B8;
    --mud-palette-appbar-background: #0B1220;
    --mud-palette-drawer-background: #0B1220;
    --mud-palette-lines-default: #334155;
    --mud-palette-divider: #334155;
}

/* Density / radius: only inside dashboard containers (§0.4) */
html[data-density] .inv-dash,
html[data-density] .sales-dash,
html[data-density] .deep-dash,
html[data-density] .plan-dash,
html[data-density] .fin-dash,
html[data-density] .inst-dash {
    gap: var(--dash-gap);
}

html[data-density] .inv-dash .card,
html[data-density] .sales-dash .card,
html[data-density] .deep-dash .card,
html[data-density] .plan-dash .card,
html[data-density] .fin-dash .card,
html[data-density] .inst-dash .card {
    padding: var(--dash-pad);
}

html[data-radius] .inv-dash .card,
html[data-radius] .sales-dash .card,
html[data-radius] .sales-dash .kpi4-item,
html[data-radius] .sales-dash .inst-tile,
html[data-radius] .sales-dash .ai-strip,
html[data-radius] .deep-dash .card,
html[data-radius] .deep-dash .kpi4-item,
html[data-radius] .deep-dash .inst-tile,
html[data-radius] .deep-dash .ai-strip,
html[data-radius] .plan-dash .card,
html[data-radius] .fin-dash .card,
html[data-radius] .inst-dash .card,
html[data-radius] .inst-dash .inst-tile {
    border-radius: var(--radius-card) !important;
}

html[data-radius] .inv-dash .chip,
html[data-radius] .inv-dash .pill,
html[data-radius] .sales-dash .chip,
html[data-radius] .sales-dash .pill,
html[data-radius] .deep-dash .chip,
html[data-radius] .deep-dash .pill,
html[data-radius] .plan-dash .plan-tab,
html[data-radius] .fin-dash .fin-tab,
html[data-radius] .inst-dash .chip {
    border-radius: var(--radius-chip) !important;
}

html[data-density] .inv-dash .tbl td,
html[data-density] .sales-dash .tbl td,
html[data-density] .deep-dash .tbl td,
html[data-density] .plan-dash table td,
html[data-density] .fin-dash table td,
html[data-density] .inst-dash .tbl td {
    height: var(--dash-row);
    box-sizing: border-box;
}

html[data-glass="on"][data-radius="soft"] .inv-dash.dash-shell .card,
html[data-glass="on"][data-radius="soft"] .sales-dash.dash-shell .card,
html[data-glass="on"][data-radius="soft"] .deep-dash.dash-shell .card,
html[data-glass="on"][data-radius="soft"] .plan-dash .card,
html[data-glass="on"][data-radius="soft"] .fin-dash .card,
html[data-glass="on"][data-radius="soft"] .inst-dash.dash-shell .card {
    background: var(--dash-glass-bg, rgba(255, 255, 255, 0.07)) !important;
    -webkit-backdrop-filter: blur(var(--dash-glass-blur, 28px)) saturate(180%);
    backdrop-filter: blur(var(--dash-glass-blur, 28px)) saturate(180%);
    border: 1px solid var(--dash-glass-border, rgba(255, 255, 255, 0.16)) !important;
    box-shadow: var(--dash-glass-shadow, 0 10px 40px rgba(0, 0, 0, 0.38));
}

.dsm-preview .status-available { color: var(--status-available); }
.dsm-preview .status-sold { color: var(--status-sold); }
.dsm-preview .status-text {
    display: inline-block;
    font-family: "DM Mono", ui-monospace, monospace;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--radius-chip);
    border: 1px solid var(--border);
}