/* GENERATED by build/tokens.mjs from docs/toni-landing/tokens.json — do not edit. */
/* Regenerate:  node build/tokens.mjs                                            */

/* Measured contrast traps — read before picking any colour:
   · #E8590C is 3,58:1 on white — FILL ONLY. Orange TEXT is #C2410C.
   · #746E65 on #EAE7E1 is 4,09:1 — FAILS. On that surface use #3B3630 (9,69:1).
   · #646C65 on #17140F is 3,45:1 — FAILS as text (computed, not in tokens.json).
   ·    It is color.border.dark: a BORDER colour only. Footer legal text uses #9A968E (6,42:1).
*/

/* ---- self-hosted faces (BRIEF §3). font-weight is a RANGE on purpose. ---- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- colour ---- */
  --color-bg-canvas: #FBFAF8;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-2: #F5F3EF;
  --color-bg-n100: #EAE7E1;
  --color-bg-inverse: #17140F;
  --color-bg-inverse-2: #222724;
  --color-text-primary: #17140F;
  --color-text-secondary: #746E65;
  --color-text-body: #3B3630;
  --color-text-inverse: #F1F0EB;
  --color-text-inverse-muted: #9A968E;
  --color-text-link: #0B6E52;
  --color-text-on-accent: #17140F;
  --color-border-hairline: #D9D5CD;
  --color-border-default: #99938A;
  --color-border-strong: #746E65;
  --color-border-focus: #0B6E52;
  --color-border-dark: #646C65;
  --color-action-primary-bg: #07523D;
  --color-action-primary-label: #FFFFFF;
  --color-action-primary-pressed: #053D2E;
  --color-action-partner-bg: #FF8A4C;
  --color-action-partner-label: #17140F;
  --color-brand-primary: #0B6E52;
  --color-brand-tint-100: #D6EBE2;
  --color-brand-tint-50: #EFF7F3;
  --color-brand-accent: #E8590C;
  --color-brand-accent-text: #C2410C;
  --color-feedback-success-fg: #0B6E52;
  --color-feedback-success-tint: #D6EBE2;
  --color-feedback-warning-fg: #A65A00;
  --color-feedback-warning-tint: #FFF1DC;
  --color-feedback-danger-fg: #B3261E;
  --color-feedback-danger-tint: #FDECEA;

  /* ---- colour: present in the approved design, absent from tokens.json ---- */
  --color-brand-on-dark: #4FCB9F; /* stepper nodes, footer mark, focus ring on ink — 9,24:1 on #17140F */
  --color-border-dark-2: #2E342F; /* footer divider, inactive stepper rail — non-text */
  --color-bg-inverse-3: #101311; /* PIN box, partner field — #9A968E on it 6,49:1 */
  --color-action-partner-pressed: #FF7A33; /* partner CTA pressed — ink on it 7,07:1 */
  --color-feedback-danger-fg-on-dark: #FFB4AB; /* error text on the ink CARD — 10,82:1 on #17140F */
  --color-feedback-danger-tint-on-dark: #2A1512; /* error tint on the ink/green bands — #F1F0EB on it 15,15:1 */
  --color-feedback-danger-fg-strong: #8E1B13; /* status text on light surfaces — 9,07:1 on #FFFFFF, 8,69:1 on #FBFAF8, 7,93:1 on #FDECEA (BRIEF §3 asks ≥7:1 for status; #B3261E is only 6,54:1) */
  --color-feedback-danger-fg-on-green: #FFDAD5; /* status text on the #07523D band — 7,11:1 on #07523D, 13,37:1 on its own #2A1512 tint (#FFB4AB is only 5,42:1 on green) */
  --color-border-dark-node: #868E86; /* upcoming stepper node ring — 4,50:1 on #222724 (WCAG 1.4.11 needs 3:1; #646C65 is 2,80:1) */
  --color-border-dark-rail: #6E766F; /* inactive stepper rail — 3,24:1 on #222724 (non-text, decorative; #2E342F was 1,19:1) */

  /* ---- spacing scale ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-72: 72px;
  --gutter-desktop: 120px;
  --gutter-mobile: 16px;
  --section-desktop: 72px;
  --section-mobile: 36px;

  /* ---- radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---- size ---- */
  --size-touch-min: 48px;
  --size-cta-height: 56px;
  --size-field-height: 56px;
  --size-icon: 24px;
  --size-icon-sm: 20px;

  /* ---- type families ---- */
  --font-ui: 'Manrope', "Noto Sans", Roboto, system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', var(--font-ui);

  /* ---- type ramp (px/line-height/weight/tracking, per tokens.json) ---- */
  --type-desktop-h1-size: 62px;
  --type-desktop-h1-line: 66px;
  --type-desktop-h1-weight: 700;
  --type-desktop-h1-tracking: -0.025em;
  --type-desktop-h2-size: 38px;
  --type-desktop-h2-line: 46px;
  --type-desktop-h2-weight: 700;
  --type-desktop-h2-tracking: -0.02em;
  --type-desktop-h3-size: 21px;
  --type-desktop-h3-line: 28px;
  --type-desktop-h3-weight: 700;
  --type-desktop-body-l-size: 21px;
  --type-desktop-body-l-line: 32px;
  --type-desktop-body-l-weight: 400;
  --type-desktop-body-size: 16px;
  --type-desktop-body-line: 25px;
  --type-desktop-body-weight: 400;
  --type-desktop-label-size: 16px;
  --type-desktop-label-line: 20px;
  --type-desktop-label-weight: 600;
  --type-desktop-caption-size: 14px;
  --type-desktop-caption-line: 21px;
  --type-desktop-caption-weight: 400;
  --type-mobile-h1-size: 38px;
  --type-mobile-h1-line: 43px;
  --type-mobile-h1-weight: 700;
  --type-mobile-h1-tracking: -0.02em;
  --type-mobile-h2-size: 28px;
  --type-mobile-h2-line: 34px;
  --type-mobile-h2-weight: 700;
  --type-mobile-h2-tracking: -0.02em;
  --type-mobile-h3-size: 18px;
  --type-mobile-h3-line: 24px;
  --type-mobile-h3-weight: 700;
  --type-mobile-body-size: 16px;
  --type-mobile-body-line: 25px;
  --type-mobile-body-weight: 400;
  --type-mobile-label-size: 16px;
  --type-mobile-label-line: 20px;
  --type-mobile-label-weight: 600;
  --type-mobile-caption-size: 13.5px;
  --type-mobile-caption-line: 20px;
  --type-mobile-caption-weight: 400;

  /* ---- breakpoints (as values; media queries cannot read custom properties) ---- */
  --bp-mobile: 390px;
  --bp-tablet: 768px;
  --bp-desktop: 1440px;
  --bp-content-max: 1200px;
}