/* ========================================
   BLENNY DESIGN TOKENS
   Source: Styles/blenny-tokens.scss
   Edit colors in: Styles/_themes.scss
   Build: npm run build:css
   ======================================== */
:root {
  --blenny-celestial: #279af1;
  --blenny-slate: #355771;
  --blenny-slate-mid: #3372a3;
  --blenny-cream: #f8f4e3;
  --blenny-success: #58b09c;
  --blenny-danger: #c94b4b;
  --blenny-celestial-soft: rgba(39, 154, 241, 0.12);
  --blenny-celestial-glow: rgba(39, 154, 241, 0.32);
  --blenny-slate-soft: rgba(53, 87, 113, 0.08);
  --blenny-slate-mid-soft: rgba(51, 114, 163, 0.12);
  --blenny-slate-mid-glow: rgba(51, 114, 163, 0.28);
  --blenny-cream-soft: rgba(248, 244, 227, 0.65);
  --blenny-success-soft: rgba(88, 176, 156, 0.14);
  --blenny-success-glow: rgba(88, 176, 156, 0.32);
  --blenny-danger-soft: rgba(201, 75, 75, 0.1);
  --blenny-danger-glow: rgba(201, 75, 75, 0.22);
  --color-text: #355771;
  --color-text-muted: rgba(53, 87, 113, 0.55);
  --color-text-secondary: #3372a3;
  --color-accent: #279af1;
  --color-border: rgba(53, 87, 113, 0.12);
  --color-canvas: #fafbfc;
  --color-border-default: #d8e0e8;
  --color-border-subtle: #e8edf2;
  --color-border-hover: #c5d0dc;
  --color-border-accent: #d4e8f8;
  --color-surface: #ffffff;
  --color-surface-warm: #f8f4e3;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-surface: 0 2px 10px rgba(53, 87, 113, 0.06);
  --shadow-elevated: 0 8px 22px rgba(53, 87, 113, 0.1);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
  --blenny-space-2: 0.5rem;
  --blenny-space-3: 0.75rem;
  --blenny-space-4: 1rem;
  --blenny-space-5: 1.5rem;
  --blenny-space-8: 3rem;
  --blenny-shell-border-width: 1px;
  --blenny-surface-radius: 40px;
  --blenny-nested-radius: 28px;
  --blenny-cell-radius: 14px;
  --blenny-pill-radius: 40px;
  /* Floating footers: clear overlay OS chrome (e.g. Windows taskbar) */
  --blenny-fixed-bottom-inset: max(3rem, env(safe-area-inset-bottom, 0px));
  /* Form-select caret (stroke encoded in data-URI; swap on dark) */
  --blenny-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  --blenny-select-caret-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23279AF1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  --blenny-select-caret-open: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23279AF1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 11l6-6 6 6'/%3e%3c/svg%3e");
}

/* Dark + variants: apply globally so CSS variables update everywhere */
html[data-theme=dark] {
  --blenny-celestial: #279af1;
  --blenny-slate: #5a88b0;
  --blenny-slate-mid: #6a9ac4;
  --blenny-cream: #f8f4e3;
  --blenny-success: #66c8ad;
  --blenny-danger: #e06b6b;
  --blenny-celestial-soft: rgba(39, 154, 241, 0.2);
  --blenny-celestial-glow: rgba(39, 154, 241, 0.45);
  --blenny-slate-soft: rgba(90, 136, 176, 0.24);
  --blenny-slate-mid-soft: rgba(106, 154, 196, 0.24);
  --blenny-slate-mid-glow: rgba(106, 154, 196, 0.38);
  --blenny-cream-soft: rgba(248, 244, 227, 0.14);
  --blenny-success-soft: rgba(102, 200, 173, 0.22);
  --blenny-success-glow: rgba(102, 200, 173, 0.4);
  --blenny-danger-soft: rgba(224, 107, 107, 0.2);
  --blenny-danger-glow: rgba(224, 107, 107, 0.35);
  --color-text: #e6eef7;
  --color-text-muted: #c7d7e8;
  --color-text-secondary: #c3d5e7;
  --color-accent: #279af1;
  --color-border: #2a3b52;
  --color-canvas: #0f1722;
  --color-border-default: #2a3b52;
  --color-border-subtle: #233448;
  --color-border-hover: #3b5673;
  --color-border-accent: #2d4e70;
  --color-surface: #162233;
  --color-surface-warm: #1c2c40;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.26);
  --shadow-elevated: 0 10px 26px rgba(0, 0, 0, 0.38);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
  --blenny-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23B8C9DA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  --blenny-select-caret-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234DB0F5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  --blenny-select-caret-open: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234DB0F5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 11l6-6 6 6'/%3e%3c/svg%3e");
}

