@layer base {
  :root {
    /* Girassol palette: cream ground, forest green, sunflower, brown */
    --color-bg: light-dark(#fffaec, #17120d);
    --color-surface: light-dark(white, #221a13);
    --color-text: light-dark(#2a1e14, #fffaec);
    --color-text-reversed: light-dark(#fffaec, #17120d);
    --color-text-subtle: light-dark(#5c4d40, #cdbba2);
    --color-link: light-dark(#2c521b, #b9d49b);
    --color-heading: light-dark(#2c521b, #fffaec);
    --color-border-light: light-dark(#f5eedf, #2e241b);
    --color-border: light-dark(#e8dfd0, #3d3024);
    --color-border-dark: light-dark(#c9b9a2, #5a4836);
    --color-selected: light-dark(#fff0bf, #4a3a10);
    --color-selected-dark: light-dark(#2c521b, #f7b500);
    --color-highlight: light-dark(#fff0bf, #5a4410);

    --color-primary: light-dark(#2c521b, #b9d49b);
    --color-secondary: light-dark(#e6f0d3, #2a3a1f);
    --color-negative: light-dark(#9b2c1c, #a33a26);
    --color-positive: light-dark(#3f7a26, #4e8530);
    --color-warning: light-dark(#f7b500, #7a5a00);

    --color-accent: #f7b500;
    --color-accent-text: #4a2a12;
    --color-accent-light: light-dark(#fff0bf, #3d3010);
    --color-sidebar: #2c521b;
    --color-sidebar-hover: #3f7a26;
    --color-sidebar-text: #fffaec;
    --color-sidebar-subtle: #b9d49b;
    --color-rust: light-dark(#8a4b12, #e0a868);

    --default-font-family: "Figtree", system-ui, sans-serif;
    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  }

  * {
    border-color: var(--color-border);
    scrollbar-color: #C1C1C1 transparent;
    scrollbar-width: thin;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-synthesis-weight: none;
    overscroll-behavior: none;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
  }

  h1,
  h2 {
    color: var(--color-heading);
  }

  .turbo-progress-bar {
    background-color: var(--color-accent);
  }

  ::selection {
    background-color: var(--color-selected);
    color: var(--color-text);
  }
}