/* FrancoMusso.com — colour + elevation tokens.
   Default: light. Respects OS prefs (prefers-color-scheme, prefers-contrast) unless
   <html data-theme="light|dark|hc|hc-dark"> forces a theme. Forced blocks come last so they win over
   the equal-specificity :root rules inside the OS media queries. */
:root{
  --plum-25:oklch(98.6% 0.006 305);
  --plum-50:oklch(97% 0.014 305);
  --plum-100:oklch(93.5% 0.03 305);
  --plum-200:oklch(87% 0.06 305);
  --plum-300:oklch(77% 0.11 305);
  --plum-400:oklch(65% 0.17 305);
  --plum-500:oklch(54% 0.21 305);
  --plum-600:oklch(46% 0.2 305);
  --plum-700:oklch(38% 0.165 305);
  --plum-800:oklch(30% 0.12 305);
  --plum-900:oklch(22% 0.08 305);
  --plum-950:oklch(16% 0.05 305);
  --mist-25:oklch(99.1% 0.003 300);
  --mist-50:oklch(97.3% 0.006 300);
  --mist-100:oklch(94.6% 0.008 300);
  --mist-200:oklch(89.5% 0.011 300);
  --mist-300:oklch(81% 0.013 300);
  --mist-400:oklch(67% 0.016 300);
  --mist-500:oklch(54% 0.018 300);
  --mist-600:oklch(44% 0.02 300);
  --mist-700:oklch(35% 0.022 300);
  --mist-800:oklch(25% 0.022 300);
  --mist-900:oklch(18% 0.02 300);
  --mist-950:oklch(13% 0.016 300);
  --ember-100:oklch(94.5% 0.04 45);
  --ember-300:oklch(81% 0.12 42);
  --ember-500:oklch(67% 0.18 38);
  --ember-700:oklch(49% 0.16 35);
  --moss-100:oklch(95% 0.04 155);
  --moss-300:oklch(80% 0.11 155);
  --moss-500:oklch(60% 0.14 155);
  --moss-700:oklch(42% 0.1 155);
  --amber-100:oklch(95.5% 0.05 85);
  --amber-300:oklch(84% 0.13 80);
  --amber-500:oklch(72% 0.16 70);
  --amber-700:oklch(50% 0.12 60);
  --rouge-100:oklch(95% 0.03 25);
  --rouge-300:oklch(78% 0.12 25);
  --rouge-500:oklch(60% 0.2 27);
  --rouge-700:oklch(45% 0.17 27);
  --white:#fff;
  --black:#000;
}

