/* Saval Brand & Design Guidelines -- design tokens. Source of truth:
   Saval-Brand-Design-Guidelines.pdf (updated 2026-07-22 -- added On-Accent
   and Danger foundation tokens). Do not hand-roll colors/type outside
   these tokens -- add a new token here first if something is missing. */

@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-Bold.ttf") format("truetype");
}

:root {
  /* Light theme (default) */
  --sv-forest: #3E6B47;
  --sv-trailblaze: #C96A3A;
  --sv-on-accent: #FFF6EE;
  --sv-danger: #B0483A;
  --sv-ink: #16231A;
  --sv-ink-soft: #5A6353;
  --sv-ground: #F2F1E9;
  --sv-surface: #FFFFFF;
  --sv-sunken: #E7E4D6;
  --sv-line: #DEDAC9;

  /* radius scale */
  --sv-radius-control: 9px;   /* chips, small pills, OTP cells */
  --sv-radius-card: 14px;     /* content cards, buttons, fields */
  --sv-radius-sheet: 20px;    /* bottom sheets, modal cards, badge plates */
  --sv-radius-pill: 999px;    /* tappable/friendly CTAs */

  /* gap scale */
  --sv-gap-tight: 8px;    /* icon to label */
  --sv-gap-section: 14px; /* between cards in a list */
  --sv-gap-block: 28px;   /* between major page sections */

  /* type roles -- Big Shoulders Display and IBM Plex Mono are not
     self-hosted yet (not sourced as of 2026-07-22, tracked separately);
     these fall back to a condensed system stack / system monospace until
     the real webfont files are added. Work Sans is real and self-hosted. */
  --sv-display: "Big Shoulders Display", "Helvetica Neue", Arial Narrow, sans-serif;
  --sv-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sv-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sv-forest: #86AD7E;
    --sv-trailblaze: #E08850;
    --sv-danger: #D97362;
    --sv-ink: #EDF1E7;
    --sv-ink-soft: #9DAB94;
    --sv-ground: #10160F;
    --sv-surface: #1B231A;
    --sv-sunken: #26301F;
    --sv-line: #2B342A;
  }
}
:root[data-theme="dark"] {
  --sv-forest: #86AD7E;
  --sv-trailblaze: #E08850;
  --sv-danger: #D97362;
  --sv-ink: #EDF1E7;
  --sv-ink-soft: #9DAB94;
  --sv-ground: #10160F;
  --sv-surface: #1B231A;
  --sv-sunken: #26301F;
  --sv-line: #2B342A;
}
:root[data-theme="light"] {
  --sv-forest: #3E6B47;
  --sv-trailblaze: #C96A3A;
  --sv-danger: #B0483A;
  --sv-ink: #16231A;
  --sv-ink-soft: #5A6353;
  --sv-ground: #F2F1E9;
  --sv-surface: #FFFFFF;
  --sv-sunken: #E7E4D6;
  --sv-line: #DEDAC9;
}