:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-synthesis: none;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --font-dropcap: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --bg: #fbf7ef;
  --bg-soft: #f5eadc;
  --surface: rgba(255, 252, 247, 0.82);
  --surface-strong: #fffdfa;
  --text: #221a16;
  --muted: #70665f;
  --line: rgba(54, 39, 30, 0.13);
  --shadow: 0 24px 70px rgba(72, 49, 35, 0.14);
  --radius-lg: 34px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --signal: #221a16;
  --signal-soft: rgba(34, 26, 22, 0.08);
  --signal-strong: #221a16;

  /* Theme foundations */
  --text-inverse: #fffdfa;
  --text-on-light: #191512;
  --muted-on-light: #4e453e;
  --body-background:
    radial-gradient(circle at top left, var(--signal-soft), transparent 34rem),
    linear-gradient(135deg, var(--bg), #f7efe6 55%, #efe5d7);
  --logo-filter: none;

  /* Shared surfaces */
  --panel-surface: rgba(255, 253, 250, 0.68);
  --panel-surface-strong: rgba(255, 253, 250, 0.72);
  --panel-shadow: 0 18px 48px rgba(72, 49, 35, 0.08);
  --popover-surface: rgba(255, 253, 250, 0.96);
  --popover-shadow: 0 18px 48px rgba(72, 49, 35, 0.12);
  --soft-control-surface: rgba(255, 253, 250, 0.62);
  --soft-control-border: rgba(34, 26, 22, 0.14);
  --soft-control-shadow: 0 12px 30px rgba(72, 49, 35, 0.07);

  /* Actions and callouts */
  --primary-action-border: var(--signal-strong);
  --primary-action-surface: var(--signal-strong);
  --primary-action-text: var(--text-inverse);
  --solid-action-text: var(--text-inverse);
  --item-surface: rgba(255, 253, 250, 0.66);
  --item-border: rgba(34, 26, 22, 0.1);
  --inverse-surface: rgba(34, 26, 22, 0.92);
  --inverse-surface-rich:
    linear-gradient(135deg, rgba(34, 26, 22, 0.94), rgba(76, 64, 55, 0.92)),
    var(--signal-strong);
  --inverse-border: rgba(34, 26, 22, 0.24);
  --inverse-text: var(--text-inverse);
  --inverse-muted: rgba(255, 253, 250, 0.84);
  --inverse-kicker: var(--text-inverse);
  --inverse-shadow: 0 26px 70px rgba(72, 49, 35, 0.16);

  /* Home wheel */
  --wheel-label: rgba(34, 26, 22, 0.54);
  --wheel-active: var(--signal-strong);
  --wheel-active-shadow: none;
  --wheel-marker-border: rgba(34, 26, 22, 0.12);
  --wheel-marker-surface: rgba(255, 253, 250, 0.48);
  --wheel-marker-shadow:
    inset 0 0 0 1px rgba(255, 253, 250, 0.5),
    0 16px 38px rgba(67, 45, 27, 0.06);

  /* Portfolio controls */
  --filter-chip-border: rgba(34, 26, 22, 0.14);
  --filter-chip-surface: rgba(255, 253, 250, 0.58);
  --filter-chip-text: var(--text);
  --filter-chip-shadow:
    inset 0 0 0 1px rgba(255, 253, 250, 0.52),
    0 12px 30px rgba(72, 49, 35, 0.06);
  --filter-chip-hover-border: rgba(34, 26, 22, 0.24);
  --filter-chip-hover-surface: rgba(255, 253, 250, 0.82);
  --filter-chip-active-border: rgba(34, 26, 22, 0.28);
  --filter-chip-active-surface: var(--signal-soft);
  --filter-chip-active-text: var(--signal-strong);
  --filter-chip-active-shadow:
    inset 0 0 0 1px rgba(34, 26, 22, 0.08),
    0 16px 34px rgba(72, 49, 35, 0.09);
  --filter-count-surface: rgba(34, 26, 22, 0.08);
  --filter-count-text: var(--muted);
  --filter-count-active-surface: rgba(255, 253, 250, 0.7);
  --filter-count-active-text: var(--signal-strong);
  --sort-border: rgba(34, 26, 22, 0.18);
  --sort-hover-border: rgba(34, 26, 22, 0.24);
  --sort-shadow:
    inset 0 0 0 1px rgba(255, 253, 250, 0.08),
    0 12px 30px rgba(72, 49, 35, 0.12);
  --type-label-border: rgba(34, 26, 22, 0.12);
  --type-label-surface: rgba(255, 253, 250, 0.62);
  --type-label-text: color-mix(in srgb, var(--signal-strong) 72%, var(--muted));
  --type-icon-text: color-mix(in srgb, var(--signal-strong) 82%, var(--muted));

  /* Footer and forms */
  --footer-surface: rgba(251, 247, 239, 0.82);
  --contact-popover-surface: rgba(255, 253, 250, 0.9);
  --contact-popover-shadow: 0 24px 70px rgba(72, 49, 35, 0.18);
  --field-surface: rgba(255, 253, 250, 0.75);

  /* Layout and control sizing */
  --control-height: 2.75rem;
  --control-radius: var(--radius-sm);
  --control-gap: 0.5rem;
  --control-padding-x: 0.78rem;
  --control-font-size: 0.88rem;
  --control-font-weight: 780;
  --control-icon-size: 1.02rem;
  --control-dark: #5a514c;
  --control-dark-hover: #3f3733;
  --focus-ring: 3px solid color-mix(in srgb, var(--signal-strong) 32%, transparent);
  --max-width: 1180px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171411;
  --bg-soft: #25211d;
  --surface: rgba(48, 43, 38, 0.9);
  --surface-strong: #332d28;
  --text: #fff8ef;
  --muted: #d8cfc5;
  --line: rgba(255, 248, 239, 0.23);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --signal: #fff8ef;
  --signal-soft: rgba(255, 248, 239, 0.14);
  --signal-strong: #fff8ef;

  /* Theme foundations */
  --body-background:
    radial-gradient(circle at top left, rgba(255, 248, 239, 0.09), transparent 34rem),
    linear-gradient(135deg, #171411, #221d19 58%, #302821);
  --logo-filter: invert(1) brightness(1.24);

  /* Shared surfaces */
  --panel-surface: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  --panel-surface-strong: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  --popover-surface: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  --popover-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  --soft-control-surface: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  --soft-control-border: var(--line);
  --soft-control-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);

  /* Actions and callouts */
  --primary-action-border: var(--line);
  --primary-action-surface: var(--panel-surface);
  --primary-action-text: var(--text-inverse);
  --solid-action-text: var(--text-on-light);
  --item-surface: rgba(255, 248, 239, 0.055);
  --item-border: rgba(255, 248, 239, 0.14);
  --inverse-surface:
    radial-gradient(circle at top right, rgba(220, 179, 126, 0.24), transparent 18rem),
    linear-gradient(135deg, #5a4939, #44372f);
  --inverse-surface-rich: var(--inverse-surface);
  --inverse-border: rgba(220, 179, 126, 0.46);
  --inverse-text: #fff8ef;
  --inverse-muted: rgba(255, 240, 218, 0.82);
  --inverse-kicker: rgba(239, 199, 145, 0.78);
  --inverse-shadow:
    inset 0 0 0 1px rgba(255, 226, 186, 0.07),
    0 24px 62px rgba(0, 0, 0, 0.34);

  /* Home wheel */
  --wheel-label: rgba(255, 248, 239, 0.42);
  --wheel-active: var(--text-inverse);
  --wheel-active-shadow: 0 1px 18px rgba(255, 248, 239, 0.14);
  --wheel-marker-border: rgba(255, 248, 239, 0.28);
  --wheel-marker-surface: rgba(255, 248, 239, 0.08);
  --wheel-marker-shadow:
    inset 0 0 0 1px rgba(255, 248, 239, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.24);

  /* Portfolio controls */
  --filter-chip-border: rgba(255, 248, 239, 0.12);
  --filter-chip-surface: rgba(255, 248, 239, 0.08);
  --filter-chip-text: rgba(255, 248, 239, 0.78);
  --filter-chip-shadow:
    inset 0 0 0 1px rgba(255, 248, 239, 0.03),
    0 10px 24px rgba(0, 0, 0, 0.16);
  --filter-chip-hover-border: rgba(255, 248, 239, 0.22);
  --filter-chip-hover-surface: rgba(255, 248, 239, 0.14);
  --filter-chip-active-border: rgba(255, 248, 239, 0.28);
  --filter-chip-active-surface: #fff8ef;
  --filter-chip-active-text: #191512;
  --filter-chip-active-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 18px 42px rgba(0, 0, 0, 0.34);
  --filter-count-surface: rgba(255, 248, 239, 0.12);
  --filter-count-text: rgba(255, 248, 239, 0.78);
  --filter-count-active-surface: rgba(25, 21, 18, 0.12);
  --filter-count-active-text: #191512;
  --sort-border: rgba(255, 248, 239, 0.2);
  --sort-hover-border: rgba(255, 248, 239, 0.2);
  --sort-shadow:
    inset 0 0 0 1px rgba(255, 248, 239, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.24);
  --type-label-border: rgba(255, 248, 239, 0.14);
  --type-label-surface: rgba(255, 248, 239, 0.07);
  --type-label-text: rgba(255, 248, 239, 0.78);
  --type-icon-text: rgba(255, 248, 239, 0.72);

  /* Footer and forms */
  --footer-surface: rgba(21, 19, 17, 0.86);
  --contact-popover-surface: var(--panel-surface);
  --contact-popover-shadow: var(--panel-shadow);
  --field-surface: rgba(21, 19, 17, 0.62);
  --control-dark: #3a332e;
  --control-dark-hover: #484039;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--body-background);
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

::selection {
  color: #fffdfa;
  background: var(--signal-strong);
}