/* EVERBED tokens: the single source of truth for the re-skin.
   Fit a new client: swap the three spring greens below (keep one deep AA
   strength for cream grounds, one bright for loam grounds), nudge the cream
   and loam temperature if their brand asks for it, done. Everything else
   (spacing, type scale, motion, layers) holds. */

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/gabarito-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap";
  src: url("../fonts/asap-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives */
  --loam: #2b2419;        /* ink: dark soil brown */
  --loam-2: #3a3122;
  --cream: #f7f2e5;       /* paper ground */
  --cream-2: #efe8d6;     /* raised panels on cream */
  --cream-3: #e6dcc4;     /* pressed / hover on cream */
  --white: #fffdf7;
  --spring-bright: #8fc244;  /* accent on loam grounds, 7.28:1 on loam */
  --spring-deep: #5c8a1e;    /* accent for large marks + soft fills on cream */
  --spring-text: #337611;    /* deepest green: labels + links on cream, 5.02:1 on
                                cream and 4.59:1 on cream-2. Taken from the deep
                                above and walked round to a grass hue (HSL 99.8
                                instead of 85.6) so it stops reading acid. */
  --straw: #8a7a56;          /* muted warm gray-brown */

  /* semantic (cream theme is the default) */
  --bg: var(--cream);
  --bg-2: var(--cream-2);
  --fg: var(--loam);
  --muted: #675d48;
  --line: rgba(43, 36, 25, 0.18);
  --line-strong: rgba(43, 36, 25, 0.5);
  --accent: var(--spring-text);
  --accent-mark: var(--spring-deep);
  --focus: #1a56c4;

  /* type */
  --font-display: "Gabarito", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Asap", "Helvetica Neue", Arial, sans-serif;
  --t-h1: clamp(2.4rem, 6.2vw, 4.6rem);
  --t-h2: clamp(1.85rem, 3.8vw, 2.9rem);
  --t-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --t-lead: clamp(1.1rem, 1.7vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-label: 0.78rem;
  --lh-heading: 1.04;
  --lh-body: 1.6;
  --track-label: 0.1em;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --patch-pad: clamp(4rem, 10vh, 7rem);
  --edge: clamp(1.1rem, 4vw, 3rem);
  --measure: 40rem;
  --lane-max: 72rem;

  /* shape + depth */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(43, 36, 25, 0.05), 0 10px 28px rgba(43, 36, 25, 0.08);

  /* motion */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* layers */
  --z-header: 40;
  --z-skip: 60;
}

/* loam theme: any wrapper with data-theme="loam" flips the semantic set */
[data-theme="loam"] {
  --bg: var(--loam);
  --bg-2: var(--loam-2);
  --fg: var(--cream);
  --muted: #b3a88f;
  --line: rgba(247, 242, 229, 0.2);
  --line-strong: rgba(247, 242, 229, 0.55);
  --accent: var(--spring-bright);
  --accent-mark: var(--spring-bright);
  --focus: #a7c4ff;
}