/*
 * Webfoot design tokens
 * ---------------------
 * The single source of truth for color, type, shape and depth.
 * Everything else in the design system (components.css) and the
 * site (assets/css/site.css) reads from these variables.
 * The same values live in tokens.json for tools that want data.
 */

/* Fonts, served from this site (no third-party requests). Variable files
 * from Google Fonts, Latin and Latin Extended only. Licensed under the SIL
 * Open Font License 1.1: see /assets/fonts/OFL-*.txt. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Brand palette ---------------------------------------------- */
  --wf-ink: #15201B;          /* Ink: text, borders, hard shadows */
  --wf-duck: #F3D54E;         /* Duck: primary accent, the rubber duck */
  --wf-bill: #F08A3C;         /* Bill: secondary accent, focus rings */
  --wf-bill-deep: #C9621A;    /* Bill (deep): orange accents and large text on light */
  --wf-bill-ink: #A64B0C;     /* Bill (ink): small orange text on light, 5:1 contrast */
  --wf-fir: #123B2C;          /* Fir: deep green surfaces */
  --wf-rain: #EEF1EC;         /* Rain: page background */
  --wf-mist: #E4E9E5;         /* Mist: board / swatch background */
  --wf-white: #FFFFFF;

  /* ---- Supporting neutrals ------------------------------------------ */
  --wf-text-muted: #33423B;   /* body copy on light */
  --wf-text-subtle: #4A5A52;  /* labels, step numbers */
  --wf-text-off: #6A7870;     /* "not included" list items */
  --wf-icon-off: #9AA8A0;
  --wf-on-dark-strong: #E4EBE6;
  --wf-on-dark: #D9E3DC;      /* body copy on Fir / Ink */
  --wf-on-dark-muted: #B9C8BF;
  --wf-moss: #8FBF9F;         /* terminal prompt green */
  --wf-terminal-bar: #2A3A33;
  --wf-rule-dark: #33423B;
  --wf-shadow-deep: #0A1A13;  /* hard shadow on Fir */

  /* Placeholder fills for screenshots */
  --wf-tint-mint: #CFE3DC;
  --wf-tint-butter: #F6E7A6;

  /* ---- Semantic roles ------------------------------------------------ */
  --wf-accent: var(--wf-duck);
  --wf-bg: var(--wf-rain);
  --wf-surface: var(--wf-white);
  --wf-text: var(--wf-ink);
  --wf-border-color: var(--wf-ink);
  --wf-focus: var(--wf-bill);

  /* ---- Typography ---------------------------------------------------- */
  --wf-font-sans: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif;
  --wf-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wf-text-display: clamp(3rem, 6.4vw, 6rem);   /* hero h1 */
  --wf-text-h2: clamp(2.5rem, 4.6vw, 4rem);      /* section titles */
  --wf-text-h3: 1.625rem;                        /* 26px card titles */
  --wf-text-h3-lg: 1.75rem;                      /* 28px work / price titles */
  --wf-text-lede: 1.25rem;                       /* 20px */
  --wf-text-body-lg: 1.125rem;                   /* 18px */
  --wf-text-body: 1.0625rem;                     /* 17px */
  --wf-text-small: 0.9375rem;                    /* 15px */
  --wf-text-tiny: 0.875rem;                      /* 14px */

  --wf-weight-regular: 400;
  --wf-weight-medium: 500;
  --wf-weight-bold: 700;
  --wf-weight-black: 800;

  --wf-tracking-display: -0.05em;
  --wf-tracking-h2: -0.045em;
  --wf-tracking-h3: -0.025em;

  /* ---- Shape ---------------------------------------------------------- */
  --wf-border: 3px solid var(--wf-border-color);
  --wf-border-thin: 2px solid var(--wf-border-color);

  --wf-radius-sm: 12px;   /* inputs */
  --wf-radius-md: 16px;   /* buttons */
  --wf-radius-lg: 22px;   /* service cards */
  --wf-radius-xl: 24px;   /* pricing cards, form panel */
  --wf-radius-pill: 999px;

  /* ---- Depth: hard, offset "sticker" shadows ------------------------- */
  --wf-shadow-xs: 4px 4px 0 var(--wf-ink);
  --wf-shadow-sm: 5px 5px 0 var(--wf-ink);
  --wf-shadow-md: 6px 6px 0 var(--wf-ink);
  --wf-shadow-lg: 8px 8px 0 var(--wf-ink);
  --wf-shadow-xl: 10px 10px 0 var(--wf-ink);

  /* ---- Layout ---------------------------------------------------------- */
  --wf-container: 1240px;
  --wf-gutter: 32px;
  --wf-section-y: 112px;
}

@media (max-width: 640px) {
  :root {
    --wf-gutter: 20px;
    --wf-section-y: 80px;
  }
}