html[data-theme=dark][data-theme-variant=soft] {
  --blenny-celestial: #4db0f5;
  --blenny-slate: #7a9cb8;
  --blenny-slate-mid: #8aadc6;
  --blenny-cream: #f0ebe0;
  --blenny-success: #7bc4b0;
  --blenny-danger: #d98888;
  --blenny-celestial-soft: rgba(77, 176, 245, 0.18);
  --blenny-celestial-glow: rgba(77, 176, 245, 0.36);
  --blenny-slate-soft: rgba(122, 156, 184, 0.2);
  --blenny-slate-mid-soft: rgba(138, 173, 198, 0.2);
  --blenny-slate-mid-glow: rgba(138, 173, 198, 0.32);
  --blenny-cream-soft: rgba(240, 235, 224, 0.12);
  --blenny-success-soft: rgba(123, 196, 176, 0.2);
  --blenny-success-glow: rgba(123, 196, 176, 0.36);
  --blenny-danger-soft: rgba(217, 136, 136, 0.18);
  --blenny-danger-glow: rgba(217, 136, 136, 0.3);
  --color-text: #d5e0eb;
  --color-text-muted: #a8bbc9;
  --color-text-secondary: #b3c5d4;
  --color-accent: #4db0f5;
  --color-border: #334556;
  --color-canvas: #151c24;
  --color-border-default: #334556;
  --color-border-subtle: #2a3540;
  --color-border-hover: #455868;
  --color-border-accent: #3a5470;
  --color-surface: #1c2630;
  --color-surface-warm: #222e3a;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-elevated: 0 10px 26px rgba(0, 0, 0, 0.32);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=midnight] {
  --blenny-celestial: #3da0f0;
  --blenny-slate: #6b8fad;
  --blenny-slate-mid: #7a9db8;
  --blenny-cream: #e8e4d8;
  --blenny-success: #5cbaa4;
  --blenny-danger: #e07070;
  --blenny-celestial-soft: rgba(61, 160, 240, 0.22);
  --blenny-celestial-glow: rgba(61, 160, 240, 0.48);
  --blenny-slate-soft: rgba(107, 143, 173, 0.22);
  --blenny-slate-mid-soft: rgba(122, 157, 184, 0.22);
  --blenny-slate-mid-glow: rgba(122, 157, 184, 0.36);
  --blenny-cream-soft: rgba(232, 228, 216, 0.1);
  --blenny-success-soft: rgba(92, 186, 164, 0.2);
  --blenny-success-glow: rgba(92, 186, 164, 0.38);
  --blenny-danger-soft: rgba(224, 112, 112, 0.2);
  --blenny-danger-glow: rgba(224, 112, 112, 0.36);
  --color-text: #eef3f8;
  --color-text-muted: #9aafc0;
  --color-text-secondary: #b0c2d1;
  --color-accent: #3da0f0;
  --color-border: #1a2330;
  --color-canvas: #05080c;
  --color-border-default: #1a2330;
  --color-border-subtle: #121820;
  --color-border-hover: #2a3848;
  --color-border-accent: #1e3a55;
  --color-surface: #0c1218;
  --color-surface-warm: #121a22;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.55);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=contrast] {
  --blenny-celestial: #5cbcff;
  --blenny-slate: #9ec4e0;
  --blenny-slate-mid: #b0d0ea;
  --blenny-cream: #fff8e7;
  --blenny-success: #7dffce;
  --blenny-danger: #ff8a8a;
  --blenny-celestial-soft: rgba(92, 188, 255, 0.28);
  --blenny-celestial-glow: rgba(92, 188, 255, 0.55);
  --blenny-slate-soft: rgba(158, 196, 224, 0.28);
  --blenny-slate-mid-soft: rgba(176, 208, 234, 0.28);
  --blenny-slate-mid-glow: rgba(176, 208, 234, 0.45);
  --blenny-cream-soft: rgba(255, 248, 231, 0.16);
  --blenny-success-soft: rgba(125, 255, 206, 0.25);
  --blenny-success-glow: rgba(125, 255, 206, 0.45);
  --blenny-danger-soft: rgba(255, 138, 138, 0.25);
  --blenny-danger-glow: rgba(255, 138, 138, 0.45);
  --color-text: #ffffff;
  --color-text-muted: #d0e0f0;
  --color-text-secondary: #e0ecf8;
  --color-accent: #5cbcff;
  --color-border: #4a6a88;
  --color-canvas: #000000;
  --color-border-default: #4a6a88;
  --color-border-subtle: #2a4058;
  --color-border-hover: #6a8aa8;
  --color-border-accent: #3a7ab0;
  --color-surface: #0a1420;
  --color-surface-warm: #122030;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.65);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

/* Keep scoped emits for pages that rely on higher-specificity dark chrome */
html[data-theme=dark][data-theme-scope=dashboard] {
  --blenny-celestial: #279af1;
  --blenny-slate: #5a88b0;
  --blenny-slate-mid: #6a9ac4;
  --blenny-cream: #f8f4e3;
  --blenny-success: #66c8ad;
  --blenny-danger: #e06b6b;
  --blenny-celestial-soft: rgba(39, 154, 241, 0.2);
  --blenny-celestial-glow: rgba(39, 154, 241, 0.45);
  --blenny-slate-soft: rgba(90, 136, 176, 0.24);
  --blenny-slate-mid-soft: rgba(106, 154, 196, 0.24);
  --blenny-slate-mid-glow: rgba(106, 154, 196, 0.38);
  --blenny-cream-soft: rgba(248, 244, 227, 0.14);
  --blenny-success-soft: rgba(102, 200, 173, 0.22);
  --blenny-success-glow: rgba(102, 200, 173, 0.4);
  --blenny-danger-soft: rgba(224, 107, 107, 0.2);
  --blenny-danger-glow: rgba(224, 107, 107, 0.35);
  --color-text: #e6eef7;
  --color-text-muted: #c7d7e8;
  --color-text-secondary: #c3d5e7;
  --color-accent: #279af1;
  --color-border: #2a3b52;
  --color-canvas: #0f1722;
  --color-border-default: #2a3b52;
  --color-border-subtle: #233448;
  --color-border-hover: #3b5673;
  --color-border-accent: #2d4e70;
  --color-surface: #162233;
  --color-surface-warm: #1c2c40;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.26);
  --shadow-elevated: 0 10px 26px rgba(0, 0, 0, 0.38);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-scope=account-profile] {
  --blenny-celestial: #279af1;
  --blenny-slate: #5a88b0;
  --blenny-slate-mid: #6a9ac4;
  --blenny-cream: #f8f4e3;
  --blenny-success: #66c8ad;
  --blenny-danger: #e06b6b;
  --blenny-celestial-soft: rgba(39, 154, 241, 0.2);
  --blenny-celestial-glow: rgba(39, 154, 241, 0.45);
  --blenny-slate-soft: rgba(90, 136, 176, 0.24);
  --blenny-slate-mid-soft: rgba(106, 154, 196, 0.24);
  --blenny-slate-mid-glow: rgba(106, 154, 196, 0.38);
  --blenny-cream-soft: rgba(248, 244, 227, 0.14);
  --blenny-success-soft: rgba(102, 200, 173, 0.22);
  --blenny-success-glow: rgba(102, 200, 173, 0.4);
  --blenny-danger-soft: rgba(224, 107, 107, 0.2);
  --blenny-danger-glow: rgba(224, 107, 107, 0.35);
  --color-text: #e6eef7;
  --color-text-muted: #c7d7e8;
  --color-text-secondary: #c3d5e7;
  --color-accent: #279af1;
  --color-border: #2a3b52;
  --color-canvas: #0f1722;
  --color-border-default: #2a3b52;
  --color-border-subtle: #233448;
  --color-border-hover: #3b5673;
  --color-border-accent: #2d4e70;
  --color-surface: #162233;
  --color-surface-warm: #1c2c40;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.26);
  --shadow-elevated: 0 10px 26px rgba(0, 0, 0, 0.38);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=soft][data-theme-scope=dashboard] {
  --blenny-celestial: #4db0f5;
  --blenny-slate: #7a9cb8;
  --blenny-slate-mid: #8aadc6;
  --blenny-cream: #f0ebe0;
  --blenny-success: #7bc4b0;
  --blenny-danger: #d98888;
  --blenny-celestial-soft: rgba(77, 176, 245, 0.18);
  --blenny-celestial-glow: rgba(77, 176, 245, 0.36);
  --blenny-slate-soft: rgba(122, 156, 184, 0.2);
  --blenny-slate-mid-soft: rgba(138, 173, 198, 0.2);
  --blenny-slate-mid-glow: rgba(138, 173, 198, 0.32);
  --blenny-cream-soft: rgba(240, 235, 224, 0.12);
  --blenny-success-soft: rgba(123, 196, 176, 0.2);
  --blenny-success-glow: rgba(123, 196, 176, 0.36);
  --blenny-danger-soft: rgba(217, 136, 136, 0.18);
  --blenny-danger-glow: rgba(217, 136, 136, 0.3);
  --color-text: #d5e0eb;
  --color-text-muted: #a8bbc9;
  --color-text-secondary: #b3c5d4;
  --color-accent: #4db0f5;
  --color-border: #334556;
  --color-canvas: #151c24;
  --color-border-default: #334556;
  --color-border-subtle: #2a3540;
  --color-border-hover: #455868;
  --color-border-accent: #3a5470;
  --color-surface: #1c2630;
  --color-surface-warm: #222e3a;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-elevated: 0 10px 26px rgba(0, 0, 0, 0.32);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=soft][data-theme-scope=account-profile] {
  --blenny-celestial: #4db0f5;
  --blenny-slate: #7a9cb8;
  --blenny-slate-mid: #8aadc6;
  --blenny-cream: #f0ebe0;
  --blenny-success: #7bc4b0;
  --blenny-danger: #d98888;
  --blenny-celestial-soft: rgba(77, 176, 245, 0.18);
  --blenny-celestial-glow: rgba(77, 176, 245, 0.36);
  --blenny-slate-soft: rgba(122, 156, 184, 0.2);
  --blenny-slate-mid-soft: rgba(138, 173, 198, 0.2);
  --blenny-slate-mid-glow: rgba(138, 173, 198, 0.32);
  --blenny-cream-soft: rgba(240, 235, 224, 0.12);
  --blenny-success-soft: rgba(123, 196, 176, 0.2);
  --blenny-success-glow: rgba(123, 196, 176, 0.36);
  --blenny-danger-soft: rgba(217, 136, 136, 0.18);
  --blenny-danger-glow: rgba(217, 136, 136, 0.3);
  --color-text: #d5e0eb;
  --color-text-muted: #a8bbc9;
  --color-text-secondary: #b3c5d4;
  --color-accent: #4db0f5;
  --color-border: #334556;
  --color-canvas: #151c24;
  --color-border-default: #334556;
  --color-border-subtle: #2a3540;
  --color-border-hover: #455868;
  --color-border-accent: #3a5470;
  --color-surface: #1c2630;
  --color-surface-warm: #222e3a;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-elevated: 0 10px 26px rgba(0, 0, 0, 0.32);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=midnight][data-theme-scope=dashboard] {
  --blenny-celestial: #3da0f0;
  --blenny-slate: #6b8fad;
  --blenny-slate-mid: #7a9db8;
  --blenny-cream: #e8e4d8;
  --blenny-success: #5cbaa4;
  --blenny-danger: #e07070;
  --blenny-celestial-soft: rgba(61, 160, 240, 0.22);
  --blenny-celestial-glow: rgba(61, 160, 240, 0.48);
  --blenny-slate-soft: rgba(107, 143, 173, 0.22);
  --blenny-slate-mid-soft: rgba(122, 157, 184, 0.22);
  --blenny-slate-mid-glow: rgba(122, 157, 184, 0.36);
  --blenny-cream-soft: rgba(232, 228, 216, 0.1);
  --blenny-success-soft: rgba(92, 186, 164, 0.2);
  --blenny-success-glow: rgba(92, 186, 164, 0.38);
  --blenny-danger-soft: rgba(224, 112, 112, 0.2);
  --blenny-danger-glow: rgba(224, 112, 112, 0.36);
  --color-text: #eef3f8;
  --color-text-muted: #9aafc0;
  --color-text-secondary: #b0c2d1;
  --color-accent: #3da0f0;
  --color-border: #1a2330;
  --color-canvas: #05080c;
  --color-border-default: #1a2330;
  --color-border-subtle: #121820;
  --color-border-hover: #2a3848;
  --color-border-accent: #1e3a55;
  --color-surface: #0c1218;
  --color-surface-warm: #121a22;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.55);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=midnight][data-theme-scope=account-profile] {
  --blenny-celestial: #3da0f0;
  --blenny-slate: #6b8fad;
  --blenny-slate-mid: #7a9db8;
  --blenny-cream: #e8e4d8;
  --blenny-success: #5cbaa4;
  --blenny-danger: #e07070;
  --blenny-celestial-soft: rgba(61, 160, 240, 0.22);
  --blenny-celestial-glow: rgba(61, 160, 240, 0.48);
  --blenny-slate-soft: rgba(107, 143, 173, 0.22);
  --blenny-slate-mid-soft: rgba(122, 157, 184, 0.22);
  --blenny-slate-mid-glow: rgba(122, 157, 184, 0.36);
  --blenny-cream-soft: rgba(232, 228, 216, 0.1);
  --blenny-success-soft: rgba(92, 186, 164, 0.2);
  --blenny-success-glow: rgba(92, 186, 164, 0.38);
  --blenny-danger-soft: rgba(224, 112, 112, 0.2);
  --blenny-danger-glow: rgba(224, 112, 112, 0.36);
  --color-text: #eef3f8;
  --color-text-muted: #9aafc0;
  --color-text-secondary: #b0c2d1;
  --color-accent: #3da0f0;
  --color-border: #1a2330;
  --color-canvas: #05080c;
  --color-border-default: #1a2330;
  --color-border-subtle: #121820;
  --color-border-hover: #2a3848;
  --color-border-accent: #1e3a55;
  --color-surface: #0c1218;
  --color-surface-warm: #121a22;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.55);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=contrast][data-theme-scope=dashboard] {
  --blenny-celestial: #5cbcff;
  --blenny-slate: #9ec4e0;
  --blenny-slate-mid: #b0d0ea;
  --blenny-cream: #fff8e7;
  --blenny-success: #7dffce;
  --blenny-danger: #ff8a8a;
  --blenny-celestial-soft: rgba(92, 188, 255, 0.28);
  --blenny-celestial-glow: rgba(92, 188, 255, 0.55);
  --blenny-slate-soft: rgba(158, 196, 224, 0.28);
  --blenny-slate-mid-soft: rgba(176, 208, 234, 0.28);
  --blenny-slate-mid-glow: rgba(176, 208, 234, 0.45);
  --blenny-cream-soft: rgba(255, 248, 231, 0.16);
  --blenny-success-soft: rgba(125, 255, 206, 0.25);
  --blenny-success-glow: rgba(125, 255, 206, 0.45);
  --blenny-danger-soft: rgba(255, 138, 138, 0.25);
  --blenny-danger-glow: rgba(255, 138, 138, 0.45);
  --color-text: #ffffff;
  --color-text-muted: #d0e0f0;
  --color-text-secondary: #e0ecf8;
  --color-accent: #5cbcff;
  --color-border: #4a6a88;
  --color-canvas: #000000;
  --color-border-default: #4a6a88;
  --color-border-subtle: #2a4058;
  --color-border-hover: #6a8aa8;
  --color-border-accent: #3a7ab0;
  --color-surface: #0a1420;
  --color-surface-warm: #122030;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.65);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=dark][data-theme-variant=contrast][data-theme-scope=account-profile] {
  --blenny-celestial: #5cbcff;
  --blenny-slate: #9ec4e0;
  --blenny-slate-mid: #b0d0ea;
  --blenny-cream: #fff8e7;
  --blenny-success: #7dffce;
  --blenny-danger: #ff8a8a;
  --blenny-celestial-soft: rgba(92, 188, 255, 0.28);
  --blenny-celestial-glow: rgba(92, 188, 255, 0.55);
  --blenny-slate-soft: rgba(158, 196, 224, 0.28);
  --blenny-slate-mid-soft: rgba(176, 208, 234, 0.28);
  --blenny-slate-mid-glow: rgba(176, 208, 234, 0.45);
  --blenny-cream-soft: rgba(255, 248, 231, 0.16);
  --blenny-success-soft: rgba(125, 255, 206, 0.25);
  --blenny-success-glow: rgba(125, 255, 206, 0.45);
  --blenny-danger-soft: rgba(255, 138, 138, 0.25);
  --blenny-danger-glow: rgba(255, 138, 138, 0.45);
  --color-text: #ffffff;
  --color-text-muted: #d0e0f0;
  --color-text-secondary: #e0ecf8;
  --color-accent: #5cbcff;
  --color-border: #4a6a88;
  --color-canvas: #000000;
  --color-border-default: #4a6a88;
  --color-border-subtle: #2a4058;
  --color-border-hover: #6a8aa8;
  --color-border-accent: #3a7ab0;
  --color-surface: #0a1420;
  --color-surface-warm: #122030;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-surface: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.65);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

html[data-theme=light][data-theme-variant=warm] {
  --blenny-celestial: #279af1;
  --blenny-slate: #3a4f5f;
  --blenny-slate-mid: #4a6f88;
  --blenny-cream: #f3efe3;
  --blenny-success: #58b09c;
  --blenny-danger: #c94b4b;
  --blenny-celestial-soft: rgba(39, 154, 241, 0.12);
  --blenny-celestial-glow: rgba(39, 154, 241, 0.3);
  --blenny-slate-soft: rgba(58, 79, 95, 0.08);
  --blenny-slate-mid-soft: rgba(74, 111, 136, 0.12);
  --blenny-slate-mid-glow: rgba(74, 111, 136, 0.26);
  --blenny-cream-soft: rgba(243, 239, 227, 0.8);
  --blenny-success-soft: rgba(88, 176, 156, 0.14);
  --blenny-success-glow: rgba(88, 176, 156, 0.3);
  --blenny-danger-soft: rgba(201, 75, 75, 0.1);
  --blenny-danger-glow: rgba(201, 75, 75, 0.22);
  --color-text: #3a4f5f;
  --color-text-muted: rgba(58, 79, 95, 0.55);
  --color-text-secondary: #4a6f88;
  --color-accent: #279af1;
  --color-border: rgba(58, 79, 95, 0.14);
  --color-canvas: #f7f3ea;
  --color-border-default: #ddd4c4;
  --color-border-subtle: #ebe4d6;
  --color-border-hover: #c9beab;
  --color-border-accent: #d4e4f4;
  --color-surface: #fffdf8;
  --color-surface-warm: #f3efe3;
  --surface-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-surface: 0 2px 10px rgba(58, 79, 95, 0.06);
  --shadow-elevated: 0 8px 22px rgba(58, 79, 95, 0.1);
  --blenny-ag-header-bg: var(--color-canvas);
  --celestial-blue: var(--blenny-celestial);
  --dark-blue: var(--blenny-slate);
}

/* Canvas/text follow tokens on the document shell */
html[data-theme=dark] body,
html[data-theme=dark] #content,
html[data-theme=dark] .blenny-content-host {
  background-color: var(--color-canvas);
  color: var(--color-text);
}

html[data-theme=light][data-theme-variant=warm] body,
html[data-theme=light][data-theme-variant=warm] #content,
html[data-theme=light][data-theme-variant=warm] .blenny-content-host {
  background-color: var(--color-canvas);
  color: var(--color-text);
}

/* Preference tokens (surface rules live in blenny-prefs.scss, loaded last) */
html[data-borders=off] {
  /* Hide decorative chrome strokes, but keep faint functional separators */
  --color-border: transparent;
  --color-border-default: transparent;
  --color-border-subtle: color-mix(in srgb, var(--color-text) 7%, transparent);
  --color-border-hover: color-mix(in srgb, var(--color-text) 12%, transparent);
  --color-border-accent: transparent;
  --blenny-shell-border-width: 0;
  --blenny-divider-color: color-mix(in srgb, var(--color-text) 8%, transparent);
}

html[data-borders=strong] {
  --color-border: var(--blenny-slate-mid);
  --color-border-default: var(--blenny-slate-mid);
  --color-border-subtle: var(--color-border-hover);
  --color-border-hover: var(--blenny-slate);
  --color-border-accent: var(--blenny-celestial);
  --blenny-shell-border-width: 2px;
}

html[data-borders=on] {
  --blenny-shell-border-width: 1px;
}

html[data-radius=soft] {
  --blenny-surface-radius: 16px;
  --blenny-nested-radius: 12px;
  --blenny-cell-radius: 8px;
  --blenny-pill-radius: 16px;
}

html[data-radius=sharp] {
  --blenny-surface-radius: 4px;
  --blenny-nested-radius: 4px;
  --blenny-cell-radius: 2px;
  --blenny-pill-radius: 4px;
}

html[data-radius=pill] {
  --blenny-surface-radius: 40px;
  --blenny-nested-radius: 28px;
  --blenny-cell-radius: 14px;
  --blenny-pill-radius: 40px;
}