/* Light (default) */
:root{
  color-scheme:light;
  --bg-page:var(--mist-25);
  --bg-subtle:var(--mist-50);
  --bg-sunken:var(--mist-100);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-tint:var(--plum-50);
  --surface-brand:var(--plum-900);
  --surface-brand-2:var(--plum-800);
  --surface-inverse:var(--plum-950);
  --surface-overlay:oklch(16% 0.05 305 / 0.55);
  --text-1:oklch(17% 0.03 305);
  --text-2:oklch(29% 0.025 305);
  --text-3:var(--mist-600);
  --text-4:var(--mist-500);
  --text-accent:var(--plum-600);
  --text-on-brand:var(--white);
  --text-on-brand-2:var(--plum-200);
  --text-on-accent:var(--white);
  --border-1:var(--mist-200);
  --border-2:var(--mist-300);
  --border-strong:var(--text-1);
  --border-accent:var(--plum-300);
  --border-width:1px;
  --border-width-strong:2px;
  --accent:var(--plum-600);
  --accent-hover:var(--plum-700);
  --accent-press:var(--plum-800);
  --accent-soft:var(--plum-100);
  --accent-softer:var(--plum-50);
  --accent-vivid:var(--plum-500);
  --link:var(--plum-600);
  --link-hover:var(--plum-800);
  --link-underline:var(--plum-300);
  --focus-ring:var(--plum-500);
  --selection:var(--plum-200);
  --marker:var(--ember-100);
  --marker-fg:var(--ember-700);
  --live:var(--ember-500);
  --note-bg:var(--plum-50);
  --note-fg:var(--plum-800);
  --note-icon:var(--plum-600);
  --note-border:var(--plum-200);
  --tip-bg:var(--moss-100);
  --tip-fg:var(--moss-700);
  --tip-icon:var(--moss-500);
  --tip-border:var(--moss-300);
  --warn-bg:var(--amber-100);
  --warn-fg:var(--amber-700);
  --warn-icon:var(--amber-500);
  --warn-border:var(--amber-300);
  --danger-bg:var(--rouge-100);
  --danger-fg:var(--rouge-700);
  --danger-icon:var(--rouge-500);
  --danger-border:var(--rouge-300);
  --prompt-bg:var(--plum-50);
  --prompt-border:var(--plum-200);
  --prompt-fg:var(--text-1);
  --prompt-var-bg:var(--ember-100);
  --prompt-var-fg:var(--ember-700);
  --prompt-rail:var(--plum-600);
  --stage-1:var(--plum-200);
  --stage-2:var(--plum-400);
  --stage-3:var(--plum-600);
  --stage-4:var(--plum-900);
  --stage-empty:var(--mist-200);
  --placeholder-bg:var(--plum-50);
  --placeholder-stripe:var(--plum-100);
  --placeholder-fg:var(--plum-700);
  --code-bg:oklch(19% 0.035 305);
  --code-bg-2:oklch(23% 0.04 305);
  --code-border:oklch(28% 0.045 305);
  --code-fg:oklch(93% 0.012 305);
  --code-muted:oklch(68% 0.03 305);
  --code-comment:oklch(66% 0.035 305);
  --code-keyword:oklch(78% 0.12 305);
  --code-string:oklch(83% 0.1 155);
  --code-number:oklch(82% 0.11 45);
  --code-fn:oklch(84% 0.08 235);
  --code-tag:oklch(79% 0.12 350);
  --code-attr:oklch(87% 0.09 90);
  --code-line-hl:oklch(30% 0.07 305 / 0.7);
  --code-line-hl-bar:var(--plum-300);
  --shadow-1:0 1px 2px oklch(20% 0.05 305 / 0.06), 0 1px 1px oklch(20% 0.05 305 / 0.04);
  --shadow-2:0 2px 4px oklch(20% 0.05 305 / 0.05), 0 6px 16px -4px oklch(20% 0.05 305 / 0.1);
  --shadow-3:0 4px 8px oklch(20% 0.05 305 / 0.05), 0 18px 40px -12px oklch(20% 0.05 305 / 0.18);
  --shadow-4:0 8px 16px oklch(20% 0.05 305 / 0.06), 0 40px 80px -24px oklch(20% 0.05 305 / 0.32);
  --shadow-focus:0 0 0 3px var(--bg-page), 0 0 0 5px var(--focus-ring);
  --shadow-inset:inset 0 1px 2px oklch(20% 0.05 305 / 0.08);
}

