/* ── Multi-theme support ─────────────────────────────────────────────────── */
/* Each html.theme-* block defines Shoelace tokens + semantic CSS variables. */
/* Utility classes below reference the semantic variables.                    */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Inter:wght@400;500;600&family=Nunito:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════════════════ */
/*  THEME: Hacker Green — phosphor CRT terminal                             */
/* ══════════════════════════════════════════════════════════════════════════ */
html.theme-hacker,
html.theme-hacker.sl-theme-dark {
  --sl-font-sans: 'Share Tech Mono', 'Courier New', monospace;
  --sl-font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --sl-letter-spacing-normal: 0.03em;

  --sl-border-radius-small: 0px;
  --sl-border-radius-medium: 2px;
  --sl-border-radius-large: 2px;
  --sl-border-radius-x-large: 2px;

  --sl-color-gray-50: hsl(120 20% 4%);
  --sl-color-gray-100: hsl(120 18% 7%);
  --sl-color-gray-200: hsl(120 16% 12%);
  --sl-color-gray-300: hsl(120 14% 20%);
  --sl-color-gray-400: hsl(120 28% 30%);
  --sl-color-gray-500: hsl(120 42% 40%);
  --sl-color-gray-600: hsl(120 55% 50%);
  --sl-color-gray-700: hsl(120 65% 62%);
  --sl-color-gray-800: hsl(120 72% 72%);
  --sl-color-gray-900: hsl(120 78% 82%);
  --sl-color-gray-950: hsl(120 82% 90%);

  --sl-color-neutral-0: hsl(120 22% 2%);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-1000: hsl(120 85% 95%);

  --sl-color-primary-50: hsl(120 60% 6%);
  --sl-color-primary-100: hsl(120 58% 10%);
  --sl-color-primary-200: hsl(120 56% 16%);
  --sl-color-primary-300: hsl(120 58% 26%);
  --sl-color-primary-400: hsl(120 70% 38%);
  --sl-color-primary-500: hsl(120 80% 50%);
  --sl-color-primary-600: hsl(120 78% 60%);
  --sl-color-primary-700: hsl(120 72% 70%);
  --sl-color-primary-800: hsl(120 66% 80%);
  --sl-color-primary-900: hsl(120 60% 88%);
  --sl-color-primary-950: hsl(120 52% 93%);

  --sl-color-danger-50: hsl(0 60% 7%);
  --sl-color-danger-100: hsl(0 58% 12%);
  --sl-color-danger-200: hsl(0 56% 20%);
  --sl-color-danger-300: hsl(0 60% 30%);
  --sl-color-danger-400: hsl(0 70% 42%);
  --sl-color-danger-500: hsl(0 80% 54%);
  --sl-color-danger-600: hsl(0 78% 63%);
  --sl-color-danger-700: hsl(0 70% 72%);
  --sl-color-danger-800: hsl(0 62% 82%);
  --sl-color-danger-900: hsl(0 52% 90%);
  --sl-color-danger-950: hsl(0 44% 95%);

  --sl-color-success-50: hsl(120 65% 8%);
  --sl-color-success-100: hsl(120 62% 14%);
  --sl-color-success-200: hsl(120 60% 22%);
  --sl-color-success-300: hsl(120 62% 33%);
  --sl-color-success-400: hsl(120 72% 44%);
  --sl-color-success-500: hsl(120 82% 56%);
  --sl-color-success-600: hsl(120 78% 65%);
  --sl-color-success-700: hsl(120 70% 73%);
  --sl-color-success-800: hsl(120 62% 82%);
  --sl-color-success-900: hsl(120 52% 90%);
  --sl-color-success-950: hsl(120 42% 95%);

  --sl-color-warning-50: hsl(45 80% 8%);
  --sl-color-warning-100: hsl(45 78% 14%);
  --sl-color-warning-200: hsl(45 76% 22%);
  --sl-color-warning-300: hsl(45 78% 32%);
  --sl-color-warning-400: hsl(45 88% 46%);
  --sl-color-warning-500: hsl(45 96% 56%);
  --sl-color-warning-600: hsl(45 92% 64%);
  --sl-color-warning-700: hsl(45 85% 72%);
  --sl-color-warning-800: hsl(45 75% 82%);
  --sl-color-warning-900: hsl(45 65% 90%);
  --sl-color-warning-950: hsl(45 55% 95%);

  --sl-focus-ring-color: hsl(120 85% 50%);
  --sl-focus-ring-style: 0 0 0 2px hsl(120 85% 50% / 50%);

  --sl-input-background-color: hsl(120 18% 5%);
  --sl-input-background-color-hover: hsl(120 16% 8%);
  --sl-input-background-color-focus: hsl(120 16% 7%);
  --sl-input-border-color: hsl(120 40% 22%);
  --sl-input-border-color-hover: hsl(120 60% 38%);
  --sl-input-border-color-focus: hsl(120 80% 50%);
  --sl-input-focus-ring-color: hsl(120 80% 50% / 35%);

  --sl-panel-background-color: hsl(120 18% 5%);
  --sl-panel-border-color: hsl(120 35% 18%);

  --sl-shadow-x-small: 0 1px 2px hsl(120 50% 2% / 0.8), 0 0 0 1px hsl(120 40% 15% / 0.3);
  --sl-shadow-small: 0 2px 6px hsl(120 50% 2% / 0.8), 0 0 6px hsl(120 70% 30% / 0.15);
  --sl-shadow-medium: 0 4px 14px hsl(120 50% 2% / 0.9), 0 0 14px hsl(120 70% 40% / 0.2);
  --sl-shadow-large: 0 8px 28px hsl(120 50% 2% / 0.95), 0 0 28px hsl(120 70% 40% / 0.25);
  --sl-shadow-x-large: 0 16px 48px hsl(120 50% 2% / 1), 0 0 48px hsl(120 70% 45% / 0.3);

  /* Semantic tokens */
  --color-bg: hsl(120 20% 3%);
  --color-surface: hsl(120 18% 5%);
  --color-surface-hover: hsl(120 18% 8%);
  --color-surface-border: hsl(120 40% 20%);
  --color-surface-inset: hsl(120 50% 5% / 0.5);
  --color-header-bg: hsl(120 22% 3% / 0.75);
  --color-header-border: hsl(120 50% 22%);
  --color-header-shadow: 0 4px 20px hsl(120 60% 5% / 0.6), 0 1px 0 hsl(120 50% 22% / 0.5);
  --color-footer-border: hsl(120 40% 16%);

  --color-text-body: hsl(120 72% 72%);
  --color-text-heading: hsl(120 82% 82%);
  --color-heading-glow: 0 0 8px hsl(120 75% 50% / 40%);
  --color-text-muted: hsl(120 45% 48%);
  --color-text-faint: hsl(120 30% 32%);
  --color-accent: hsl(120 55% 55%);
  --color-accent-glow: 0 0 6px hsl(120 80% 50% / 50%);

  --color-label: hsl(120 45% 45%);
  --color-tag-bg: hsl(120 20% 8%);
  --color-tag-text: hsl(120 55% 50%);
  --color-tag-border: hsl(120 40% 20%);

  --color-input-bg: hsl(120 18% 5%);
  --color-input-border: hsl(120 40% 22%);
  --color-input-border-focus: hsl(120 80% 50%);
  --color-input-text: hsl(120 72% 72%);
  --color-input-placeholder: hsl(120 30% 30%);
  --color-input-caret: hsl(120 85% 60%);
  --color-input-focus-shadow: 0 0 0 2px hsl(120 80% 50% / 45%), 0 0 8px hsl(120 70% 40% / 30%);

  --color-btn-text: hsl(120 82% 55%);
  --color-btn-border: hsl(120 75% 45%);
  --color-btn-hover-bg: hsl(120 70% 15% / 0.5);
  --color-btn-hover-shadow: 0 0 10px hsl(120 70% 40% / 35%);
  --color-btn-text-shadow: 0 0 6px hsl(120 80% 50% / 60%);
  --color-btn-ghost-text: hsl(120 55% 55%);
  --color-btn-ghost-border: hsl(120 35% 22%);
  --color-btn-ghost-hover-bg: hsl(120 20% 10% / 0.5);
  --color-btn-ghost-hover-bdr: hsl(120 50% 36%);

  --color-card-bg: hsl(120 18% 5%);
  --color-card-border: hsl(120 38% 18%);
  --color-card-hover-border: hsl(120 70% 42%);
  --color-card-hover-shadow: 0 0 16px hsl(120 70% 35% / 0.25), inset 0 0 24px hsl(120 50% 10% / 0.3);

  --bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='0.5' cy='0.5' r='0.8' fill='rgb(0,200,60)' opacity='0.07'/%3E%3Ccircle cx='19.5' cy='0.5' r='0.8' fill='rgb(0,200,60)' opacity='0.07'/%3E%3Ccircle cx='0.5' cy='19.5' r='0.8' fill='rgb(0,200,60)' opacity='0.07'/%3E%3Ccircle cx='19.5' cy='19.5' r='0.8' fill='rgb(0,200,60)' opacity='0.07'/%3E%3C/svg%3E");
  --bg-texture-size: 20px 20px;
}

