:root {
  --portfolio-bg: hsl(216 40% 98%);
  --portfolio-bg-alt: hsl(218 34% 96%);
  --portfolio-accent-a: hsl(210 56% 50% / 0.1);
  --portfolio-accent-b: hsl(18 62% 52% / 0.08);
  --portfolio-shadow: 0 8px 20px hsl(223 34% 18% / 0.1);
  --portfolio-surface: hsl(0 0% 100% / 0.72);
  --portfolio-surface-border: hsl(220 16% 82% / 0.64);

  --tab-shell-bg: hsl(220 24% 97%);
  --tab-shell-border: hsl(220 16% 84%);
  --tab-shell-glow-a: hsl(220 44% 80% / 0.12);
  --tab-shell-glow-b: hsl(350 58% 80% / 0.1);
  --tab-surface-bg: hsl(220 24% 95%);
  --tab-surface-border: hsl(220 16% 84%);
  --tab-row-bg: hsl(220 24% 93%);
  --tab-row-border: hsl(220 16% 84%);
  --tab-tab-bg: hsl(220 24% 94%);
  --tab-tab-text: hsl(220 16% 40%);

  --ui-border-soft: color-mix(in srgb, var(--pico-muted-color) 24%, transparent);
  --ui-surface-soft: color-mix(in srgb, var(--pico-card-background-color) 94%, transparent);
  --ui-surface-soft-alt: color-mix(in srgb, var(--pico-card-background-color) 92%, transparent);
  --ui-radius-sm: 12px;
  --ui-radius-md: 14px;
  --ui-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --portfolio-bg: hsl(223 32% 10%);
    --portfolio-bg-alt: hsl(224 28% 12%);
    --portfolio-accent-a: hsl(200 72% 52% / 0.08);
    --portfolio-accent-b: hsl(28 72% 56% / 0.08);
    --portfolio-shadow: 0 8px 24px hsl(222 78% 2% / 0.32);
    --portfolio-surface: hsl(223 34% 14% / 0.82);
    --portfolio-surface-border: hsl(215 24% 42% / 0.48);

    --tab-shell-bg: hsl(222 47% 11% / 0.75);
    --tab-shell-border: hsl(215 28% 50% / 0.38);
    --tab-shell-glow-a: hsl(25 95% 54% / 0.1);
    --tab-shell-glow-b: hsl(18 83% 55% / 0.08);
    --tab-surface-bg: hsl(222 47% 11% / 0.72);
    --tab-surface-border: hsl(215 28% 50% / 0.3);
    --tab-row-bg: hsl(222 47% 11% / 0.66);
    --tab-row-border: hsl(215 28% 50% / 0.3);
    --tab-tab-bg: hsl(222 47% 11% / 0.68);
    --tab-tab-text: var(--pico-muted-color);
  }
}