/* OS preference: dark */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg-page:oklch(15.5% 0.022 305);
    --bg-subtle:oklch(18.5% 0.026 305);
    --bg-sunken:oklch(13% 0.02 305);
    --surface-card:oklch(20% 0.028 305);
    --surface-raised:oklch(24% 0.032 305);
    --surface-tint:oklch(23% 0.055 305);
    --surface-brand:oklch(24% 0.09 305);
    --surface-brand-2:oklch(29% 0.11 305);
    --surface-inverse:var(--plum-50);
    --surface-overlay:oklch(8% 0.02 305 / 0.7);
    --text-1:oklch(96.5% 0.008 305);
    --text-2:oklch(87% 0.016 305);
    --text-3:oklch(74% 0.022 305);
    --text-4:oklch(63% 0.022 305);
    --text-accent:var(--plum-300);
    --text-on-brand:var(--white);
    --text-on-brand-2:var(--plum-200);
    --text-on-accent:var(--plum-950);
    --border-1:oklch(28% 0.03 305);
    --border-2:oklch(37% 0.035 305);
    --border-strong:var(--text-1);
    --border-accent:var(--plum-700);
    --border-width:1px;
    --border-width-strong:2px;
    --accent:var(--plum-300);
    --accent-hover:var(--plum-200);
    --accent-press:var(--plum-100);
    --accent-soft:oklch(31% 0.1 305);
    --accent-softer:oklch(24% 0.06 305);
    --accent-vivid:var(--plum-400);
    --link:var(--plum-300);
    --link-hover:var(--plum-100);
    --link-underline:var(--plum-600);
    --focus-ring:var(--plum-300);
    --selection:var(--plum-700);
    --marker:oklch(34% 0.08 40);
    --marker-fg:var(--ember-100);
    --live:var(--ember-300);
    --note-bg:oklch(23% 0.055 305);
    --note-fg:var(--plum-100);
    --note-icon:var(--plum-300);
    --note-border:oklch(34% 0.09 305);
    --tip-bg:oklch(23% 0.04 155);
    --tip-fg:var(--moss-100);
    --tip-icon:var(--moss-300);
    --tip-border:oklch(35% 0.07 155);
    --warn-bg:oklch(25% 0.045 70);
    --warn-fg:var(--amber-100);
    --warn-icon:var(--amber-300);
    --warn-border:oklch(38% 0.08 70);
    --danger-bg:oklch(24% 0.05 25);
    --danger-fg:var(--rouge-100);
    --danger-icon:var(--rouge-300);
    --danger-border:oklch(38% 0.1 25);
    --prompt-bg:oklch(21% 0.045 305);
    --prompt-border:oklch(33% 0.08 305);
    --prompt-fg:var(--text-1);
    --prompt-var-bg:oklch(32% 0.08 40);
    --prompt-var-fg:var(--ember-100);
    --prompt-rail:var(--plum-400);
    --stage-1:var(--plum-700);
    --stage-2:var(--plum-500);
    --stage-3:var(--plum-300);
    --stage-4:var(--plum-100);
    --stage-empty:oklch(30% 0.03 305);
    --placeholder-bg:oklch(21% 0.04 305);
    --placeholder-stripe:oklch(24% 0.05 305);
    --placeholder-fg:var(--plum-200);
    --code-bg:oklch(11.5% 0.022 305);
    --code-bg-2:oklch(15% 0.03 305);
    --code-border:oklch(26% 0.04 305);
    --code-fg:oklch(93% 0.012 305);
    --code-muted:oklch(68% 0.03 305);
    --code-comment:oklch(66% 0.035 305);
    --code-keyword:oklch(78% 0.12 305);
    --code-string:oklch(83% 0.1 155);
    --code-number:oklch(82% 0.11 45);
    --code-fn:oklch(84% 0.08 235);
    --code-tag:oklch(79% 0.12 350);
    --code-attr:oklch(87% 0.09 90);
    --code-line-hl:oklch(30% 0.07 305 / 0.7);
    --code-line-hl-bar:var(--plum-300);
    --shadow-1:0 1px 2px oklch(0% 0 0 / 0.4);
    --shadow-2:0 2px 6px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(100% 0 0 / 0.04);
    --shadow-3:0 12px 32px -8px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(100% 0 0 / 0.06);
    --shadow-4:0 32px 72px -16px oklch(0% 0 0 / 0.75), 0 0 0 1px oklch(100% 0 0 / 0.08);
    --shadow-focus:0 0 0 3px var(--bg-page), 0 0 0 5px var(--focus-ring);
    --shadow-inset:inset 0 1px 2px oklch(0% 0 0 / 0.4);
  }
}