/* CRT scanlines — Hacker Green only */
html.theme-hacker body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      transparent,
      transparent 3px,
      hsl(0 0% 0% / 0.06) 3px,
      hsl(0 0% 0% / 0.06) 4px);
  pointer-events: none;
  z-index: 9998;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  THEME: Good at Business — clean corporate light                    */
/* ══════════════════════════════════════════════════════════════════════════ */
html.theme-business,
html.theme-business.sl-theme-dark {
  --sl-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --sl-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --sl-letter-spacing-normal: 0;

  --sl-border-radius-small: 4px;
  --sl-border-radius-medium: 8px;
  --sl-border-radius-large: 12px;
  --sl-border-radius-x-large: 16px;

  /* Light theme — 50 is lightest, 950 is darkest */
  --sl-color-gray-50: hsl(220 16% 96%);
  --sl-color-gray-100: hsl(220 14% 92%);
  --sl-color-gray-200: hsl(220 12% 84%);
  --sl-color-gray-300: hsl(220 10% 72%);
  --sl-color-gray-400: hsl(220 8% 56%);
  --sl-color-gray-500: hsl(220 6% 44%);
  --sl-color-gray-600: hsl(220 8% 34%);
  --sl-color-gray-700: hsl(220 10% 25%);
  --sl-color-gray-800: hsl(220 12% 17%);
  --sl-color-gray-900: hsl(220 14% 10%);
  --sl-color-gray-950: hsl(220 16% 5%);

  --sl-color-neutral-0: hsl(0 0% 100%);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-1000: hsl(220 18% 3%);

  --sl-color-primary-50: hsl(210 90% 96%);
  --sl-color-primary-100: hsl(210 85% 90%);
  --sl-color-primary-200: hsl(210 78% 78%);
  --sl-color-primary-300: hsl(210 72% 62%);
  --sl-color-primary-400: hsl(210 78% 48%);
  --sl-color-primary-500: hsl(210 90% 40%);
  --sl-color-primary-600: hsl(210 85% 32%);
  --sl-color-primary-700: hsl(210 78% 25%);
  --sl-color-primary-800: hsl(210 68% 18%);
  --sl-color-primary-900: hsl(210 58% 12%);
  --sl-color-primary-950: hsl(210 50% 7%);

  --sl-color-danger-50: hsl(0 80% 97%);
  --sl-color-danger-100: hsl(0 75% 90%);
  --sl-color-danger-200: hsl(0 70% 78%);
  --sl-color-danger-300: hsl(0 65% 62%);
  --sl-color-danger-400: hsl(0 70% 48%);
  --sl-color-danger-500: hsl(0 75% 40%);
  --sl-color-danger-600: hsl(0 68% 32%);
  --sl-color-danger-700: hsl(0 60% 25%);
  --sl-color-danger-800: hsl(0 52% 18%);
  --sl-color-danger-900: hsl(0 44% 12%);
  --sl-color-danger-950: hsl(0 38% 7%);

  --sl-color-success-50: hsl(145 60% 96%);
  --sl-color-success-100: hsl(145 55% 88%);
  --sl-color-success-200: hsl(145 50% 72%);
  --sl-color-success-300: hsl(145 52% 52%);
  --sl-color-success-400: hsl(145 58% 38%);
  --sl-color-success-500: hsl(145 62% 30%);
  --sl-color-success-600: hsl(145 56% 24%);
  --sl-color-success-700: hsl(145 50% 18%);
  --sl-color-success-800: hsl(145 44% 13%);
  --sl-color-success-900: hsl(145 38% 8%);
  --sl-color-success-950: hsl(145 32% 5%);

  --sl-color-warning-50: hsl(42 90% 96%);
  --sl-color-warning-100: hsl(42 85% 88%);
  --sl-color-warning-200: hsl(42 78% 72%);
  --sl-color-warning-300: hsl(42 74% 54%);
  --sl-color-warning-400: hsl(42 80% 40%);
  --sl-color-warning-500: hsl(42 85% 32%);
  --sl-color-warning-600: hsl(42 78% 26%);
  --sl-color-warning-700: hsl(42 68% 20%);
  --sl-color-warning-800: hsl(42 58% 14%);
  --sl-color-warning-900: hsl(42 48% 10%);
  --sl-color-warning-950: hsl(42 40% 6%);

  --sl-focus-ring-color: hsl(210 90% 40%);
  --sl-focus-ring-style: 0 0 0 2px hsl(210 90% 40% / 35%);

  --sl-input-background-color: hsl(0 0% 100%);
  --sl-input-background-color-hover: hsl(220 16% 97%);
  --sl-input-background-color-focus: hsl(0 0% 100%);
  --sl-input-border-color: hsl(220 12% 80%);
  --sl-input-border-color-hover: hsl(210 40% 55%);
  --sl-input-border-color-focus: hsl(210 90% 40%);
  --sl-input-focus-ring-color: hsl(210 90% 40% / 20%);

  --sl-panel-background-color: hsl(0 0% 100%);
  --sl-panel-border-color: hsl(220 12% 86%);

  --sl-shadow-x-small: 0 1px 2px hsl(220 10% 50% / 0.06);
  --sl-shadow-small: 0 2px 6px hsl(220 10% 50% / 0.06);
  --sl-shadow-medium: 0 4px 14px hsl(220 10% 40% / 0.08);
  --sl-shadow-large: 0 8px 28px hsl(220 10% 40% / 0.1);
  --sl-shadow-x-large: 0 16px 48px hsl(220 10% 30% / 0.12);

  --color-bg: hsl(220 16% 96%);
  --color-surface: hsl(0 0% 100%);
  --color-surface-hover: hsl(220 14% 95%);
  --color-surface-border: hsl(220 12% 88%);
  --color-surface-inset: transparent;
  --color-header-bg: hsl(0 0% 100% / 0.75);
  --color-header-border: hsl(220 12% 88%);
  --color-header-shadow: 0 4px 16px hsl(220 15% 40% / 0.15), 0 1px 0 hsl(220 12% 88%);
  --color-footer-border: hsl(220 12% 88%);

  --color-text-body: hsl(220 12% 28%);
  --color-text-heading: hsl(220 16% 8%);
  --color-heading-glow: none;
  --color-text-muted: hsl(220 8% 48%);
  --color-text-faint: hsl(220 6% 62%);
  --color-accent: hsl(210 75% 40%);
  --color-accent-glow: none;

  --color-label: hsl(220 8% 48%);
  --color-tag-bg: hsl(220 14% 94%);
  --color-tag-text: hsl(210 60% 34%);
  --color-tag-border: hsl(220 12% 86%);

  --color-input-bg: hsl(0 0% 100%);
  --color-input-border: hsl(220 12% 80%);
  --color-input-border-focus: hsl(210 90% 40%);
  --color-input-text: hsl(220 14% 16%);
  --color-input-placeholder: hsl(220 8% 60%);
  --color-input-caret: hsl(210 90% 40%);
  --color-input-focus-shadow: 0 0 0 2px hsl(210 90% 40% / 25%);

  --color-btn-bg: hsl(210 80% 42%);
  --color-btn-text: hsl(0 0% 100%);
  --color-btn-border: hsl(210 80% 42%);
  --color-btn-hover-bg: hsl(210 80% 38%);
  --color-btn-hover-shadow: 0 2px 6px hsl(210 60% 30% / 0.2);
  --color-btn-text-shadow: none;
  --color-btn-ghost-text: hsl(220 10% 34%);
  --color-btn-ghost-border: hsl(220 12% 82%);
  --color-btn-ghost-hover-bg: hsl(220 14% 94%);
  --color-btn-ghost-hover-bdr: hsl(220 10% 72%);

  --color-card-bg: hsl(0 0% 100%);
  --color-card-border: hsl(220 12% 88%);
  --color-card-hover-border: hsl(210 60% 52%);
  --color-card-hover-shadow: 0 4px 12px hsl(220 10% 40% / 0.1);

  --bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0L20 20M0 20L20 20' stroke='rgb(100,130,180)' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
  --bg-texture-size: 20px 20px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  THEME: Spring — tulip garden, grassy greens & earthy browns             */
/* ══════════════════════════════════════════════════════════════════════════ */
html.theme-spring,
html.theme-spring.sl-theme-dark {
  --sl-font-sans: 'Nunito', system-ui, sans-serif;
  --sl-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --sl-letter-spacing-normal: 0;

  --sl-border-radius-small: 4px;
  --sl-border-radius-medium: 8px;
  --sl-border-radius-large: 12px;
  --sl-border-radius-x-large: 16px;

  /* Light theme — 50 is lightest, 950 is darkest */
  --sl-color-gray-50: hsl(80 20% 95%);
  --sl-color-gray-100: hsl(80 16% 90%);
  --sl-color-gray-200: hsl(80 12% 82%);
  --sl-color-gray-300: hsl(80 10% 70%);
  --sl-color-gray-400: hsl(80 8% 55%);
  --sl-color-gray-500: hsl(80 6% 42%);
  --sl-color-gray-600: hsl(80 8% 32%);
  --sl-color-gray-700: hsl(80 10% 24%);
  --sl-color-gray-800: hsl(80 12% 16%);
  --sl-color-gray-900: hsl(80 14% 9%);
  --sl-color-gray-950: hsl(80 16% 5%);

  --sl-color-neutral-0: hsl(60 20% 97%);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-1000: hsl(80 18% 3%);

  --sl-color-primary-50: hsl(110 50% 95%);
  --sl-color-primary-100: hsl(110 48% 88%);
  --sl-color-primary-200: hsl(110 46% 76%);
  --sl-color-primary-300: hsl(110 48% 60%);
  --sl-color-primary-400: hsl(110 55% 44%);
  --sl-color-primary-500: hsl(110 60% 34%);
  --sl-color-primary-600: hsl(110 58% 28%);
  --sl-color-primary-700: hsl(110 52% 22%);
  --sl-color-primary-800: hsl(110 46% 16%);
  --sl-color-primary-900: hsl(110 40% 10%);
  --sl-color-primary-950: hsl(110 36% 6%);

  --sl-color-danger-50: hsl(0 70% 96%);
  --sl-color-danger-100: hsl(0 68% 88%);
  --sl-color-danger-200: hsl(0 65% 76%);
  --sl-color-danger-300: hsl(0 62% 62%);
  --sl-color-danger-400: hsl(0 65% 48%);
  --sl-color-danger-500: hsl(0 70% 40%);
  --sl-color-danger-600: hsl(0 65% 32%);
  --sl-color-danger-700: hsl(0 58% 24%);
  --sl-color-danger-800: hsl(0 50% 18%);
  --sl-color-danger-900: hsl(0 42% 10%);
  --sl-color-danger-950: hsl(0 36% 6%);

  --sl-color-success-50: hsl(140 55% 95%);
  --sl-color-success-100: hsl(140 52% 86%);
  --sl-color-success-200: hsl(140 48% 72%);
  --sl-color-success-300: hsl(140 50% 55%);
  --sl-color-success-400: hsl(140 56% 40%);
  --sl-color-success-500: hsl(140 60% 32%);
  --sl-color-success-600: hsl(140 55% 26%);
  --sl-color-success-700: hsl(140 48% 20%);
  --sl-color-success-800: hsl(140 42% 14%);
  --sl-color-success-900: hsl(140 36% 8%);
  --sl-color-success-950: hsl(140 30% 5%);

  --sl-color-warning-50: hsl(35 80% 95%);
  --sl-color-warning-100: hsl(35 75% 86%);
  --sl-color-warning-200: hsl(35 70% 72%);
  --sl-color-warning-300: hsl(35 72% 56%);
  --sl-color-warning-400: hsl(35 78% 42%);
  --sl-color-warning-500: hsl(35 82% 34%);
  --sl-color-warning-600: hsl(35 75% 28%);
  --sl-color-warning-700: hsl(35 65% 22%);
  --sl-color-warning-800: hsl(35 55% 16%);
  --sl-color-warning-900: hsl(35 45% 10%);
  --sl-color-warning-950: hsl(35 38% 6%);

  --sl-focus-ring-color: hsl(110 60% 34%);
  --sl-focus-ring-style: 0 0 0 2px hsl(110 60% 34% / 40%);

  --sl-input-background-color: hsl(60 20% 98%);
  --sl-input-background-color-hover: hsl(60 18% 96%);
  --sl-input-background-color-focus: hsl(60 20% 99%);
  --sl-input-border-color: hsl(80 14% 78%);
  --sl-input-border-color-hover: hsl(110 30% 50%);
  --sl-input-border-color-focus: hsl(110 60% 34%);
  --sl-input-focus-ring-color: hsl(110 60% 34% / 25%);

  --sl-panel-background-color: hsl(60 20% 98%);
  --sl-panel-border-color: hsl(80 14% 82%);

  --sl-shadow-x-small: 0 1px 2px hsl(80 10% 50% / 0.12);
  --sl-shadow-small: 0 2px 6px hsl(80 10% 50% / 0.1);
  --sl-shadow-medium: 0 4px 14px hsl(80 10% 40% / 0.1);
  --sl-shadow-large: 0 8px 28px hsl(80 10% 40% / 0.12);
  --sl-shadow-x-large: 0 16px 48px hsl(80 10% 30% / 0.15);

  --color-bg: hsl(60 25% 95%);
  --color-surface: hsl(60 20% 98%);
  --color-surface-hover: hsl(80 16% 93%);
  --color-surface-border: hsl(80 14% 82%);
  --color-surface-inset: transparent;
  --color-header-bg: hsl(60 22% 97% / 0.75);
  --color-header-border: hsl(80 14% 82%);
  --color-header-shadow: 0 4px 16px hsl(80 20% 30% / 0.12), 0 1px 0 hsl(80 14% 82%);
  --color-footer-border: hsl(80 12% 84%);

  --color-text-body: hsl(80 12% 22%);
  --color-text-heading: hsl(80 16% 8%);
  --color-heading-glow: none;
  --color-text-muted: hsl(80 8% 44%);
  --color-text-faint: hsl(80 6% 60%);
  --color-accent: hsl(110 52% 36%);
  --color-accent-glow: none;

  --color-label: hsl(30 30% 42%);
  --color-tag-bg: hsl(80 20% 92%);
  --color-tag-text: hsl(110 50% 28%);
  --color-tag-border: hsl(80 16% 80%);

  --color-input-bg: hsl(60 20% 98%);
  --color-input-border: hsl(80 14% 78%);
  --color-input-border-focus: hsl(110 60% 34%);
  --color-input-text: hsl(80 12% 18%);
  --color-input-placeholder: hsl(80 8% 58%);
  --color-input-caret: hsl(110 60% 34%);
  --color-input-focus-shadow: 0 0 0 2px hsl(110 60% 34% / 30%);

  --color-btn-bg: hsl(110 55% 34%);
  --color-btn-text: hsl(60 20% 98%);
  --color-btn-border: hsl(110 55% 34%);
  --color-btn-hover-bg: hsl(110 55% 30%);
  --color-btn-hover-shadow: 0 2px 8px hsl(110 40% 20% / 0.2);
  --color-btn-text-shadow: none;
  --color-btn-ghost-text: hsl(80 10% 32%);
  --color-btn-ghost-border: hsl(80 12% 78%);
  --color-btn-ghost-hover-bg: hsl(80 15% 92%);
  --color-btn-ghost-hover-bdr: hsl(80 14% 68%);

  --color-card-bg: hsl(60 20% 98%);
  --color-card-border: hsl(80 14% 84%);
  --color-card-hover-border: hsl(110 45% 42%);
  --color-card-hover-shadow: 0 4px 16px hsl(80 10% 40% / 0.12);

  --bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100'%3E%3Cpath d='M38,88 C14,80 4,58 18,38 C28,20 52,14 54,30 C56,44 42,54 32,50 C22,46 20,32 30,26 C38,20 52,26 48,38 C44,50 34,52 36,46' stroke='rgb(80,140,40)' stroke-width='1.8' fill='none' opacity='0.22' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='28' r='2.5' fill='rgb(190,130,20)' opacity='0.2'/%3E%3Cpath d='M62,28 C56,24 54,14 60,8 C64,2 74,2 74,10 C74,16 68,18 64,16 C60,12 62,6 66,6 C70,6 72,10 70,14' stroke='rgb(190,130,20)' stroke-width='1.2' fill='none' opacity='0.2' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='74' r='1.5' fill='rgb(80,140,40)' opacity='0.15'/%3E%3C/svg%3E");
  --bg-texture-size: 80px 100px;
  --bg-overlay: hsl(60 25% 95% / 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  THEME: Summer — ocean breeze, soft blues & light wood tones             */
/* ══════════════════════════════════════════════════════════════════════════ */
html.theme-summer,
html.theme-summer.sl-theme-dark {
  --sl-font-sans: 'Nunito', system-ui, sans-serif;
  --sl-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --sl-letter-spacing-normal: 0;

  --sl-border-radius-small: 6px;
  --sl-border-radius-medium: 10px;
  --sl-border-radius-large: 14px;
  --sl-border-radius-x-large: 20px;

  --sl-color-gray-50: hsl(210 25% 96%);
  --sl-color-gray-100: hsl(210 20% 91%);
  --sl-color-gray-200: hsl(210 16% 83%);
  --sl-color-gray-300: hsl(210 12% 70%);
  --sl-color-gray-400: hsl(210 10% 55%);
  --sl-color-gray-500: hsl(210 8% 42%);
  --sl-color-gray-600: hsl(210 10% 32%);
  --sl-color-gray-700: hsl(210 12% 24%);
  --sl-color-gray-800: hsl(210 14% 16%);
  --sl-color-gray-900: hsl(210 16% 9%);
  --sl-color-gray-950: hsl(210 18% 5%);

  --sl-color-neutral-0: hsl(205 30% 98%);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-1000: hsl(210 20% 3%);

  --sl-color-primary-50: hsl(205 70% 96%);
  --sl-color-primary-100: hsl(205 65% 88%);
  --sl-color-primary-200: hsl(205 60% 76%);
  --sl-color-primary-300: hsl(205 58% 60%);
  --sl-color-primary-400: hsl(205 62% 46%);
  --sl-color-primary-500: hsl(205 68% 38%);
  --sl-color-primary-600: hsl(205 64% 30%);
  --sl-color-primary-700: hsl(205 56% 24%);
  --sl-color-primary-800: hsl(205 48% 18%);
  --sl-color-primary-900: hsl(205 40% 11%);
  --sl-color-primary-950: hsl(205 35% 7%);

  --sl-color-danger-50: hsl(355 70% 96%);
  --sl-color-danger-100: hsl(355 65% 88%);
  --sl-color-danger-200: hsl(355 60% 76%);
  --sl-color-danger-300: hsl(355 58% 60%);
  --sl-color-danger-400: hsl(355 62% 46%);
  --sl-color-danger-500: hsl(355 68% 40%);
  --sl-color-danger-600: hsl(355 62% 32%);
  --sl-color-danger-700: hsl(355 54% 24%);
  --sl-color-danger-800: hsl(355 46% 18%);
  --sl-color-danger-900: hsl(355 38% 10%);
  --sl-color-danger-950: hsl(355 32% 6%);

  --sl-color-success-50: hsl(165 55% 95%);
  --sl-color-success-100: hsl(165 50% 85%);
  --sl-color-success-200: hsl(165 46% 70%);
  --sl-color-success-300: hsl(165 50% 50%);
  --sl-color-success-400: hsl(165 56% 38%);
  --sl-color-success-500: hsl(165 60% 30%);
  --sl-color-success-600: hsl(165 55% 24%);
  --sl-color-success-700: hsl(165 48% 18%);
  --sl-color-success-800: hsl(165 42% 13%);
  --sl-color-success-900: hsl(165 36% 8%);
  --sl-color-success-950: hsl(165 30% 5%);

  --sl-color-warning-50: hsl(32 80% 95%);
  --sl-color-warning-100: hsl(32 72% 86%);
  --sl-color-warning-200: hsl(32 66% 72%);
  --sl-color-warning-300: hsl(32 68% 56%);
  --sl-color-warning-400: hsl(32 74% 42%);
  --sl-color-warning-500: hsl(32 80% 34%);
  --sl-color-warning-600: hsl(32 72% 28%);
  --sl-color-warning-700: hsl(32 62% 22%);
  --sl-color-warning-800: hsl(32 52% 16%);
  --sl-color-warning-900: hsl(32 42% 10%);
  --sl-color-warning-950: hsl(32 35% 6%);

  --sl-focus-ring-color: hsl(205 68% 38%);
  --sl-focus-ring-style: 0 0 0 2px hsl(205 68% 38% / 35%);

  --sl-input-background-color: hsl(205 30% 99%);
  --sl-input-background-color-hover: hsl(205 25% 97%);
  --sl-input-background-color-focus: hsl(0 0% 100%);
  --sl-input-border-color: hsl(210 18% 80%);
  --sl-input-border-color-hover: hsl(205 35% 55%);
  --sl-input-border-color-focus: hsl(205 68% 38%);
  --sl-input-focus-ring-color: hsl(205 68% 38% / 20%);

  --sl-panel-background-color: hsl(205 30% 99%);
  --sl-panel-border-color: hsl(210 16% 84%);

  --sl-shadow-x-small: 0 1px 2px hsl(210 15% 50% / 0.08);
  --sl-shadow-small: 0 2px 6px hsl(210 15% 50% / 0.08);
  --sl-shadow-medium: 0 4px 14px hsl(210 15% 40% / 0.08);
  --sl-shadow-large: 0 8px 28px hsl(210 15% 40% / 0.1);
  --sl-shadow-x-large: 0 16px 48px hsl(210 15% 30% / 0.12);

  --color-bg: hsl(205 35% 96%);
  --color-surface: hsl(205 30% 99%);
  --color-surface-hover: hsl(210 20% 94%);
  --color-surface-border: hsl(210 16% 84%);
  --color-surface-inset: transparent;
  --color-header-bg: hsl(205 32% 98% / 0.75);
  --color-header-border: hsl(210 16% 84%);
  --color-header-shadow: 0 4px 16px hsl(210 20% 30% / 0.12), 0 1px 0 hsl(210 16% 84%);
  --color-footer-border: hsl(210 14% 86%);

  --color-text-body: hsl(210 14% 24%);
  --color-text-heading: hsl(210 18% 8%);
  --color-heading-glow: none;
  --color-text-muted: hsl(210 10% 46%);
  --color-text-faint: hsl(210 8% 62%);
  --color-accent: hsl(205 60% 38%);
  --color-accent-glow: none;

  --color-label: hsl(32 30% 45%);
  --color-tag-bg: hsl(205 30% 93%);
  --color-tag-text: hsl(205 55% 32%);
  --color-tag-border: hsl(210 16% 82%);

  --color-input-bg: hsl(205 30% 99%);
  --color-input-border: hsl(210 18% 80%);
  --color-input-border-focus: hsl(205 68% 38%);
  --color-input-text: hsl(210 14% 18%);
  --color-input-placeholder: hsl(210 10% 60%);
  --color-input-caret: hsl(205 68% 38%);
  --color-input-focus-shadow: 0 0 0 2px hsl(205 68% 38% / 25%);

  --color-btn-bg: hsl(205 60% 38%);
  --color-btn-text: hsl(0 0% 100%);
  --color-btn-border: hsl(205 60% 38%);
  --color-btn-hover-bg: hsl(205 60% 34%);
  --color-btn-hover-shadow: 0 2px 8px hsl(205 40% 30% / 0.2);
  --color-btn-text-shadow: none;
  --color-btn-ghost-text: hsl(210 12% 32%);
  --color-btn-ghost-border: hsl(210 16% 80%);
  --color-btn-ghost-hover-bg: hsl(210 18% 93%);
  --color-btn-ghost-hover-bdr: hsl(210 14% 70%);

  --color-card-bg: hsl(205 30% 99%);
  --color-card-border: hsl(210 16% 86%);
  --color-card-hover-border: hsl(205 50% 50%);
  --color-card-hover-shadow: 0 4px 16px hsl(210 15% 40% / 0.1);

  --bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 13C20 6 60 20 80 13' stroke='rgb(40,120,200)' stroke-width='0.8' fill='none' opacity='0.08'/%3E%3Cpath d='M0 27C20 20 60 34 80 27' stroke='rgb(40,120,200)' stroke-width='0.8' fill='none' opacity='0.05'/%3E%3C/svg%3E");
  --bg-texture-size: 80px 40px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  THEME: Autumn — pumpkin patch, warm dark with orange & amber            */
/* ══════════════════════════════════════════════════════════════════════════ */
html.theme-autumn,
html.theme-autumn.sl-theme-dark {
  --sl-font-sans: system-ui, -apple-system, sans-serif;
  --sl-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --sl-letter-spacing-normal: 0;

  --sl-border-radius-small: 3px;
  --sl-border-radius-medium: 6px;
  --sl-border-radius-large: 8px;
  --sl-border-radius-x-large: 12px;

  --sl-color-gray-50: hsl(25 18% 5%);
  --sl-color-gray-100: hsl(25 16% 8%);
  --sl-color-gray-200: hsl(25 14% 13%);
  --sl-color-gray-300: hsl(25 12% 22%);
  --sl-color-gray-400: hsl(25 10% 34%);
  --sl-color-gray-500: hsl(25 8% 46%);
  --sl-color-gray-600: hsl(25 10% 58%);
  --sl-color-gray-700: hsl(25 14% 68%);
  --sl-color-gray-800: hsl(25 18% 78%);
  --sl-color-gray-900: hsl(25 22% 86%);
  --sl-color-gray-950: hsl(25 26% 92%);

  --sl-color-neutral-0: hsl(25 20% 3%);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-1000: hsl(25 28% 96%);

  --sl-color-primary-50: hsl(22 65% 7%);
  --sl-color-primary-100: hsl(22 60% 12%);
  --sl-color-primary-200: hsl(22 58% 20%);
  --sl-color-primary-300: hsl(22 62% 32%);
  --sl-color-primary-400: hsl(22 72% 44%);
  --sl-color-primary-500: hsl(22 85% 54%);
  --sl-color-primary-600: hsl(22 82% 62%);
  --sl-color-primary-700: hsl(22 75% 70%);
  --sl-color-primary-800: hsl(22 65% 78%);
  --sl-color-primary-900: hsl(22 55% 86%);
  --sl-color-primary-950: hsl(22 45% 92%);

  --sl-color-danger-50: hsl(355 55% 7%);
  --sl-color-danger-100: hsl(355 50% 12%);
  --sl-color-danger-200: hsl(355 48% 20%);
  --sl-color-danger-300: hsl(355 52% 32%);
  --sl-color-danger-400: hsl(355 60% 44%);
  --sl-color-danger-500: hsl(355 70% 54%);
  --sl-color-danger-600: hsl(355 66% 62%);
  --sl-color-danger-700: hsl(355 58% 72%);
  --sl-color-danger-800: hsl(355 48% 80%);
  --sl-color-danger-900: hsl(355 38% 88%);
  --sl-color-danger-950: hsl(355 30% 93%);

  --sl-color-success-50: hsl(90 45% 7%);
  --sl-color-success-100: hsl(90 42% 12%);
  --sl-color-success-200: hsl(90 40% 20%);
  --sl-color-success-300: hsl(90 44% 30%);
  --sl-color-success-400: hsl(90 50% 40%);
  --sl-color-success-500: hsl(90 55% 48%);
  --sl-color-success-600: hsl(90 50% 58%);
  --sl-color-success-700: hsl(90 44% 68%);
  --sl-color-success-800: hsl(90 38% 78%);
  --sl-color-success-900: hsl(90 32% 88%);
  --sl-color-success-950: hsl(90 26% 93%);

  --sl-color-warning-50: hsl(42 75% 8%);
  --sl-color-warning-100: hsl(42 70% 14%);
  --sl-color-warning-200: hsl(42 68% 24%);
  --sl-color-warning-300: hsl(42 72% 36%);
  --sl-color-warning-400: hsl(42 82% 48%);
  --sl-color-warning-500: hsl(42 90% 56%);
  --sl-color-warning-600: hsl(42 85% 64%);
  --sl-color-warning-700: hsl(42 78% 72%);
  --sl-color-warning-800: hsl(42 68% 80%);
  --sl-color-warning-900: hsl(42 55% 88%);
  --sl-color-warning-950: hsl(42 42% 93%);

  --sl-focus-ring-color: hsl(22 85% 54%);
  --sl-focus-ring-style: 0 0 0 2px hsl(22 85% 54% / 40%);

  --sl-input-background-color: hsl(25 16% 7%);
  --sl-input-background-color-hover: hsl(25 14% 10%);
  --sl-input-background-color-focus: hsl(25 14% 9%);
  --sl-input-border-color: hsl(25 14% 22%);
  --sl-input-border-color-hover: hsl(22 40% 38%);
  --sl-input-border-color-focus: hsl(22 85% 54%);
  --sl-input-focus-ring-color: hsl(22 85% 54% / 30%);

  --sl-panel-background-color: hsl(25 16% 7%);
  --sl-panel-border-color: hsl(25 14% 18%);

  --sl-shadow-x-small: 0 1px 2px hsl(25 30% 3% / 0.7);
  --sl-shadow-small: 0 2px 6px hsl(25 30% 3% / 0.6);
  --sl-shadow-medium: 0 4px 14px hsl(25 30% 3% / 0.6);
  --sl-shadow-large: 0 8px 28px hsl(25 30% 3% / 0.7);
  --sl-shadow-x-large: 0 16px 48px hsl(25 30% 3% / 0.8);

  --color-bg: hsl(25 18% 5%);
  --color-surface: hsl(25 16% 8%);
  --color-surface-hover: hsl(25 16% 12%);
  --color-surface-border: hsl(25 14% 18%);
  --color-surface-inset: hsl(25 20% 4% / 0.4);
  --color-header-bg: hsl(25 18% 4% / 0.75);
  --color-header-border: hsl(22 25% 20%);
  --color-header-shadow: 0 4px 20px hsl(25 30% 3% / 0.7), 0 1px 0 hsl(22 25% 20% / 0.6);
  --color-footer-border: hsl(25 14% 16%);

  --color-text-body: hsl(25 22% 72%);
  --color-text-heading: hsl(25 30% 88%);
  --color-heading-glow: none;
  --color-text-muted: hsl(25 14% 48%);
  --color-text-faint: hsl(25 10% 34%);
  --color-accent: hsl(22 78% 52%);
  --color-accent-glow: none;

  --color-label: hsl(25 16% 46%);
  --color-tag-bg: hsl(25 18% 9%);
  --color-tag-text: hsl(22 60% 55%);
  --color-tag-border: hsl(25 16% 18%);

  --color-input-bg: hsl(25 16% 7%);
  --color-input-border: hsl(25 14% 22%);
  --color-input-border-focus: hsl(22 85% 54%);
  --color-input-text: hsl(25 22% 76%);
  --color-input-placeholder: hsl(25 10% 32%);
  --color-input-caret: hsl(22 85% 58%);
  --color-input-focus-shadow: 0 0 0 2px hsl(22 85% 54% / 35%);

  --color-btn-text: hsl(22 85% 58%);
  --color-btn-border: hsl(22 65% 42%);
  --color-btn-hover-bg: hsl(22 55% 18% / 0.5);
  --color-btn-hover-shadow: 0 2px 10px hsl(22 60% 30% / 0.3);
  --color-btn-text-shadow: none;
  --color-btn-ghost-text: hsl(25 18% 60%);
  --color-btn-ghost-border: hsl(25 14% 22%);
  --color-btn-ghost-hover-bg: hsl(25 16% 12%);
  --color-btn-ghost-hover-bdr: hsl(25 16% 30%);

  --color-card-bg: hsl(25 16% 7%);
  --color-card-border: hsl(25 14% 16%);
  --color-card-hover-border: hsl(22 60% 44%);
  --color-card-hover-shadow: 0 4px 16px hsl(22 50% 10% / 0.3);

  --bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' stroke='rgb(200,100,20)' stroke-width='0.5' fill='none' opacity='0.12'/%3E%3C/svg%3E");
  --bg-texture-size: 24px 24px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  THEME: Winter — aurora borealis, dark with icy electric blue            */
/* ══════════════════════════════════════════════════════════════════════════ */
html.theme-winter,
html.theme-winter.sl-theme-dark {
  --sl-font-sans: system-ui, -apple-system, sans-serif;
  --sl-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --sl-letter-spacing-normal: 0.01em;

  --sl-border-radius-small: 2px;
  --sl-border-radius-medium: 4px;
  --sl-border-radius-large: 6px;
  --sl-border-radius-x-large: 10px;

  --sl-color-gray-50: hsl(210 22% 4%);
  --sl-color-gray-100: hsl(210 20% 7%);
  --sl-color-gray-200: hsl(210 18% 12%);
  --sl-color-gray-300: hsl(210 16% 20%);
  --sl-color-gray-400: hsl(210 14% 32%);
  --sl-color-gray-500: hsl(210 12% 44%);
  --sl-color-gray-600: hsl(210 14% 56%);
  --sl-color-gray-700: hsl(210 18% 66%);
  --sl-color-gray-800: hsl(210 22% 76%);
  --sl-color-gray-900: hsl(210 26% 86%);
  --sl-color-gray-950: hsl(210 30% 92%);

  --sl-color-neutral-0: hsl(215 24% 2%);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-1000: hsl(210 32% 96%);

  --sl-color-primary-50: hsl(195 60% 6%);
  --sl-color-primary-100: hsl(195 55% 10%);
  --sl-color-primary-200: hsl(195 52% 18%);
  --sl-color-primary-300: hsl(195 58% 28%);
  --sl-color-primary-400: hsl(195 70% 40%);
  --sl-color-primary-500: hsl(195 85% 52%);
  --sl-color-primary-600: hsl(195 82% 62%);
  --sl-color-primary-700: hsl(195 75% 72%);
  --sl-color-primary-800: hsl(195 65% 80%);
  --sl-color-primary-900: hsl(195 55% 88%);
  --sl-color-primary-950: hsl(195 45% 93%);

  --sl-color-danger-50: hsl(350 55% 7%);
  --sl-color-danger-100: hsl(350 50% 12%);
  --sl-color-danger-200: hsl(350 48% 20%);
  --sl-color-danger-300: hsl(350 52% 32%);
  --sl-color-danger-400: hsl(350 62% 44%);
  --sl-color-danger-500: hsl(350 72% 55%);
  --sl-color-danger-600: hsl(350 68% 64%);
  --sl-color-danger-700: hsl(350 60% 73%);
  --sl-color-danger-800: hsl(350 50% 82%);
  --sl-color-danger-900: hsl(350 40% 90%);
  --sl-color-danger-950: hsl(350 32% 95%);

  --sl-color-success-50: hsl(165 55% 7%);
  --sl-color-success-100: hsl(165 50% 12%);
  --sl-color-success-200: hsl(165 48% 20%);
  --sl-color-success-300: hsl(165 52% 32%);
  --sl-color-success-400: hsl(165 60% 42%);
  --sl-color-success-500: hsl(165 68% 50%);
  --sl-color-success-600: hsl(165 62% 60%);
  --sl-color-success-700: hsl(165 54% 70%);
  --sl-color-success-800: hsl(165 45% 80%);
  --sl-color-success-900: hsl(165 36% 88%);
  --sl-color-success-950: hsl(165 28% 94%);

  --sl-color-warning-50: hsl(40 70% 8%);
  --sl-color-warning-100: hsl(40 65% 14%);
  --sl-color-warning-200: hsl(40 62% 22%);
  --sl-color-warning-300: hsl(40 66% 34%);
  --sl-color-warning-400: hsl(40 76% 46%);
  --sl-color-warning-500: hsl(40 88% 56%);
  --sl-color-warning-600: hsl(40 82% 64%);
  --sl-color-warning-700: hsl(40 72% 72%);
  --sl-color-warning-800: hsl(40 60% 80%);
  --sl-color-warning-900: hsl(40 48% 88%);
  --sl-color-warning-950: hsl(40 38% 94%);

  --sl-focus-ring-color: hsl(195 85% 52%);
  --sl-focus-ring-style: 0 0 0 2px hsl(195 85% 52% / 45%);

  --sl-input-background-color: hsl(210 20% 5%);
  --sl-input-background-color-hover: hsl(210 18% 8%);
  --sl-input-background-color-focus: hsl(210 18% 7%);
  --sl-input-border-color: hsl(210 18% 20%);
  --sl-input-border-color-hover: hsl(195 40% 35%);
  --sl-input-border-color-focus: hsl(195 85% 52%);
  --sl-input-focus-ring-color: hsl(195 85% 52% / 30%);

  --sl-panel-background-color: hsl(210 20% 5%);
  --sl-panel-border-color: hsl(210 18% 16%);

  --sl-shadow-x-small: 0 1px 2px hsl(215 30% 2% / 0.8), 0 0 0 1px hsl(210 20% 14% / 0.3);
  --sl-shadow-small: 0 2px 6px hsl(215 30% 2% / 0.7), 0 0 6px hsl(195 50% 25% / 0.1);
  --sl-shadow-medium: 0 4px 14px hsl(215 30% 2% / 0.8), 0 0 14px hsl(195 50% 35% / 0.12);
  --sl-shadow-large: 0 8px 28px hsl(215 30% 2% / 0.85), 0 0 28px hsl(195 50% 35% / 0.15);
  --sl-shadow-x-large: 0 16px 48px hsl(215 30% 2% / 0.9), 0 0 48px hsl(195 50% 40% / 0.2);

  --color-bg: hsl(215 22% 4%);
  --color-surface: hsl(210 20% 6%);
  --color-surface-hover: hsl(210 20% 10%);
  --color-surface-border: hsl(210 18% 16%);
  --color-surface-inset: hsl(215 25% 3% / 0.4);
  --color-header-bg: hsl(215 22% 3% / 0.75);
  --color-header-border: hsl(195 30% 18%);
  --color-header-shadow: 0 4px 20px hsl(215 30% 3% / 0.65), 0 1px 0 hsl(195 30% 18% / 0.5);
  --color-footer-border: hsl(210 18% 14%);

  --color-text-body: hsl(210 25% 74%);
  --color-text-heading: hsl(195 40% 90%);
  --color-heading-glow: 0 0 8px hsl(195 70% 50% / 30%);
  --color-text-muted: hsl(210 15% 48%);
  --color-text-faint: hsl(210 12% 32%);
  --color-accent: hsl(195 75% 50%);
  --color-accent-glow: 0 0 6px hsl(195 80% 50% / 40%);

  --color-label: hsl(210 14% 45%);
  --color-tag-bg: hsl(210 18% 8%);
  --color-tag-text: hsl(195 60% 52%);
  --color-tag-border: hsl(210 18% 18%);

  --color-input-bg: hsl(210 20% 5%);
  --color-input-border: hsl(210 18% 20%);
  --color-input-border-focus: hsl(195 85% 52%);
  --color-input-text: hsl(210 25% 78%);
  --color-input-placeholder: hsl(210 12% 30%);
  --color-input-caret: hsl(195 85% 58%);
  --color-input-focus-shadow: 0 0 0 2px hsl(195 85% 52% / 40%), 0 0 8px hsl(195 60% 40% / 25%);

  --color-btn-text: hsl(195 85% 58%);
  --color-btn-border: hsl(195 55% 38%);
  --color-btn-hover-bg: hsl(195 50% 15% / 0.5);
  --color-btn-hover-shadow: 0 0 10px hsl(195 55% 35% / 0.3);
  --color-btn-text-shadow: 0 0 6px hsl(195 80% 50% / 50%);
  --color-btn-ghost-text: hsl(210 18% 58%);
  --color-btn-ghost-border: hsl(210 16% 22%);
  --color-btn-ghost-hover-bg: hsl(210 18% 10%);
  --color-btn-ghost-hover-bdr: hsl(210 18% 30%);

  --color-card-bg: hsl(210 20% 5%);
  --color-card-border: hsl(210 18% 14%);
  --color-card-hover-border: hsl(195 60% 40%);
  --color-card-hover-shadow: 0 0 16px hsl(195 50% 30% / 0.2), inset 0 0 24px hsl(195 40% 8% / 0.3);

  --bg-overlay: hsl(215 22% 4% / 0.72);

  --bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg transform='translate(30,30)' stroke='rgb(160,240,255)' stroke-linecap='round' fill='none'%3E%3Cg stroke-opacity='0.24' stroke-width='0.9'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-11'/%3E%3Cline x1='-3.2' y1='-6' x2='3.2' y2='-6'/%3E%3Cline x1='-2' y1='-9' x2='2' y2='-9'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-11'/%3E%3Cline x1='-3.2' y1='-6' x2='3.2' y2='-6'/%3E%3Cline x1='-2' y1='-9' x2='2' y2='-9'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-11'/%3E%3Cline x1='-3.2' y1='-6' x2='3.2' y2='-6'/%3E%3Cline x1='-2' y1='-9' x2='2' y2='-9'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-11'/%3E%3Cline x1='-3.2' y1='-6' x2='3.2' y2='-6'/%3E%3Cline x1='-2' y1='-9' x2='2' y2='-9'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-11'/%3E%3Cline x1='-3.2' y1='-6' x2='3.2' y2='-6'/%3E%3Cline x1='-2' y1='-9' x2='2' y2='-9'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-11'/%3E%3Cline x1='-3.2' y1='-6' x2='3.2' y2='-6'/%3E%3Cline x1='-2' y1='-9' x2='2' y2='-9'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='1.3' fill='rgb(160,240,255)' opacity='0.24' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(10,10)' stroke='rgb(160,240,255)' stroke-linecap='round' fill='none'%3E%3Cg stroke-opacity='0.15' stroke-width='0.6'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-6'/%3E%3Cline x1='-1.8' y1='-3.5' x2='1.8' y2='-3.5'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-6'/%3E%3Cline x1='-1.8' y1='-3.5' x2='1.8' y2='-3.5'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-6'/%3E%3Cline x1='-1.8' y1='-3.5' x2='1.8' y2='-3.5'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-6'/%3E%3Cline x1='-1.8' y1='-3.5' x2='1.8' y2='-3.5'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-6'/%3E%3Cline x1='-1.8' y1='-3.5' x2='1.8' y2='-3.5'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-6'/%3E%3Cline x1='-1.8' y1='-3.5' x2='1.8' y2='-3.5'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='0.8' fill='rgb(160,240,255)' opacity='0.15' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(48,44)' stroke='rgb(160,240,255)' stroke-linecap='round' fill='none'%3E%3Cg stroke-opacity='0.13' stroke-width='0.55'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5'/%3E%3Cline x1='-1.5' y1='-3' x2='1.5' y2='-3'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5'/%3E%3Cline x1='-1.5' y1='-3' x2='1.5' y2='-3'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5'/%3E%3Cline x1='-1.5' y1='-3' x2='1.5' y2='-3'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5'/%3E%3Cline x1='-1.5' y1='-3' x2='1.5' y2='-3'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5'/%3E%3Cline x1='-1.5' y1='-3' x2='1.5' y2='-3'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5'/%3E%3Cline x1='-1.5' y1='-3' x2='1.5' y2='-3'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='0.7' fill='rgb(160,240,255)' opacity='0.13' stroke='none'/%3E%3C/g%3E%3Ccircle cx='30' cy='8' r='0.8' fill='rgb(160,240,255)' opacity='0.1'/%3E%3Ccircle cx='52' cy='22' r='0.6' fill='rgb(160,240,255)' opacity='0.08'/%3E%3C/svg%3E");
  --bg-texture-size: 60px 60px;
}


/* ══════════════════════════════════════════════════════════════════════════ */
/*  SHARED: Body, utility classes, components                               */
/* ══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--sl-font-sans);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--bg-overlay, transparent), var(--bg-overlay, transparent)), var(--bg-texture, none);
  background-size: auto, var(--bg-texture-size, auto);
  min-height: 100vh;
}

/* ── Shared utility classes ─────────────────────────────────────────────── */

.mono {
  font-family: var(--sl-font-mono, monospace);
}

/* Layout */
.site-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--color-header-border);
  background: var(--color-surface);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}

.site-main {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.site-footer {
  border-top: 1px solid var(--color-footer-border);
  text-align: center;
}

/* Surfaces */
.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--sl-border-radius-medium, 2px);
  box-shadow: inset 0 0 20px var(--color-surface-inset);
}

/* Inputs */
.input {
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--sl-border-radius-medium, 2px);
  color: var(--color-input-text);
  caret-color: var(--color-input-caret);
}

.input::placeholder {
  color: var(--color-input-placeholder);
}

.input:focus {
  outline: none;
  box-shadow: var(--color-input-focus-shadow);
  border-color: var(--color-input-border-focus);
}

/* Buttons */
.btn-primary {
  background: var(--color-btn-bg, transparent);
  color: var(--color-btn-text);
  border: 1px solid var(--color-btn-border);
  border-radius: var(--sl-border-radius-medium, 2px);
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.1s;
  text-shadow: var(--color-btn-text-shadow);
  letter-spacing: 0.05em;
}

.btn-primary:hover {
  background: var(--color-btn-hover-bg);
  box-shadow: var(--color-btn-hover-shadow);
}

.btn-primary:disabled {
  opacity: 0.3;
  cursor: default;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-btn-ghost-border);
  border-radius: var(--sl-border-radius-medium, 2px);
  color: var(--color-btn-ghost-text);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.btn-ghost:hover {
  background: var(--color-btn-ghost-hover-bg);
  border-color: var(--color-btn-ghost-hover-bdr);
}

/* Typography */
.text-heading {
  color: var(--color-text-heading);
  text-shadow: var(--color-heading-glow);
}

.text-body {
  color: var(--color-text-body);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-faint {
  color: var(--color-text-faint);
}

/* Labels & tags */
.label {
  font-family: var(--sl-font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tag {
  font-family: var(--sl-font-mono);
  font-size: 0.7rem;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  border: 1px solid var(--color-tag-border);
  padding: 0.1rem 0.4rem;
  border-radius: 0;
}

/* Cards */
.bit-card {
  display: block;
  border-radius: var(--sl-border-radius-medium, 2px);
  padding: 1.25rem;
  text-decoration: none;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bit-card:hover {
  border-color: var(--color-card-hover-border);
  box-shadow: var(--color-card-hover-shadow);
}

/* Accent letter — used for "T F K S" in site-header */
.accent-letter {
  color: var(--sl-color-primary-600);
  text-shadow: var(--color-accent-glow);
}