/* Generated from brand/tokens.json by brand/tokens.mjs. Do not edit.
   Steery's one palette, measure, elevation, face and motion scale. Owned by brand/; consumed
   by the public site and the server's rendered pages. Load /brand/theme.js (blocking, in <head>)
   before this file, then the page stylesheet. Do not define a competing :root palette. */

/* Self-hosted Manrope; unsupported characters continue through the system stack. */
@font-face {
  font-family: "Manrope";
  src: url("./manrope-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bg: #F7F6F2;
  --bg2: #FFFFFF;
  --bg3: #EEE9DD;
  --bg-selected: #E0DACB;
  --well: #EEE9DD;
  --well2: #E5E0D5;
  --fg: #30312D;
  --fg2: #61695F;
  --fg3: #697266;
  --fg4: #8D9589;
  --line: #E0E3DA;
  --rule: #EAEBE5;
  --line2: #C7CFC2;
  --accent: #416B91;
  --accent-ink: #FFFFFF;
  --gold: #D8A24A;
  --ok: #216846;
  --err: #AF342B;
  --err-ink: #FFFFFF;
  --warn: #875817;
  --teal: #0C8599;
  --violet: #7048E8;
  --tag-l: 0.46;

  --elevation-rest: 0 1px 2px rgb(15 31 23 / 16%);
  --elevation-raised: 0 6px 20px rgb(15 31 23 / 18%);
  --elevation-sheet: 0 22px 70px rgb(15 31 23 / 12%);
  --scrim: rgb(15 31 23 / 55%);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --chip-text: 0.875em;
  --chip-height: 1.6em;
  --chip-pad: 0.5em;
  --chip-icon: 0.92em;
  --chip-gap: 0.33em;
  --chip-radius: 0.35em;
  --chip-wash: 7%;
  --chip-tint: 12%;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --motion-quick: 140ms;
  --motion-settle: 220ms;
  --motion-ease: 300ms;
  --motion-slow: 760ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #171B19;
  --bg2: #202622;
  --bg3: #2A332C;
  --bg-selected: #364038;
  --well: #111513;
  --well2: #080D0B;
  --fg: #F4F1E8;
  --fg2: #B7C0B5;
  --fg3: #A8B4A6;
  --fg4: #78857A;
  --line: #354239;
  --rule: #262E29;
  --line2: #4B5D50;
  --accent: #A8C9E5;
  --accent-ink: #142B3D;
  --gold: #E2B461;
  --ok: #9ED3B0;
  --err: #F5ADA4;
  --err-ink: #3A100B;
  --warn: #E2B461;
  --teal: #3BC9DB;
  --violet: #B197FC;
  --tag-l: 0.78;

  --elevation-rest: 0 1px 2px rgb(0 0 0 / 50%);
  --elevation-raised: 0 4px 14px rgb(0 0 0 / 55%);
  --elevation-sheet: 0 16px 44px rgb(0 0 0 / 60%);
  --scrim: rgb(0 0 0 / 66%);
}

/* Fallback for the first paint, or when scripting is unavailable: follow the OS until
   theme.js resolves an explicit data-theme. Scoped so it never fights the attribute. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;

    --bg: #171B19;
    --bg2: #202622;
    --bg3: #2A332C;
    --bg-selected: #364038;
    --well: #111513;
    --well2: #080D0B;
    --fg: #F4F1E8;
    --fg2: #B7C0B5;
    --fg3: #A8B4A6;
    --fg4: #78857A;
    --line: #354239;
    --rule: #262E29;
    --line2: #4B5D50;
    --accent: #A8C9E5;
    --accent-ink: #142B3D;
    --gold: #E2B461;
    --ok: #9ED3B0;
    --err: #F5ADA4;
    --err-ink: #3A100B;
    --warn: #E2B461;
    --teal: #3BC9DB;
    --violet: #B197FC;
    --tag-l: 0.78;

    --elevation-rest: 0 1px 2px rgb(0 0 0 / 50%);
    --elevation-raised: 0 4px 14px rgb(0 0 0 / 55%);
    --elevation-sheet: 0 16px 44px rgb(0 0 0 / 60%);
    --scrim: rgb(0 0 0 / 66%);
  }
}

/* Paired illustrations: mark both variants up, the theme picks one.
   <img class="theme-light" src="/brand/open-field.svg" ...>
   <img class="theme-dark" src="/brand/open-field-dark.svg" ...> */
html[data-theme="light"] .theme-dark { display: none !important; }
html[data-theme="dark"] .theme-light { display: none !important; }

@media not all and (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-dark { display: none !important; }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-light { display: none !important; }
}

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