/* OS preference: more contrast */
@media (prefers-contrast: more){
  :root{
    color-scheme:light;
    --bg-page:var(--white);
    --bg-subtle:var(--white);
    --bg-sunken:var(--mist-50);
    --surface-card:var(--white);
    --surface-raised:var(--white);
    --surface-tint:var(--white);
    --surface-brand:var(--black);
    --surface-brand-2:var(--black);
    --surface-inverse:var(--black);
    --surface-overlay:oklch(16% 0.05 305 / 0.55);
    --text-1:var(--black);
    --text-2:var(--black);
    --text-3:oklch(25% 0.02 305);
    --text-4:oklch(32% 0.02 305);
    --text-accent:var(--plum-800);
    --text-on-brand:var(--white);
    --text-on-brand-2:var(--white);
    --text-on-accent:var(--white);
    --border-1:var(--black);
    --border-2:var(--black);
    --border-strong:var(--text-1);
    --border-accent:var(--plum-800);
    --border-width:2px;
    --border-width-strong:3px;
    --accent:var(--plum-800);
    --accent-hover:var(--plum-900);
    --accent-press:var(--black);
    --accent-soft:var(--plum-100);
    --accent-softer:var(--white);
    --accent-vivid:var(--plum-800);
    --link:var(--plum-800);
    --link-hover:var(--black);
    --link-underline:var(--plum-800);
    --focus-ring:var(--black);
    --selection:var(--black);
    --marker:var(--amber-300);
    --marker-fg:var(--black);
    --live:var(--ember-500);
    --note-bg:var(--white);
    --note-fg:var(--black);
    --note-icon:var(--plum-800);
    --note-border:var(--black);
    --tip-bg:var(--white);
    --tip-fg:var(--black);
    --tip-icon:var(--moss-700);
    --tip-border:var(--black);
    --warn-bg:var(--white);
    --warn-fg:var(--black);
    --warn-icon:var(--amber-700);
    --warn-border:var(--black);
    --danger-bg:var(--white);
    --danger-fg:var(--black);
    --danger-icon:var(--rouge-700);
    --danger-border:var(--black);
    --prompt-bg:var(--white);
    --prompt-border:var(--black);
    --prompt-fg:var(--text-1);
    --prompt-var-bg:var(--amber-300);
    --prompt-var-fg:var(--black);
    --prompt-rail:var(--black);
    --stage-1:var(--plum-800);
    --stage-2:var(--plum-800);
    --stage-3:var(--plum-800);
    --stage-4:var(--plum-800);
    --stage-empty:var(--white);
    --placeholder-bg:var(--white);
    --placeholder-stripe:var(--mist-100);
    --placeholder-fg:var(--black);
    --code-bg:var(--black);
    --code-bg-2:var(--black);
    --code-border:var(--white);
    --code-fg:var(--white);
    --code-muted:oklch(88% 0 0);
    --code-comment:oklch(88% 0.03 305);
    --code-keyword:oklch(86% 0.1 305);
    --code-string:oklch(90% 0.12 155);
    --code-number:oklch(90% 0.1 60);
    --code-fn:oklch(90% 0.08 235);
    --code-tag:oklch(88% 0.1 350);
    --code-attr:oklch(93% 0.1 95);
    --code-line-hl:oklch(35% 0.1 305);
    --code-line-hl-bar:var(--white);
    --shadow-1:none;
    --shadow-2:0 0 0 2px var(--black);
    --shadow-3:0 0 0 2px var(--black);
    --shadow-4:0 0 0 3px var(--black);
    --shadow-focus:0 0 0 3px var(--white), 0 0 0 6px var(--black);
    --shadow-inset:none;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg-page:var(--black);
    --bg-subtle:var(--black);
    --bg-sunken:var(--black);
    --surface-card:var(--black);
    --surface-raised:var(--black);
    --surface-tint:var(--black);
    --surface-brand:var(--black);
    --surface-brand-2:var(--black);
    --surface-inverse:var(--white);
    --surface-overlay:oklch(8% 0.02 305 / 0.7);
    --text-1:var(--white);
    --text-2:var(--white);
    --text-3:oklch(90% 0.01 305);
    --text-4:oklch(84% 0.01 305);
    --text-accent:var(--plum-200);
    --text-on-brand:var(--white);
    --text-on-brand-2:var(--white);
    --text-on-accent:var(--black);
    --border-1:var(--white);
    --border-2:var(--white);
    --border-strong:var(--white);
    --border-accent:var(--plum-200);
    --border-width:2px;
    --border-width-strong:3px;
    --accent:var(--plum-200);
    --accent-hover:var(--plum-100);
    --accent-press:var(--white);
    --accent-soft:oklch(30% 0.1 305);
    --accent-softer:var(--black);
    --accent-vivid:var(--plum-200);
    --link:var(--plum-200);
    --link-hover:var(--white);
    --link-underline:var(--plum-200);
    --focus-ring:var(--white);
    --selection:var(--white);
    --marker:var(--amber-300);
    --marker-fg:var(--black);
    --live:var(--ember-300);
    --note-bg:var(--black);
    --note-fg:var(--white);
    --note-icon:var(--plum-300);
    --note-border:var(--white);
    --tip-bg:var(--black);
    --tip-fg:var(--white);
    --tip-icon:var(--moss-300);
    --tip-border:var(--white);
    --warn-bg:var(--black);
    --warn-fg:var(--white);
    --warn-icon:var(--amber-300);
    --warn-border:var(--white);
    --danger-bg:var(--black);
    --danger-fg:var(--white);
    --danger-icon:var(--rouge-300);
    --danger-border:var(--white);
    --prompt-bg:var(--black);
    --prompt-border:var(--white);
    --prompt-fg:var(--text-1);
    --prompt-var-bg:var(--amber-300);
    --prompt-var-fg:var(--black);
    --prompt-rail:var(--white);
    --stage-1:var(--plum-200);
    --stage-2:var(--plum-200);
    --stage-3:var(--plum-200);
    --stage-4:var(--plum-200);
    --stage-empty:var(--black);
    --placeholder-bg:var(--black);
    --placeholder-stripe:oklch(20% 0 0);
    --placeholder-fg:var(--white);
    --code-bg:var(--black);
    --code-bg-2:var(--black);
    --code-border:var(--white);
    --code-fg:var(--white);
    --code-muted:oklch(68% 0.03 305);
    --code-comment:oklch(88% 0.03 305);
    --code-keyword:oklch(78% 0.12 305);
    --code-string:oklch(83% 0.1 155);
    --code-number:oklch(82% 0.11 45);
    --code-fn:oklch(84% 0.08 235);
    --code-tag:oklch(79% 0.12 350);
    --code-attr:oklch(87% 0.09 90);
    --code-line-hl:oklch(35% 0.1 305);
    --code-line-hl-bar:var(--white);
    --shadow-1:none;
    --shadow-2:0 0 0 2px var(--white);
    --shadow-3:0 0 0 2px var(--white);
    --shadow-4:0 0 0 3px var(--white);
    --shadow-focus:0 0 0 3px var(--black), 0 0 0 6px var(--white);
    --shadow-inset:none;
  }
}

