:root {
  /* Base palette — bright, clean tints (same hue families as before) */
  --charcoal-brown: #000000;
  --olive-bark: #8b7d32;
  --golden-bronze: #d4c228;

  /* Canvas + text on dark (neutral, not a fourth hue) */
  --white: #ffffff;
  --bg: #ffffff;
  --bg-rgb: 255 255 255;

  /* Legacy names → palette */
  --ink: var(--charcoal-brown);
  --electric-blue: var(--golden-bronze);

  /* Deep panels */
  --surface-inverse: var(--charcoal-brown);
  --surface-inverse-deep: var(--olive-bark);

  /* Space-separated RGB for rgb(var(--x) / a) */
  --ink-rgb: 0 0 0;
  --accent-rgb: 212 194 40;

  /* Semantic — lighter mixes = ultra-clean airy surfaces */
  --surface-subtle: color-mix(in srgb, var(--golden-bronze) 7%, var(--white));
  --surface-warm: color-mix(in srgb, var(--olive-bark) 5.5%, var(--white));
  --text: var(--charcoal-brown);
  --text-secondary: var(--olive-bark);
  --border-light: rgb(var(--ink-rgb) / 0.12);
  --olive: var(--golden-bronze);
  --olive-light: var(--olive-bark);
  --olive-soft: color-mix(in srgb, var(--golden-bronze) 3.5%, var(--white));

  --font-main: "Inter", system-ui, sans-serif;

  --navbar-height: 80px;
  --layout-max: 1200px;
  --gutter: 24px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --btn-padding: 18px 42px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 0 rgb(var(--ink-rgb) / 0.04), 0 10px 28px rgb(var(--ink-rgb) / 0.05);
  --shadow-md: 0 4px 24px rgb(var(--ink-rgb) / 0.07), 0 14px 44px rgb(var(--ink-rgb) / 0.05);

  /* Gradients — black → olive → gold → white → olive */
  --gradient-top: linear-gradient(0deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-right: linear-gradient(90deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-bottom: linear-gradient(180deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-left: linear-gradient(270deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-top-right: linear-gradient(45deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-bottom-right: linear-gradient(135deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-top-left: linear-gradient(225deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-bottom-left: linear-gradient(315deg, #000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
  --gradient-radial: radial-gradient(#000000, #8b7d32, #d4c228, #ffffff, #8b7d32);
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --navbar-height: 64px;
  }
}

@media (max-width: 380px) {
  :root { --navbar-height: 60px; }
}