/* Sunflower Web design tokens. */
@layer reset, tokens, base, layout, components, responsive, preferences;
@layer tokens {
  :root {
    color-scheme: light;
    --green-950: #17382c;
    --green-900: #1d493a;
    --green-800: #28614d;
    --green-700: #34745d;
    --green-100: #e8f1ec;
    --accent-text: #765000;
    --accent-on-dark: #f6d478;
    --accent-soft: #fff3d4;
    --focus: #075ea8;
    --ink: #17241f;
    --muted: #53615b;
    --line: #b8c3be;
    --paper: #fffdf8;
    --surface: #f4f5f1;
    --white: #ffffff;
    --footer: #102a22;
    /* Semantic colour roles used by site.css. */
    --heading: var(--green-950);
    --raised: var(--white);
    --tint: var(--green-100);
    --interactive: var(--green-800);
    --header-bg: rgb(255 253 248 / 0.97);
    --hero-end: #f5f0e3;
    --on-dark-muted: #d5e2dc;
    --on-dark-border: rgb(255 255 255 / 0.3);
    --on-dark-border-strong: rgb(255 255 255 / 0.4);
    --on-dark-border-subtle: rgb(255 255 255 / 0.25);
    --on-dark-soft: rgb(255 255 255 / 0.04);
    --on-dark-soft-hover: rgb(255 255 255 / 0.08);
    --on-dark-icon: rgb(255 255 255 / 0.1);
    --button-light-hover: var(--accent-soft);
    --shadow-sm: 0 0.6rem 1.6rem rgb(23 56 44 / 0.08);
    --shadow: 0 1rem 2.75rem rgb(23 56 44 / 0.12);
  }
}
@layer preferences {
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --accent-text: #fe8e01;
      --accent-on-dark: #fe8e01;
      --accent-soft: #4a2d0a;
      --focus: #fe8e01;
      --ink: #e3ebe7;
      --muted: #b7c5be;
      --line: #52645b;
      --paper: #0c120f;
      --surface: #111d17;
      --heading: #f4f7f5;
      --raised: #15231c;
      --tint: #17271f;
      --interactive: #8fcfb4;
      --header-bg: rgb(12 18 15 / 0.97);
      --hero-end: #111d17;
      --button-light-hover: #ffe2bd;
      --shadow-sm: 0 0.6rem 1.6rem rgb(0 0 0 / 0.28);
      --shadow: 0 1rem 2.75rem rgb(0 0 0 / 0.42);
    }
  }
}