/* Forced themes */
[data-theme="light"]{
  color-scheme:light;
  --bg-page:var(--mist-25);
  --bg-subtle:var(--mist-50);
  --bg-sunken:var(--mist-100);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-tint:var(--plum-50);
  --surface-brand:var(--plum-900);
  --surface-brand-2:var(--plum-800);
  --surface-inverse:var(--plum-950);
  --surface-overlay:oklch(16% 0.05 305 / 0.55);
  --text-1:oklch(17% 0.03 305);
  --text-2:oklch(29% 0.025 305);
  --text-3:var(--mist-600);
  --text-4:var(--mist-500);
  --text-accent:var(--plum-600);
  --text-on-brand:var(--white);
  --text-on-brand-2:var(--plum-200);
  --text-on-accent:var(--white);
  --border-1:var(--mist-200);
  --border-2:var(--mist-300);
  --border-strong:var(--text-1);
  --border-accent:var(--plum-300);
  --border-width:1px;
  --border-width-strong:2px;
  --accent:var(--plum-600);
  --accent-hover:var(--plum-700);
  --accent-press:var(--plum-800);
  --accent-soft:var(--plum-100);
  --accent-softer:var(--plum-50);
  --accent-vivid:var(--plum-500);
  --link:var(--plum-600);
  --link-hover:var(--plum-800);
  --link-underline:var(--plum-300);
  --focus-ring:var(--plum-500);
  --selection:var(--plum-200);
  --marker:var(--ember-100);
  --marker-fg:var(--ember-700);
  --live:var(--ember-500);
  --note-bg:var(--plum-50);
  --note-fg:var(--plum-800);
  --note-icon:var(--plum-600);
  --note-border:var(--plum-200);
  --tip-bg:var(--moss-100);
  --tip-fg:var(--moss-700);
  --tip-icon:var(--moss-500);
  --tip-border:var(--moss-300);
  --warn-bg:var(--amber-100);
  --warn-fg:var(--amber-700);
  --warn-icon:var(--amber-500);
  --warn-border:var(--amber-300);
  --danger-bg:var(--rouge-100);
  --danger-fg:var(--rouge-700);
  --danger-icon:var(--rouge-500);
  --danger-border:var(--rouge-300);
  --prompt-bg:var(--plum-50);
  --prompt-border:var(--plum-200);
  --prompt-fg:var(--text-1);
  --prompt-var-bg:var(--ember-100);
  --prompt-var-fg:var(--ember-700);
  --prompt-rail:var(--plum-600);
  --stage-1:var(--plum-200);
  --stage-2:var(--plum-400);
  --stage-3:var(--plum-600);
  --stage-4:var(--plum-900);
  --stage-empty:var(--mist-200);
  --placeholder-bg:var(--plum-50);
  --placeholder-stripe:var(--plum-100);
  --placeholder-fg:var(--plum-700);
  --code-bg:oklch(19% 0.035 305);
  --code-bg-2:oklch(23% 0.04 305);
  --code-border:oklch(28% 0.045 305);
  --code-fg:oklch(93% 0.012 305);
  --code-muted:oklch(68% 0.03 305);
  --code-comment:oklch(66% 0.035 305);
  --code-keyword:oklch(78% 0.12 305);
  --code-string:oklch(83% 0.1 155);
  --code-number:oklch(82% 0.11 45);
  --code-fn:oklch(84% 0.08 235);
  --code-tag:oklch(79% 0.12 350);
  --code-attr:oklch(87% 0.09 90);
  --code-line-hl:oklch(30% 0.07 305 / 0.7);
  --code-line-hl-bar:var(--plum-300);
  --shadow-1:0 1px 2px oklch(20% 0.05 305 / 0.06), 0 1px 1px oklch(20% 0.05 305 / 0.04);
  --shadow-2:0 2px 4px oklch(20% 0.05 305 / 0.05), 0 6px 16px -4px oklch(20% 0.05 305 / 0.1);
  --shadow-3:0 4px 8px oklch(20% 0.05 305 / 0.05), 0 18px 40px -12px oklch(20% 0.05 305 / 0.18);
  --shadow-4:0 8px 16px oklch(20% 0.05 305 / 0.06), 0 40px 80px -24px oklch(20% 0.05 305 / 0.32);
  --shadow-focus:0 0 0 3px var(--bg-page), 0 0 0 5px var(--focus-ring);
  --shadow-inset:inset 0 1px 2px oklch(20% 0.05 305 / 0.08);
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg-page:oklch(15.5% 0.022 305);
  --bg-subtle:oklch(18.5% 0.026 305);
  --bg-sunken:oklch(13% 0.02 305);
  --surface-card:oklch(20% 0.028 305);
  --surface-raised:oklch(24% 0.032 305);
  --surface-tint:oklch(23% 0.055 305);
  --surface-brand:oklch(24% 0.09 305);
  --surface-brand-2:oklch(29% 0.11 305);
  --surface-inverse:var(--plum-50);
  --surface-overlay:oklch(8% 0.02 305 / 0.7);
  --text-1:oklch(96.5% 0.008 305);
  --text-2:oklch(87% 0.016 305);
  --text-3:oklch(74% 0.022 305);
  --text-4:oklch(63% 0.022 305);
  --text-accent:var(--plum-300);
  --text-on-brand:var(--white);
  --text-on-brand-2:var(--plum-200);
  --text-on-accent:var(--plum-950);
  --border-1:oklch(28% 0.03 305);
  --border-2:oklch(37% 0.035 305);
  --border-strong:var(--text-1);
  --border-accent:var(--plum-700);
  --border-width:1px;
  --border-width-strong:2px;
  --accent:var(--plum-300);
  --accent-hover:var(--plum-200);
  --accent-press:var(--plum-100);
  --accent-soft:oklch(31% 0.1 305);
  --accent-softer:oklch(24% 0.06 305);
  --accent-vivid:var(--plum-400);
  --link:var(--plum-300);
  --link-hover:var(--plum-100);
  --link-underline:var(--plum-600);
  --focus-ring:var(--plum-300);
  --selection:var(--plum-700);
  --marker:oklch(34% 0.08 40);
  --marker-fg:var(--ember-100);
  --live:var(--ember-300);
  --note-bg:oklch(23% 0.055 305);
  --note-fg:var(--plum-100);
  --note-icon:var(--plum-300);
  --note-border:oklch(34% 0.09 305);
  --tip-bg:oklch(23% 0.04 155);
  --tip-fg:var(--moss-100);
  --tip-icon:var(--moss-300);
  --tip-border:oklch(35% 0.07 155);
  --warn-bg:oklch(25% 0.045 70);
  --warn-fg:var(--amber-100);
  --warn-icon:var(--amber-300);
  --warn-border:oklch(38% 0.08 70);
  --danger-bg:oklch(24% 0.05 25);
  --danger-fg:var(--rouge-100);
  --danger-icon:var(--rouge-300);
  --danger-border:oklch(38% 0.1 25);
  --prompt-bg:oklch(21% 0.045 305);
  --prompt-border:oklch(33% 0.08 305);
  --prompt-fg:var(--text-1);
  --prompt-var-bg:oklch(32% 0.08 40);
  --prompt-var-fg:var(--ember-100);
  --prompt-rail:var(--plum-400);
  --stage-1:var(--plum-700);
  --stage-2:var(--plum-500);
  --stage-3:var(--plum-300);
  --stage-4:var(--plum-100);
  --stage-empty:oklch(30% 0.03 305);
  --placeholder-bg:oklch(21% 0.04 305);
  --placeholder-stripe:oklch(24% 0.05 305);
  --placeholder-fg:var(--plum-200);
  --code-bg:oklch(11.5% 0.022 305);
  --code-bg-2:oklch(15% 0.03 305);
  --code-border:oklch(26% 0.04 305);
  --code-fg:oklch(93% 0.012 305);
  --code-muted:oklch(68% 0.03 305);
  --code-comment:oklch(66% 0.035 305);
  --code-keyword:oklch(78% 0.12 305);
  --code-string:oklch(83% 0.1 155);
  --code-number:oklch(82% 0.11 45);
  --code-fn:oklch(84% 0.08 235);
  --code-tag:oklch(79% 0.12 350);
  --code-attr:oklch(87% 0.09 90);
  --code-line-hl:oklch(30% 0.07 305 / 0.7);
  --code-line-hl-bar:var(--plum-300);
  --shadow-1:0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-2:0 2px 6px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(100% 0 0 / 0.04);
  --shadow-3:0 12px 32px -8px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(100% 0 0 / 0.06);
  --shadow-4:0 32px 72px -16px oklch(0% 0 0 / 0.75), 0 0 0 1px oklch(100% 0 0 / 0.08);
  --shadow-focus:0 0 0 3px var(--bg-page), 0 0 0 5px var(--focus-ring);
  --shadow-inset:inset 0 1px 2px oklch(0% 0 0 / 0.4);
}

