/* Design tokens: the Organic system (design_handoff_abeilles_guenter/prototype/_ds/…/styles.css)
   plus the app tokens from the handoff README. Light is the default.
   Dark applies with data-theme="dark", or with data-theme="system" when the OS prefers dark.
   The dark block is written twice on purpose (CSS cannot share one declaration block between a
   media query and a plain selector); keep both copies identical. */

@font-face {
  font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/caprasimo-latin-400-normal.c7371a20ecd7.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.7bfd10a3def3.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.4376f5953b85.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/figtree-latin-700-normal.70aaa6879de5.woff2") format("woff2");
}

:root {
  color-scheme: light;
  /* Organic base */
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: rgba(32,30,29,.16);
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;
  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;
  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;
  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;
  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(46,43,37,.14);
  --shadow-md: 0 3px 10px rgba(46,43,37,.16);
  --shadow-lg: 0 12px 32px rgba(46,43,37,.22);

  /* App tokens (handoff README, "App tokens") */
  --page: #ddd3c3;
  --muted: #645c50;
  --danger: #b3261e;
  --danger-bg: #f8ddd8;
  --st-wait: #d9690f;
  --st-wait-bg: #fbe2c9;
  --st-ready: #2c8547;
  --st-ready-bg: #d9eed9;
  --on-ready: #ffffff;
  --st-done: #201e1d;
  --st-done-bd: #201e1d;
  --st-off: #978c7d;
  --honey-spring: #ecc65e;
  --honey-spring-bg: #f5e2a6;
  --honey-summer: #a9561b;
  --honey-summer-bg: #e6bb88;
  --sheet: #fbf5ec;

  /* AA additions (not in the prototype): the Organic accent with cream text is 3.0:1 and the
     status orange as text is 2.6–2.95:1. Filled controls that carry text and orange text use
     these darker steps of the same hues in light mode; dark mode already passes as designed. */
  --accent-strong: #9c592d;
  --accent-strong-hover: #8c491a;
  --st-wait-text: #9c4c0b;
  /* How much of a product's stored (light) tint colour shows; dark mode mixes it into the
     dark surface, like the prototype's dark tints. */
  --tint-strength: 100%;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:#1b1713;
  --color-surface:#29231d;
  --color-text:#f4eadb;
  --color-accent:#e48b4f;
  --color-divider:rgba(244,234,219,.16);
  --color-neutral-100:#302a23;
  --color-neutral-200:#3a332b;
  --color-neutral-400:#6e6458;
  --color-neutral-800:#ddd3c4;
  --color-accent-100:#3c2617;
  --color-accent-200:#4e301b;
  --color-accent-600:#f09b62;
  --color-accent-700:#f6a873;
  --color-accent-800:#ffc6a5;
  --color-accent-2-100:#273021;
  --color-accent-2-800:#cddbb3;
  --shadow-sm:0 0 0 1px rgba(244,234,219,.06);
  --shadow-md:0 0 0 1px rgba(244,234,219,.07),0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 0 0 1px rgba(244,234,219,.08),0 14px 36px rgba(0,0,0,.55);
  --page:#0f0d0b;
  --muted:#bcb0a0;
  --danger:#ff8f84;
  --danger-bg:#3d1d1a;
  --st-wait:#f2913a;
  --st-wait-bg:#3d2714;
  --st-ready:#55b872;
  --st-ready-bg:#1d3324;
  --on-ready:#0f1a12;
  --st-done:#1b1713;
  --st-done-bd:#f4eadb;
  --st-off:#8c8274;
  --honey-spring:#e9c766;
  --honey-spring-bg:#3a3220;
  --honey-summer:#c06a26;
  --honey-summer-bg:#3e2816;
  --sheet:#2e2721;
  --accent-strong: #e48b4f;
  --accent-strong-hover: #f09b62;
  --st-wait-text: #f2913a;
  --tint-strength: 22%;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --color-bg:#1b1713;
    --color-surface:#29231d;
    --color-text:#f4eadb;
    --color-accent:#e48b4f;
    --color-divider:rgba(244,234,219,.16);
    --color-neutral-100:#302a23;
    --color-neutral-200:#3a332b;
    --color-neutral-400:#6e6458;
    --color-neutral-800:#ddd3c4;
    --color-accent-100:#3c2617;
    --color-accent-200:#4e301b;
    --color-accent-600:#f09b62;
    --color-accent-700:#f6a873;
    --color-accent-800:#ffc6a5;
    --color-accent-2-100:#273021;
    --color-accent-2-800:#cddbb3;
    --shadow-sm:0 0 0 1px rgba(244,234,219,.06);
    --shadow-md:0 0 0 1px rgba(244,234,219,.07),0 4px 14px rgba(0,0,0,.4);
    --shadow-lg:0 0 0 1px rgba(244,234,219,.08),0 14px 36px rgba(0,0,0,.55);
    --page:#0f0d0b;
    --muted:#bcb0a0;
    --danger:#ff8f84;
    --danger-bg:#3d1d1a;
    --st-wait:#f2913a;
    --st-wait-bg:#3d2714;
    --st-ready:#55b872;
    --st-ready-bg:#1d3324;
    --on-ready:#0f1a12;
    --st-done:#1b1713;
    --st-done-bd:#f4eadb;
    --st-off:#8c8274;
    --honey-spring:#e9c766;
    --honey-spring-bg:#3a3220;
    --honey-summer:#c06a26;
    --honey-summer-bg:#3e2816;
    --sheet:#2e2721;
    --accent-strong: #e48b4f;
    --accent-strong-hover: #f09b62;
    --st-wait-text: #f2913a;
    --tint-strength: 22%;
  }
}