/**
 * JSCRM theme system (Phase D0)
 * - data-density: relaxed | normal | condensed
 * - data-theme: 1..11 (see 00-FILES/design-system.md)
 * - .dark on <html> for dark mode
 *
 * Theme 6 = JSAdmin Classic (#667eea → #764ba2)
 * Theme 11 = Studioz (JokerStudioz production — gold #c39968 / orange #ff7201 / charcoal)
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

/* ---------- Shared defaults (overridden per theme) ---------- */
html {
	--color-brand: 37 99 235;
	--color-brand-end: 79 70 229;
	--color-brand-fg: 255 255 255;
	--color-accent: 79 70 229;
	--color-ink: 17 24 39;
	--color-muted: 107 114 128;
	--color-surface: 249 250 251;
	--color-surface-muted: 243 244 246;
	--color-panel: 255 255 255;
	--color-line: 229 231 235;

	--chrome-style: brand-gradient;
	--gradient-brand: linear-gradient(135deg, rgb(var(--color-brand)) 0%, rgb(var(--color-brand-end)) 100%);
	--gradient-chrome: var(--gradient-brand);
	--gradient-wa: linear-gradient(135deg, #128C7E 0%, #25D366 20%, #25D366 80%, #075E54 100%);

	--radius-card: 0.75rem;
	--shadow-card: 0 1px 2px rgb(0 0 0 / 0.05);
	--shadow-kpi: 0 10px 15px -3px rgb(0 0 0 / 0.12);

	--status-success-bg: 220 252 231;
	--status-success-border: 34 197 94;
	--status-success-ink: 22 101 52;
	--status-warning-bg: 254 249 195;
	--status-warning-border: 234 179 8;
	--status-warning-ink: 133 77 14;
	--status-danger-bg: 254 226 226;
	--status-danger-border: 239 68 68;
	--status-danger-ink: 153 27 27;
	--status-info-bg: 219 234 254;
	--status-info-border: 59 130 246;
	--status-info-ink: 30 64 175;

	--kpi-a-from: 239 68 68;
	--kpi-a-to: 234 88 12;
	--kpi-b-from: 245 158 11;
	--kpi-b-to: 234 179 8;
	--kpi-c-from: 37 99 235;
	--kpi-c-to: 79 70 229;
	--kpi-d-from: 20 184 166;
	--kpi-d-to: 16 185 129;

	--sidebar-w: 14rem;
	--bottom-tabs-h: 4.25rem;
}

/* ---------- Density (Relaxed ≈ JSAdmin) ---------- */
html[data-density='relaxed'] {
	--space-x: 1.5rem;
	--space-y: 1rem;
	--space-section: 2rem;
	--space-gap: 1.25rem;
	--radius: 0.5rem;
	--text-base: 1rem;
	--radius-card: 0.75rem;
}

html[data-density='normal'] {
	--space-x: 1rem;
	--space-y: 0.625rem;
	--space-section: 1.25rem;
	--space-gap: 0.875rem;
	--radius: 0.375rem;
	--text-base: 0.9375rem;
	--radius-card: 0.5rem;
}

html[data-density='condensed'] {
	--space-x: 0.75rem;
	--space-y: 0.375rem;
	--space-section: 0.875rem;
	--space-gap: 0.5rem;
	--radius: 0.25rem;
	--text-base: 0.875rem;
	--radius-card: 0.375rem;
}

/* ==========================================================================
   Theme 1 — Boardroom (flat, charcoal/navy, gold accent)
   ========================================================================== */
html[data-theme='1'] {
	--color-brand: 30 58 95;
	--color-brand-end: 30 58 95;
	--color-brand-fg: 255 255 255;
	--color-accent: 180 138 60;
	--color-ink: 15 23 42;
	--color-muted: 100 116 139;
	--color-surface: 248 250 252;
	--color-surface-muted: 241 245 249;
	--color-panel: 255 255 255;
	--color-line: 203 213 225;
	--chrome-style: flat;
	--gradient-brand: none;
	--gradient-chrome: none;
	--radius-card: 0.25rem;
	--shadow-card: none;
	--shadow-kpi: none;
	--kpi-a-from: 30 58 95;
	--kpi-a-to: 30 58 95;
	--kpi-b-from: 51 65 85;
	--kpi-b-to: 51 65 85;
	--kpi-c-from: 180 138 60;
	--kpi-c-to: 180 138 60;
	--kpi-d-from: 71 85 105;
	--kpi-d-to: 71 85 105;
	--status-success-bg: 240 253 244;
	--status-success-border: 22 101 52;
	--status-success-ink: 22 101 52;
	--status-warning-bg: 254 252 232;
	--status-warning-border: 161 98 7;
	--status-warning-ink: 113 63 18;
	--status-danger-bg: 254 242 242;
	--status-danger-border: 153 27 27;
	--status-danger-ink: 127 29 29;
	--status-info-bg: 239 246 255;
	--status-info-border: 30 58 95;
	--status-info-ink: 30 58 95;
}

html.dark[data-theme='1'] {
	--color-brand: 148 163 184;
	--color-brand-end: 148 163 184;
	--color-brand-fg: 15 23 42;
	--color-accent: 212 175 95;
	--color-ink: 226 232 240;
	--color-muted: 148 163 184;
	--color-surface: 15 23 42;
	--color-surface-muted: 30 41 59;
	--color-panel: 30 41 59;
	--color-line: 51 65 85;
	--status-success-bg: 20 40 30;
	--status-success-ink: 134 239 172;
	--status-warning-bg: 45 35 15;
	--status-warning-ink: 253 224 71;
	--status-danger-bg: 45 20 20;
	--status-danger-ink: 252 165 165;
	--status-info-bg: 25 35 55;
	--status-info-ink: 147 197 253;
}

/* ==========================================================================
   Theme 2 — Quiet Harbor (muted teal, soft wash)
   ========================================================================== */
html[data-theme='2'] {
	--color-brand: 15 118 110;
	--color-brand-end: 13 148 136;
	--color-brand-fg: 255 255 255;
	--color-accent: 14 116 144;
	--color-ink: 28 25 23;
	--color-muted: 120 113 108;
	--color-surface: 250 250 249;
	--color-surface-muted: 245 245 244;
	--color-panel: 255 255 255;
	--color-line: 231 229 228;
	--chrome-style: soft;
	--gradient-brand: linear-gradient(135deg, rgb(15 118 110) 0%, rgb(13 148 136) 100%);
	--kpi-a-from: 185 28 28;
	--kpi-a-to: 194 65 12;
	--kpi-b-from: 180 83 9;
	--kpi-b-to: 202 138 4;
	--kpi-c-from: 15 118 110;
	--kpi-c-to: 14 116 144;
	--kpi-d-from: 21 128 61;
	--kpi-d-to: 13 148 136;
}

html.dark[data-theme='2'] {
	--color-brand: 94 234 212;
	--color-brand-end: 45 212 191;
	--color-brand-fg: 19 40 38;
	--color-accent: 56 189 248;
	--color-ink: 245 245 244;
	--color-muted: 168 162 158;
	--color-surface: 28 25 23;
	--color-surface-muted: 41 37 36;
	--color-panel: 41 37 36;
	--color-line: 68 64 60;
}

/* ==========================================================================
   Theme 3 — Clearwater (default modern blue SaaS)
   ========================================================================== */
html[data-theme='3'] {
	--color-brand: 37 99 235;
	--color-brand-end: 79 70 229;
	--color-brand-fg: 255 255 255;
	--color-accent: 79 70 229;
	--color-ink: 17 24 39;
	--color-muted: 107 114 128;
	--color-surface: 249 250 251;
	--color-surface-muted: 243 244 246;
	--color-panel: 255 255 255;
	--color-line: 229 231 235;
	--chrome-style: brand-gradient;
	--kpi-a-from: 239 68 68;
	--kpi-a-to: 234 88 12;
	--kpi-b-from: 245 158 11;
	--kpi-b-to: 234 179 8;
	--kpi-c-from: 37 99 235;
	--kpi-c-to: 79 70 229;
	--kpi-d-from: 20 184 166;
	--kpi-d-to: 16 185 129;
}

html.dark[data-theme='3'] {
	--color-brand: 96 165 250;
	--color-brand-end: 129 140 248;
	--color-brand-fg: 15 23 42;
	--color-accent: 129 140 248;
	--color-ink: 243 244 246;
	--color-muted: 156 163 175;
	--color-surface: 17 24 39;
	--color-surface-muted: 31 41 55;
	--color-panel: 31 41 55;
	--color-line: 55 65 81;
}

/* ==========================================================================
   Theme 4 — Canopy (deep green + warm paper)
   ========================================================================== */
html[data-theme='4'] {
	--color-brand: 22 101 52;
	--color-brand-end: 21 128 61;
	--color-brand-fg: 255 255 255;
	--color-accent: 180 83 9;
	--color-ink: 28 25 23;
	--color-muted: 120 113 108;
	--color-surface: 250 248 244;
	--color-surface-muted: 245 240 232;
	--color-panel: 255 253 250;
	--color-line: 231 220 205;
	--chrome-style: soft;
	--gradient-brand: linear-gradient(135deg, rgb(22 101 52) 0%, rgb(21 128 61) 100%);
	--kpi-a-from: 185 28 28;
	--kpi-a-to: 194 65 12;
	--kpi-b-from: 180 83 9;
	--kpi-b-to: 217 119 6;
	--kpi-c-from: 22 101 52;
	--kpi-c-to: 4 120 87;
	--kpi-d-from: 146 64 14;
	--kpi-d-to: 180 83 9;
}

html.dark[data-theme='4'] {
	--color-brand: 134 239 172;
	--color-brand-end: 74 222 128;
	--color-brand-fg: 20 40 25;
	--color-accent: 251 191 36;
	--color-ink: 245 245 244;
	--color-muted: 168 162 158;
	--color-surface: 20 28 22;
	--color-surface-muted: 30 40 32;
	--color-panel: 30 40 32;
	--color-line: 55 70 58;
}

/* ==========================================================================
   Theme 5 — Ember (warm neutrals + terracotta)
   ========================================================================== */
html[data-theme='5'] {
	--color-brand: 194 65 12;
	--color-brand-end: 234 88 12;
	--color-brand-fg: 255 255 255;
	--color-accent: 225 29 72;
	--color-ink: 28 25 23;
	--color-muted: 120 113 108;
	--color-surface: 250 250 249;
	--color-surface-muted: 245 245 244;
	--color-panel: 255 255 255;
	--color-line: 231 229 228;
	--chrome-style: brand-gradient;
	--kpi-a-from: 220 38 38;
	--kpi-a-to: 194 65 12;
	--kpi-b-from: 234 88 12;
	--kpi-b-to: 245 158 11;
	--kpi-c-from: 194 65 12;
	--kpi-c-to: 225 29 72;
	--kpi-d-from: 180 83 9;
	--kpi-d-to: 146 64 14;
}

html.dark[data-theme='5'] {
	--color-brand: 251 146 60;
	--color-brand-end: 251 113 133;
	--color-brand-fg: 40 20 10;
	--color-accent: 251 113 133;
	--color-ink: 245 245 244;
	--color-muted: 168 162 158;
	--color-surface: 28 25 23;
	--color-surface-muted: 41 37 36;
	--color-panel: 41 37 36;
	--color-line: 68 64 60;
}

/* ==========================================================================
   Theme 6 — JSAdmin Classic (#667eea → #764ba2)
   ========================================================================== */
html[data-theme='6'] {
	--color-brand: 102 126 234;
	--color-brand-end: 118 75 162;
	--color-brand-fg: 255 255 255;
	--color-accent: 118 75 162;
	--color-ink: 17 24 39;
	--color-muted: 107 114 128;
	--color-surface: 245 247 255;
	--color-surface-muted: 237 240 255;
	--color-panel: 255 255 255;
	--color-line: 220 225 245;
	--chrome-style: brand-gradient;
	--gradient-brand: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-chrome: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-wa: linear-gradient(135deg, #128C7E 0%, #25D366 20%, #25D366 80%, #075E54 100%);
	--radius-card: 0.75rem;
	--shadow-kpi: 0 10px 15px -3px rgb(102 126 234 / 0.25);
	--kpi-a-from: 239 68 68;
	--kpi-a-to: 234 88 12;
	--kpi-b-from: 245 158 11;
	--kpi-b-to: 234 179 8;
	--kpi-c-from: 139 92 246;
	--kpi-c-to: 147 51 234;
	--kpi-d-from: 20 184 166;
	--kpi-d-to: 16 185 129;
	--status-success-bg: 220 252 231;
	--status-success-border: 34 197 94;
	--status-success-ink: 22 101 52;
	--status-warning-bg: 254 249 195;
	--status-warning-border: 234 179 8;
	--status-warning-ink: 133 77 14;
	--status-danger-bg: 254 226 226;
	--status-danger-border: 239 68 68;
	--status-danger-ink: 153 27 27;
	--status-info-bg: 237 233 254;
	--status-info-border: 124 58 237;
	--status-info-ink: 91 33 182;
}

html.dark[data-theme='6'] {
	--color-brand: 165 180 252;
	--color-brand-end: 196 181 253;
	--color-brand-fg: 30 27 75;
	--color-accent: 196 181 253;
	--color-ink: 243 244 246;
	--color-muted: 186 198 220;
	--color-surface: 17 18 36;
	--color-surface-muted: 30 32 58;
	--color-panel: 30 32 58;
	--color-line: 55 58 95;
	--gradient-brand: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-chrome: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	/* Status chips must stay readable on dark panels (emails/labels/badges/modals) */
	--status-success-bg: 6 40 30;
	--status-success-border: 52 211 153;
	--status-success-ink: 167 243 208;
	--status-warning-bg: 55 40 10;
	--status-warning-border: 250 204 21;
	--status-warning-ink: 253 224 71;
	--status-danger-bg: 60 18 25;
	--status-danger-border: 248 113 113;
	--status-danger-ink: 254 202 202;
	--status-info-bg: 40 30 70;
	--status-info-border: 167 139 250;
	--status-info-ink: 221 214 254;
}

/* ==========================================================================
   Theme 7 — Neon Circuit (dark-first cyan + magenta)
   ========================================================================== */
html[data-theme='7'] {
	--color-brand: 34 211 238;
	--color-brand-end: 232 121 249;
	--color-brand-fg: 15 23 42;
	--color-accent: 232 121 249;
	--color-ink: 226 232 240;
	--color-muted: 148 163 184;
	--color-surface: 10 15 30;
	--color-surface-muted: 15 23 42;
	--color-panel: 15 23 42;
	--color-line: 51 65 85;
	--chrome-style: glow;
	--gradient-brand: linear-gradient(135deg, #22d3ee 0%, #e879f9 100%);
	--gradient-chrome: linear-gradient(135deg, #22d3ee 0%, #a855f7 50%, #e879f9 100%);
	--shadow-kpi: 0 0 24px rgb(34 211 238 / 0.25);
	--kpi-a-from: 244 63 94;
	--kpi-a-to: 251 146 60;
	--kpi-b-from: 250 204 21;
	--kpi-b-to: 34 211 238;
	--kpi-c-from: 34 211 238;
	--kpi-c-to: 232 121 249;
	--kpi-d-from: 52 211 153;
	--kpi-d-to: 34 211 238;
	--status-success-bg: 6 40 35;
	--status-success-border: 52 211 153;
	--status-success-ink: 110 231 183;
	--status-warning-bg: 45 35 10;
	--status-warning-border: 250 204 21;
	--status-warning-ink: 253 224 71;
	--status-danger-bg: 45 15 25;
	--status-danger-border: 244 63 94;
	--status-danger-ink: 251 113 133;
	--status-info-bg: 15 40 55;
	--status-info-border: 34 211 238;
	--status-info-ink: 103 232 249;
}

html.dark[data-theme='7'] {
	/* Theme 7 is dark-first; light mode already darkish — keep contrast */
	--color-brand: 34 211 238;
	--color-brand-end: 232 121 249;
	--color-brand-fg: 15 23 42;
	--color-ink: 241 245 249;
	--color-surface: 2 6 23;
	--color-surface-muted: 15 23 42;
	--color-panel: 15 23 42;
	--color-line: 30 41 59;
}

/* Light override when user forces light on Neon Circuit */
html:not(.dark)[data-theme='7'] {
	--color-brand: 8 145 178;
	--color-brand-end: 192 38 211;
	--color-brand-fg: 255 255 255;
	--color-accent: 192 38 211;
	--color-ink: 15 23 42;
	--color-muted: 100 116 139;
	--color-surface: 248 250 252;
	--color-surface-muted: 241 245 249;
	--color-panel: 255 255 255;
	--color-line: 226 232 240;
	--status-success-bg: 220 252 231;
	--status-success-ink: 22 101 52;
	--status-warning-bg: 254 249 195;
	--status-warning-ink: 133 77 14;
	--status-danger-bg: 254 226 226;
	--status-danger-ink: 153 27 27;
	--status-info-bg: 207 250 254;
	--status-info-ink: 14 116 144;
}

/* ==========================================================================
   Theme 8 — Triad Flow (teal / indigo / coral)
   ========================================================================== */
html[data-theme='8'] {
	--color-brand: 13 148 136;
	--color-brand-end: 79 70 229;
	--color-brand-fg: 255 255 255;
	--color-accent: 244 63 94;
	--color-ink: 15 23 42;
	--color-muted: 100 116 139;
	--color-surface: 248 250 252;
	--color-surface-muted: 241 245 249;
	--color-panel: 255 255 255;
	--color-line: 226 232 240;
	--chrome-style: triad;
	--gradient-brand: linear-gradient(135deg, #0d9488 0%, #4f46e5 50%, #f43f5e 100%);
	--gradient-chrome: linear-gradient(135deg, #0d9488 0%, #4f46e5 50%, #f43f5e 100%);
	--kpi-a-from: 244 63 94;
	--kpi-a-to: 249 115 22;
	--kpi-b-from: 245 158 11;
	--kpi-b-to: 13 148 136;
	--kpi-c-from: 13 148 136;
	--kpi-c-to: 79 70 229;
	--kpi-d-from: 79 70 229;
	--kpi-d-to: 244 63 94;
}

html.dark[data-theme='8'] {
	--color-brand: 45 212 191;
	--color-brand-end: 129 140 248;
	--color-brand-fg: 15 23 42;
	--color-accent: 251 113 133;
	--color-ink: 241 245 249;
	--color-muted: 148 163 184;
	--color-surface: 15 23 42;
	--color-surface-muted: 30 41 59;
	--color-panel: 30 41 59;
	--color-line: 51 65 85;
}

/* ==========================================================================
   Theme 9 — Spectrum (ordered rainbow KPIs)
   ========================================================================== */
html[data-theme='9'] {
	--color-brand: 124 58 237;
	--color-brand-end: 236 72 153;
	--color-brand-fg: 255 255 255;
	--color-accent: 14 165 233;
	--color-ink: 24 24 27;
	--color-muted: 113 113 122;
	--color-surface: 250 250 252;
	--color-surface-muted: 244 244 248;
	--color-panel: 255 255 255;
	--color-line: 228 228 235;
	--chrome-style: spectrum;
	--gradient-brand: linear-gradient(135deg, #ef4444 0%, #f59e0b 20%, #22c55e 40%, #06b6d4 60%, #6366f1 80%, #ec4899 100%);
	--gradient-chrome: linear-gradient(90deg, #ef4444 0%, #f59e0b 25%, #22c55e 50%, #3b82f6 75%, #a855f7 100%);
	--kpi-a-from: 239 68 68;
	--kpi-a-to: 249 115 22;
	--kpi-b-from: 234 179 8;
	--kpi-b-to: 34 197 94;
	--kpi-c-from: 6 182 212;
	--kpi-c-to: 99 102 241;
	--kpi-d-from: 168 85 247;
	--kpi-d-to: 236 72 153;
}

html.dark[data-theme='9'] {
	--color-brand: 167 139 250;
	--color-brand-end: 244 114 182;
	--color-brand-fg: 24 16 40;
	--color-accent: 56 189 248;
	--color-ink: 244 244 245;
	--color-muted: 161 161 170;
	--color-surface: 24 24 32;
	--color-surface-muted: 36 36 48;
	--color-panel: 36 36 48;
	--color-line: 55 55 72;
}

/* ==========================================================================
   Theme 10 — Bubblegum (pink → lavender → mint candy)
   ========================================================================== */
html[data-theme='10'] {
	--color-brand: 236 72 153;
	--color-brand-end: 167 139 250;
	--color-brand-fg: 255 255 255;
	--color-accent: 52 211 153;
	--color-ink: 49 46 58;
	--color-muted: 113 113 122;
	--color-surface: 255 247 252;
	--color-surface-muted: 252 242 250;
	--color-panel: 255 255 255;
	--color-line: 251 207 232;
	--chrome-style: candy;
	--gradient-brand: linear-gradient(135deg, #ec4899 0%, #a78bfa 50%, #34d399 100%);
	--gradient-chrome: linear-gradient(135deg, #f9a8d4 0%, #c4b5fd 50%, #6ee7b7 100%);
	--kpi-a-from: 244 63 94;
	--kpi-a-to: 236 72 153;
	--kpi-b-from: 251 146 60;
	--kpi-b-to: 250 204 21;
	--kpi-c-from: 236 72 153;
	--kpi-c-to: 167 139 250;
	--kpi-d-from: 167 139 250;
	--kpi-d-to: 52 211 153;
}

html.dark[data-theme='10'] {
	--color-brand: 244 114 182;
	--color-brand-end: 196 181 253;
	--color-brand-fg: 40 20 35;
	--color-accent: 110 231 183;
	--color-ink: 250 245 255;
	--color-muted: 196 181 210;
	--color-surface: 30 20 35;
	--color-surface-muted: 45 30 50;
	--color-panel: 45 30 50;
	--color-line: 80 50 90;
}

/* ==========================================================================
   Theme 11 — Studioz (JokerStudioz production; dark-first gold + orange)
   Brand: gold #c39968, orange #ff7201, charcoal stages from jokerstudioz.com
   ========================================================================== */
html[data-theme='11'],
html.dark[data-theme='11'] {
	--color-brand: 195 153 104;
	--color-brand-end: 255 114 1;
	--color-brand-fg: 44 46 45;
	--color-accent: 255 114 1;
	--color-ink: 242 242 242;
	--color-muted: 196 193 188; /* slightly warmer/lighter than #cccbcb for AA on #111 */
	--color-surface: 17 17 17;
	--color-surface-muted: 26 26 26;
	--color-panel: 28 28 28;
	--color-line: 64 64 65;
	--chrome-style: soft;
	--gradient-brand: linear-gradient(135deg, #c39968 0%, #ff7201 100%);
	--gradient-chrome: linear-gradient(180deg, #111111 0%, #1a1a1a 100%);
	--gradient-wa: linear-gradient(135deg, #00ba85 0%, #075E54 100%);
	--radius-card: 0.375rem;
	--shadow-card: 0 1px 2px rgb(0 0 0 / 0.35);
	--shadow-kpi: 0 0 20px rgb(195 153 104 / 0.15);
	--kpi-a-from: 239 68 68;
	--kpi-a-to: 255 114 1;
	--kpi-b-from: 255 114 1;
	--kpi-b-to: 195 153 104;
	--kpi-c-from: 195 153 104;
	--kpi-c-to: 255 114 1;
	--kpi-d-from: 0 186 133;
	--kpi-d-to: 195 153 104;
	--status-success-bg: 6 40 32;
	--status-success-border: 0 186 133;
	--status-success-ink: 110 231 183;
	--status-warning-bg: 45 28 8;
	--status-warning-border: 255 114 1;
	--status-warning-ink: 253 186 116;
	--status-danger-bg: 45 15 15;
	--status-danger-border: 239 68 68;
	--status-danger-ink: 252 165 165;
	--status-info-bg: 30 28 20;
	--status-info-border: 195 153 104;
	--status-info-ink: 232 212 176;
}

/* Light variant — landing .section--light (white + cream paper) */
html:not(.dark)[data-theme='11'] {
	--color-brand: 184 140 88; /* gold fill — charcoal-on-gold stays AA */
	--color-brand-end: 230 100 0;
	--color-brand-fg: 44 46 45;
	--color-accent: 184 72 0; /* darker orange for AA links on white */
	--color-ink: 44 46 45;
	--color-muted: 64 64 65;
	--color-surface: 255 255 255;
	--color-surface-muted: 245 242 237;
	--color-panel: 255 255 255;
	--color-line: 204 203 203;
	--gradient-brand: linear-gradient(135deg, #b88c58 0%, #e66400 100%);
	--gradient-chrome: linear-gradient(180deg, #ffffff 0%, #f5f2ed 100%);
	--shadow-card: 0 1px 2px rgb(44 46 45 / 0.06);
	--shadow-kpi: 0 8px 16px rgb(195 153 104 / 0.12);
	--status-success-bg: 220 252 231;
	--status-success-border: 0 186 133;
	--status-success-ink: 6 95 70;
	--status-warning-bg: 255 247 237;
	--status-warning-border: 230 100 0;
	--status-warning-ink: 154 52 18;
	--status-danger-bg: 254 226 226;
	--status-danger-border: 239 68 68;
	--status-danger-ink: 153 27 27;
	--status-info-bg: 250 245 235;
	--status-info-border: 184 140 88;
	--status-info-ink: 92 64 32;
}

/* Brand wordmark / text-brand need deeper gold on white (fill gold stays above) */
html:not(.dark)[data-theme='11'] .jscrm-topbar__brand,
html:not(.dark)[data-theme='11'] .text-brand,
html:not(.dark)[data-theme='11'] a.text-brand {
	color: rgb(156 108 48);
}

/* Theme 11 shell: condensed UI labels, soft charcoal chrome (not loud gradients) */
html[data-theme='11'] {
	--font-condensed: "Barlow Condensed", "Source Sans 3", system-ui, sans-serif;
}

html[data-theme='11'] .jscrm-topbar__brand,
html[data-theme='11'] .jscrm-sidebar__label,
html[data-theme='11'] .jscrm-bottom-tabs__link,
html[data-theme='11'] .jscrm-bottom-tabs__more > summary,
html[data-theme='11'] .jscrm-bottom-tabs__sheet-heading,
html[data-theme='11'] .jscrm-section-card__header,
html[data-theme='11'] .jscrm-table-wrap th,
html[data-theme='11'] .jscrm-btn {
	font-family: var(--font-condensed);
	letter-spacing: 0.04em;
}

html[data-theme='11'] .jscrm-bottom-tabs__sheet-heading,
html[data-theme='11'] .jscrm-table-wrap th {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

html[data-theme='11'] .jscrm-topbar--chrome {
	background: rgb(var(--color-surface));
	border-bottom-color: rgb(var(--color-line));
	color: rgb(var(--color-ink));
}

html[data-theme='11'] .jscrm-topbar--chrome .jscrm-topbar__brand {
	color: rgb(var(--color-brand));
}

html[data-theme='11'] .jscrm-tenant-chip {
	border-color: rgb(var(--color-line));
	background: rgb(var(--color-panel));
	color: rgb(var(--color-ink));
}

html[data-theme='11'] .jscrm-bell__badge {
	background: rgb(var(--color-accent));
	color: #0b0b0b;
}

@media (min-width: 48rem) {
	html[data-theme='11'] .jscrm-sidebar--chrome {
		background: rgb(var(--color-panel));
		border-right-color: rgb(var(--color-line));
		color: rgb(var(--color-ink));
	}
}

html[data-theme='11'] .jscrm-sidebar__link {
	border-left: 3px solid transparent;
	border-radius: 0.25rem;
}

html[data-theme='11'] .jscrm-sidebar__link:hover {
	background: rgb(195 153 104 / 0.08);
}

html[data-theme='11'] .jscrm-sidebar__link.is-active {
	background: rgb(255 114 1 / 0.12);
	color: rgb(var(--color-accent));
	border-left-color: rgb(var(--color-accent));
}

html[data-theme='11'] .jscrm-sidebar__badge {
	background: rgb(var(--color-accent));
	color: #0b0b0b;
}

html[data-theme='11'] .jscrm-bottom-tabs__link.is-active,
html[data-theme='11'] .jscrm-bottom-tabs__more[open] > summary {
	color: rgb(var(--color-accent));
	background: rgb(255 114 1 / 0.12);
}

html[data-theme='11'] .jscrm-bottom-tabs__sheet a:hover,
html[data-theme='11'] .jscrm-bottom-tabs__sheet a:focus-visible {
	background: rgb(195 153 104 / 0.1);
}

html[data-theme='11'] .jscrm-btn--ghost {
	border-color: rgb(var(--color-accent));
	color: rgb(var(--color-ink));
	background: transparent;
}

html[data-theme='11']:not(.dark) .jscrm-btn--ghost {
	border-color: rgb(var(--color-ink));
}

/* Landing .btn--primary is solid gold; orange is hover / ghost / accent */
html[data-theme='11'] .jscrm-btn-primary,
html[data-theme='11'] .jscrm-btn--primary {
	background: rgb(var(--color-brand));
	background-image: none;
	color: rgb(var(--color-brand-fg));
}

html[data-theme='11'] .jscrm-btn-primary:hover,
html[data-theme='11'] .jscrm-btn--primary:hover,
html[data-theme='11'] .jscrm-btn-primary:active,
html[data-theme='11'] .jscrm-btn--primary:active {
	opacity: 1;
	background: rgb(var(--color-brand-end));
	color: #0b0b0b;
	filter: none;
}

html[data-theme='11'] .jscrm-cta-strip {
	flex-wrap: wrap;
}

@media (max-width: 429px) {
	html[data-theme='11'] .jscrm-cta-strip > .jscrm-btn,
	html[data-theme='11'] .jscrm-cta-strip > a.jscrm-btn,
	html[data-theme='11'] .jscrm-cta-strip > span.jscrm-btn {
		flex: 1 1 100%;
	}
}

html[data-theme='11'] .jscrm-table-wrap tbody tr:hover {
	background: rgb(195 153 104 / 0.08);
}

html[data-theme='11'] .jscrm-stage {
	border-color: rgb(var(--color-brand));
	color: rgb(var(--color-brand));
	background: rgb(195 153 104 / 0.1);
}

html[data-theme='11'] .jscrm-section-card__header--brand {
	background: rgb(var(--color-surface-muted));
	color: rgb(var(--color-ink));
	border-bottom: 1px solid rgb(var(--color-line));
	border-left: 3px solid rgb(var(--color-brand));
}

html[data-theme='11'] .jscrm-kanban__card:hover {
	border-color: rgb(var(--color-brand));
	box-shadow: 0 0 0 1px rgb(195 153 104 / 0.35), var(--shadow-card);
}

html[data-theme='11'] .jscrm-kanban__card:focus-within,
html[data-theme='11'] .jscrm-kanban__handle:focus-visible {
	outline: 3px solid rgb(var(--color-accent));
	outline-offset: 2px;
}

html[data-theme='11'] .jscrm-kanban__card.is-dragging {
	opacity: 0.7;
	box-shadow: 0 0 0 3px rgb(195 153 104 / 0.55), var(--shadow-card);
}

html[data-theme='11'] .jscrm-kanban__body.is-drop-target {
	background: rgb(255 114 1 / 0.1);
	outline-color: rgb(var(--color-accent));
}

html[data-theme='11'] .jscrm-timeline__marker,
html[data-theme='11'] .jscrm-timeline li::before {
	background: rgb(var(--color-accent));
	border-color: rgb(var(--color-brand));
}

/* Subtle paper grid on light Studioz main only (not dense tables) */
html:not(.dark)[data-theme='11'] .jscrm-main {
	background-color: rgb(var(--color-surface));
	background-image:
		linear-gradient(rgb(44 46 45 / 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgb(44 46 45 / 0.055) 1px, transparent 1px);
	background-size: 3.2rem 3.2rem;
}

html:not(.dark)[data-theme='11'] .jscrm-table-wrap,
html:not(.dark)[data-theme='11'] .jscrm-modal {
	background-image: none;
}

/* Brand mark in sidebar / mobile topbar */
html[data-theme='11'] .jscrm-sidebar .jscrm-topbar__brand::before,
html[data-theme='11'] .jscrm-topbar .jscrm-topbar__brand.md\:hidden::before {
	content: '';
	display: inline-block;
	width: 1.35rem;
	height: 1.35rem;
	margin-right: 0.45rem;
	vertical-align: -0.2rem;
	background: url('../assets/brand/jokerstudioz/logo-iso-white.png') center / contain no-repeat;
}

html:not(.dark)[data-theme='11'] .jscrm-sidebar .jscrm-topbar__brand::before,
html:not(.dark)[data-theme='11'] .jscrm-topbar .jscrm-topbar__brand.md\:hidden::before {
	filter: invert(1) sepia(0.4) saturate(2) hue-rotate(350deg) brightness(0.55);
}

/* ---------- Legacy header (pre-D1 wrap-nav) ---------- */
.jscrm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(8px);
}

html[data-theme='6'] .jscrm-header--chrome,
html[data-theme='8'] .jscrm-header--chrome,
html[data-theme='9'] .jscrm-header--chrome,
html[data-theme='10'] .jscrm-header--chrome {
	background: var(--gradient-chrome);
	border-bottom-color: transparent;
	color: #fff;
}

html[data-theme='6'] .jscrm-header--chrome .jscrm-brand,
html[data-theme='6'] .jscrm-header--chrome .jscrm-nav-link,
html[data-theme='8'] .jscrm-header--chrome .jscrm-brand,
html[data-theme='8'] .jscrm-header--chrome .jscrm-nav-link,
html[data-theme='9'] .jscrm-header--chrome .jscrm-brand,
html[data-theme='9'] .jscrm-header--chrome .jscrm-nav-link,
html[data-theme='10'] .jscrm-header--chrome .jscrm-brand,
html[data-theme='10'] .jscrm-header--chrome .jscrm-nav-link {
	color: #fff;
}

html[data-theme='6'] .jscrm-header--chrome .jscrm-nav-link:hover,
html[data-theme='8'] .jscrm-header--chrome .jscrm-nav-link:hover,
html[data-theme='9'] .jscrm-header--chrome .jscrm-nav-link:hover,
html[data-theme='10'] .jscrm-header--chrome .jscrm-nav-link:hover {
	background: rgb(255 255 255 / 0.2);
}

/* Theme swatches */
.jscrm-swatch {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius);
	border: 2px solid transparent;
	background: rgb(var(--color-brand));
	cursor: pointer;
}

.jscrm-swatch.is-active {
	border-color: rgb(var(--color-ink));
	box-shadow: 0 0 0 2px rgb(var(--color-panel)), 0 0 0 4px rgb(var(--color-brand));
}

/* Gallery preview scopes (force theme tokens inside a card) */
.jscrm-theme-preview {
	--preview-radius: var(--radius-card);
	border-radius: var(--preview-radius);
	background: rgb(var(--color-surface));
	color: rgb(var(--color-ink));
	border: 1px solid rgb(var(--color-line));
	overflow: hidden;
}

.jscrm-theme-preview[data-preview-theme='1'] { --color-brand: 30 58 95; --color-brand-end: 30 58 95; --color-accent: 180 138 60; --color-surface: 248 250 252; --color-panel: 255 255 255; --color-ink: 15 23 42; --color-muted: 100 116 139; --color-line: 203 213 225; --kpi-a-from: 30 58 95; --kpi-a-to: 30 58 95; --kpi-b-from: 51 65 85; --kpi-b-to: 51 65 85; --kpi-c-from: 180 138 60; --kpi-c-to: 180 138 60; --kpi-d-from: 71 85 105; --kpi-d-to: 71 85 105; --gradient-brand: none; --chrome-style: flat; }
.jscrm-theme-preview[data-preview-theme='2'] { --color-brand: 15 118 110; --color-brand-end: 13 148 136; --color-accent: 14 116 144; --color-surface: 250 250 249; --color-panel: 255 255 255; --color-ink: 28 25 23; --color-muted: 120 113 108; --color-line: 231 229 228; --kpi-a-from: 185 28 28; --kpi-a-to: 194 65 12; --kpi-b-from: 180 83 9; --kpi-b-to: 202 138 4; --kpi-c-from: 15 118 110; --kpi-c-to: 14 116 144; --kpi-d-from: 21 128 61; --kpi-d-to: 13 148 136; --gradient-brand: linear-gradient(135deg, rgb(15 118 110), rgb(13 148 136)); }
.jscrm-theme-preview[data-preview-theme='3'] { --color-brand: 37 99 235; --color-brand-end: 79 70 229; --color-accent: 79 70 229; --color-surface: 249 250 251; --color-panel: 255 255 255; --color-ink: 17 24 39; --color-muted: 107 114 128; --color-line: 229 231 235; --kpi-a-from: 239 68 68; --kpi-a-to: 234 88 12; --kpi-b-from: 245 158 11; --kpi-b-to: 234 179 8; --kpi-c-from: 37 99 235; --kpi-c-to: 79 70 229; --kpi-d-from: 20 184 166; --kpi-d-to: 16 185 129; --gradient-brand: linear-gradient(135deg, rgb(37 99 235), rgb(79 70 229)); }
.jscrm-theme-preview[data-preview-theme='4'] { --color-brand: 22 101 52; --color-brand-end: 21 128 61; --color-accent: 180 83 9; --color-surface: 250 248 244; --color-panel: 255 253 250; --color-ink: 28 25 23; --color-muted: 120 113 108; --color-line: 231 220 205; --kpi-a-from: 185 28 28; --kpi-a-to: 194 65 12; --kpi-b-from: 180 83 9; --kpi-b-to: 217 119 6; --kpi-c-from: 22 101 52; --kpi-c-to: 4 120 87; --kpi-d-from: 146 64 14; --kpi-d-to: 180 83 9; --gradient-brand: linear-gradient(135deg, rgb(22 101 52), rgb(21 128 61)); }
.jscrm-theme-preview[data-preview-theme='5'] { --color-brand: 194 65 12; --color-brand-end: 234 88 12; --color-accent: 225 29 72; --color-surface: 250 250 249; --color-panel: 255 255 255; --color-ink: 28 25 23; --color-muted: 120 113 108; --color-line: 231 229 228; --kpi-a-from: 220 38 38; --kpi-a-to: 194 65 12; --kpi-b-from: 234 88 12; --kpi-b-to: 245 158 11; --kpi-c-from: 194 65 12; --kpi-c-to: 225 29 72; --kpi-d-from: 180 83 9; --kpi-d-to: 146 64 14; --gradient-brand: linear-gradient(135deg, rgb(194 65 12), rgb(234 88 12)); }
.jscrm-theme-preview[data-preview-theme='6'] { --color-brand: 102 126 234; --color-brand-end: 118 75 162; --color-accent: 118 75 162; --color-surface: 245 247 255; --color-panel: 255 255 255; --color-ink: 17 24 39; --color-muted: 107 114 128; --color-line: 220 225 245; --kpi-a-from: 239 68 68; --kpi-a-to: 234 88 12; --kpi-b-from: 245 158 11; --kpi-b-to: 234 179 8; --kpi-c-from: 139 92 246; --kpi-c-to: 147 51 234; --kpi-d-from: 20 184 166; --kpi-d-to: 16 185 129; --gradient-brand: linear-gradient(135deg, #667eea, #764ba2); }
.jscrm-theme-preview[data-preview-theme='7'] { --color-brand: 34 211 238; --color-brand-end: 232 121 249; --color-brand-fg: 15 23 42; --color-accent: 232 121 249; --color-surface: 10 15 30; --color-panel: 15 23 42; --color-ink: 226 232 240; --color-muted: 148 163 184; --color-line: 51 65 85; --kpi-a-from: 244 63 94; --kpi-a-to: 251 146 60; --kpi-b-from: 250 204 21; --kpi-b-to: 34 211 238; --kpi-c-from: 34 211 238; --kpi-c-to: 232 121 249; --kpi-d-from: 52 211 153; --kpi-d-to: 34 211 238; --gradient-brand: linear-gradient(135deg, #22d3ee, #e879f9); }
.jscrm-theme-preview[data-preview-theme='8'] { --color-brand: 13 148 136; --color-brand-end: 79 70 229; --color-accent: 244 63 94; --color-surface: 248 250 252; --color-panel: 255 255 255; --color-ink: 15 23 42; --color-muted: 100 116 139; --color-line: 226 232 240; --kpi-a-from: 244 63 94; --kpi-a-to: 249 115 22; --kpi-b-from: 245 158 11; --kpi-b-to: 13 148 136; --kpi-c-from: 13 148 136; --kpi-c-to: 79 70 229; --kpi-d-from: 79 70 229; --kpi-d-to: 244 63 94; --gradient-brand: linear-gradient(135deg, #0d9488, #4f46e5 50%, #f43f5e); }
.jscrm-theme-preview[data-preview-theme='9'] { --color-brand: 124 58 237; --color-brand-end: 236 72 153; --color-accent: 14 165 233; --color-surface: 250 250 252; --color-panel: 255 255 255; --color-ink: 24 24 27; --color-muted: 113 113 122; --color-line: 228 228 235; --kpi-a-from: 239 68 68; --kpi-a-to: 249 115 22; --kpi-b-from: 234 179 8; --kpi-b-to: 34 197 94; --kpi-c-from: 6 182 212; --kpi-c-to: 99 102 241; --kpi-d-from: 168 85 247; --kpi-d-to: 236 72 153; --gradient-brand: linear-gradient(135deg, #ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #ec4899); }
.jscrm-theme-preview[data-preview-theme='10'] { --color-brand: 236 72 153; --color-brand-end: 167 139 250; --color-accent: 52 211 153; --color-surface: 255 247 252; --color-panel: 255 255 255; --color-ink: 49 46 58; --color-muted: 113 113 122; --color-line: 251 207 232; --kpi-a-from: 244 63 94; --kpi-a-to: 236 72 153; --kpi-b-from: 251 146 60; --kpi-b-to: 250 204 21; --kpi-c-from: 236 72 153; --kpi-c-to: 167 139 250; --kpi-d-from: 167 139 250; --kpi-d-to: 52 211 153; --gradient-brand: linear-gradient(135deg, #ec4899, #a78bfa, #34d399); }
.jscrm-theme-preview[data-preview-theme='11'] { --color-brand: 195 153 104; --color-brand-end: 255 114 1; --color-brand-fg: 44 46 45; --color-accent: 255 114 1; --color-surface: 17 17 17; --color-panel: 28 28 28; --color-ink: 242 242 242; --color-muted: 196 193 188; --color-line: 64 64 65; --kpi-a-from: 239 68 68; --kpi-a-to: 255 114 1; --kpi-b-from: 255 114 1; --kpi-b-to: 195 153 104; --kpi-c-from: 195 153 104; --kpi-c-to: 255 114 1; --kpi-d-from: 0 186 133; --kpi-d-to: 195 153 104; --gradient-brand: linear-gradient(135deg, #c39968, #ff7201); --chrome-style: soft; }