[data-theme="hc"]{
  color-scheme:light;
  --bg-page:var(--white);
  --bg-subtle:var(--white);
  --bg-sunken:var(--mist-50);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-tint:var(--white);
  --surface-brand:var(--black);
  --surface-brand-2:var(--black);
  --surface-inverse:var(--black);
  --surface-overlay:oklch(16% 0.05 305 / 0.55);
  --text-1:var(--black);
  --text-2:var(--black);
  --text-3:oklch(25% 0.02 305);
  --text-4:oklch(32% 0.02 305);
  --text-accent:var(--plum-800);
  --text-on-brand:var(--white);
  --text-on-brand-2:var(--white);
  --text-on-accent:var(--white);
  --border-1:var(--black);
  --border-2:var(--black);
  --border-strong:var(--text-1);
  --border-accent:var(--plum-800);
  --border-width:2px;
  --border-width-strong:3px;
  --accent:var(--plum-800);
  --accent-hover:var(--plum-900);
  --accent-press:var(--black);
  --accent-soft:var(--plum-100);
  --accent-softer:var(--white);
  --accent-vivid:var(--plum-800);
  --link:var(--plum-800);
  --link-hover:var(--black);
  --link-underline:var(--plum-800);
  --focus-ring:var(--black);
  --selection:var(--black);
  --marker:var(--amber-300);
  --marker-fg:var(--black);
  --live:var(--ember-500);
  --note-bg:var(--white);
  --note-fg:var(--black);
  --note-icon:var(--plum-800);
  --note-border:var(--black);
  --tip-bg:var(--white);
  --tip-fg:var(--black);
  --tip-icon:var(--moss-700);
  --tip-border:var(--black);
  --warn-bg:var(--white);
  --warn-fg:var(--black);
  --warn-icon:var(--amber-700);
  --warn-border:var(--black);
  --danger-bg:var(--white);
  --danger-fg:var(--black);
  --danger-icon:var(--rouge-700);
  --danger-border:var(--black);
  --prompt-bg:var(--white);
  --prompt-border:var(--black);
  --prompt-fg:var(--text-1);
  --prompt-var-bg:var(--amber-300);
  --prompt-var-fg:var(--black);
  --prompt-rail:var(--black);
  --stage-1:var(--plum-800);
  --stage-2:var(--plum-800);
  --stage-3:var(--plum-800);
  --stage-4:var(--plum-800);
  --stage-empty:var(--white);
  --placeholder-bg:var(--white);
  --placeholder-stripe:var(--mist-100);
  --placeholder-fg:var(--black);
  --code-bg:var(--black);
  --code-bg-2:var(--black);
  --code-border:var(--white);
  --code-fg:var(--white);
  --code-muted:oklch(88% 0 0);
  --code-comment:oklch(88% 0.03 305);
  --code-keyword:oklch(86% 0.1 305);
  --code-string:oklch(90% 0.12 155);
  --code-number:oklch(90% 0.1 60);
  --code-fn:oklch(90% 0.08 235);
  --code-tag:oklch(88% 0.1 350);
  --code-attr:oklch(93% 0.1 95);
  --code-line-hl:oklch(35% 0.1 305);
  --code-line-hl-bar:var(--white);
  --shadow-1:none;
  --shadow-2:0 0 0 2px var(--black);
  --shadow-3:0 0 0 2px var(--black);
  --shadow-4:0 0 0 3px var(--black);
  --shadow-focus:0 0 0 3px var(--white), 0 0 0 6px var(--black);
  --shadow-inset:none;
}

[data-theme="hc-dark"]{
  color-scheme:dark;
  --bg-page:var(--black);
  --bg-subtle:var(--black);
  --bg-sunken:var(--black);
  --surface-card:var(--black);
  --surface-raised:var(--black);
  --surface-tint:var(--black);
  --surface-brand:var(--black);
  --surface-brand-2:var(--black);
  --surface-inverse:var(--white);
  --surface-overlay:oklch(8% 0.02 305 / 0.7);
  --text-1:var(--white);
  --text-2:var(--white);
  --text-3:oklch(90% 0.01 305);
  --text-4:oklch(84% 0.01 305);
  --text-accent:var(--plum-200);
  --text-on-brand:var(--white);
  --text-on-brand-2:var(--white);
  --text-on-accent:var(--black);
  --border-1:var(--white);
  --border-2:var(--white);
  --border-strong:var(--white);
  --border-accent:var(--plum-200);
  --border-width:2px;
  --border-width-strong:3px;
  --accent:var(--plum-200);
  --accent-hover:var(--plum-100);
  --accent-press:var(--white);
  --accent-soft:oklch(30% 0.1 305);
  --accent-softer:var(--black);
  --accent-vivid:var(--plum-200);
  --link:var(--plum-200);
  --link-hover:var(--white);
  --link-underline:var(--plum-200);
  --focus-ring:var(--white);
  --selection:var(--white);
  --marker:var(--amber-300);
  --marker-fg:var(--black);
  --live:var(--ember-300);
  --note-bg:var(--black);
  --note-fg:var(--white);
  --note-icon:var(--plum-300);
  --note-border:var(--white);
  --tip-bg:var(--black);
  --tip-fg:var(--white);
  --tip-icon:var(--moss-300);
  --tip-border:var(--white);
  --warn-bg:var(--black);
  --warn-fg:var(--white);
  --warn-icon:var(--amber-300);
  --warn-border:var(--white);
  --danger-bg:var(--black);
  --danger-fg:var(--white);
  --danger-icon:var(--rouge-300);
  --danger-border:var(--white);
  --prompt-bg:var(--black);
  --prompt-border:var(--white);
  --prompt-fg:var(--text-1);
  --prompt-var-bg:var(--amber-300);
  --prompt-var-fg:var(--black);
  --prompt-rail:var(--white);
  --stage-1:var(--plum-200);
  --stage-2:var(--plum-200);
  --stage-3:var(--plum-200);
  --stage-4:var(--plum-200);
  --stage-empty:var(--black);
  --placeholder-bg:var(--black);
  --placeholder-stripe:oklch(20% 0 0);
  --placeholder-fg:var(--white);
  --code-bg:var(--black);
  --code-bg-2:var(--black);
  --code-border:var(--white);
  --code-fg:var(--white);
  --code-muted:oklch(68% 0.03 305);
  --code-comment:oklch(88% 0.03 305);
  --code-keyword:oklch(78% 0.12 305);
  --code-string:oklch(83% 0.1 155);
  --code-number:oklch(82% 0.11 45);
  --code-fn:oklch(84% 0.08 235);
  --code-tag:oklch(79% 0.12 350);
  --code-attr:oklch(87% 0.09 90);
  --code-line-hl:oklch(35% 0.1 305);
  --code-line-hl-bar:var(--white);
  --shadow-1:none;
  --shadow-2:0 0 0 2px var(--white);
  --shadow-3:0 0 0 2px var(--white);
  --shadow-4:0 0 0 3px var(--white);
  --shadow-focus:0 0 0 3px var(--black), 0 0 0 6px var(--white);
  --shadow-inset:none;
}