/* GENERATED from design/tokens.json v2 by tools/gen_tokens/gen_tokens.dart.
   Do not edit. Edit design/tokens.json and run `dart tools/gen_tokens/gen_tokens.dart`.
   The website has no second colour or type system: every value below is from the one source. */

/* OFL-1.1. The licence text travels with the font: assets/fonts/OFL-Rubik.txt */
@font-face {
  font-family: 'Rubik';
  src: url('assets/fonts/Rubik-latin-var.woff2') format('woff2') tech(variations);
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fare-font-family: 'Rubik', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fare-font-features: "tnum";

  /* Brand (owner logo): navy / teal-green / neutral. Never a verdict meaning. */
  --fare-brand-navy-deep: #00224B;
  --fare-brand-navy: #04284F;
  --fare-brand-blue: #024784;
  --fare-brand-cyan: #018DA8;
  --fare-brand-teal: #08BF90;
  --fare-brand-teal-ink: #007A7D;
  --fare-brand-green: #2EDA7F;
  --fare-brand-navy-light: #7FA8E8;
  --fare-brand-neutral-white: #FFFFFF;
  --fare-brand-neutral-cloud: #F7F8FA;
  --fare-brand-neutral-mist: #E1E4EA;
  --fare-brand-neutral-slate: #646E7E;
  --fare-brand-neutral-ink: #12141A;

  /* Light palette. The website ships the light theme only (meta color-scheme: light). */
  --fare-background: #F7F8FA;
  --fare-surface: #FFFFFF;
  --fare-surface-raised: #FFFFFF;
  --fare-surface-highest: #FFFFFF;
  --fare-border: #E1E4EA;
  --fare-border-strong: #838B9E;
  --fare-text-primary: #12141A;
  --fare-text-secondary: #4B5261;
  --fare-text-muted: #646E7E;
  --fare-accent: #04284F;
  --fare-on-accent: #FFFFFF;
  --fare-accent-subtle: #F0F2F4;
  --fare-progress-fill: #08BF90;
  --fare-progress-track: #04284F;
  --fare-feedback-error: #C2274B;
  --fare-feedback-warning: #8A5A00;
  --fare-feedback-success: #04284F;
  --fare-feedback-info: #4B5261;
  --fare-overlay-scrim: #000000;

  /* The three dark-palette values the website needs: text and rules ON the navy surfaces. */
  --fare-on-navy-primary: #F5F7FA;
  --fare-on-navy-secondary: #A7AEBB;
  --fare-on-navy-border: #2A2F3A;

  /* Spacing */
  --fare-space-xxs: 0.125rem; /* 2px */
  --fare-space-xs: 0.25rem; /* 4px */
  --fare-space-sm: 0.5rem; /* 8px */
  --fare-space-md: 0.75rem; /* 12px */
  --fare-space-lg: 1rem; /* 16px */
  --fare-space-xl: 1.5rem; /* 24px */
  --fare-space-xxl: 2rem; /* 32px */
  --fare-space-xxxl: 3rem; /* 48px */

  /* Radius */
  --fare-radius-xs: 0.25rem; /* 4px */
  --fare-radius-sm: 0.5rem; /* 8px */
  --fare-radius-md: 0.75rem; /* 12px */
  --fare-radius-lg: 1rem; /* 16px */
  --fare-radius-xl: 1.5rem; /* 24px */
  --fare-radius-pill: 62.4375rem; /* 999px */

  /* Border widths stay in px: a hairline must not be rounded away by a font scale. */
  --fare-border-width-hairline: 1px;
  --fare-border-width-strong: 2px;

  /* Control and row sizes */
  --fare-size-control-height: 3rem; /* 48px */
  --fare-size-control-height-small: 2.5rem; /* 40px */
  --fare-size-input-height: 3.25rem; /* 52px */
  --fare-size-list-row-min: 3.5rem; /* 56px */
  --fare-size-tag-height: 1.75rem; /* 28px */
  --fare-size-tag-height-small: 1.5rem; /* 24px */
  --fare-size-icon-button: 3rem; /* 48px */
  --fare-size-gutter: 1rem; /* 16px */

  /* Icon sizes */
  --fare-icon-sm: 1rem; /* 16px */
  --fare-icon-md: 1.25rem; /* 20px */
  --fare-icon-lg: 1.5rem; /* 24px */
  --fare-icon-xl: 2rem; /* 32px */

  /* Motion */
  --fare-motion-duration-fast: 120ms;
  --fare-motion-duration-base: 200ms;
  --fare-motion-duration-slow: 300ms;
  --fare-motion-overlay-fade: 150ms;
  --fare-motion-overlay-analysing-grace: 250ms;
  --fare-motion-overlay-analysing-hold: 300ms;

  /* Accessibility floors */
  --fare-a11y-touch-target-min: 3rem; /* 48px */
  --fare-a11y-text-scale-max: 2;
  --fare-a11y-text-scale-max-display: 1.3;
  --fare-a11y-nav-label-scale-max: 1.3;
  --fare-a11y-focus-ring-width: 0.125rem; /* 2px */
  --fare-a11y-contrast-text: 4.5;
  --fare-a11y-contrast-large-text: 3;
  --fare-a11y-contrast-non-text: 3;

  /* Web type scale: the only sizes, weights, line heights and tracking the site uses. */
  --fare-web-type-display1-size: 4.5rem; /* 72px */
  --fare-web-type-display1-line-height: 4.5rem; /* 72px */
  --fare-web-type-display1-weight: 700;
  --fare-web-type-display1-tracking: -0.03em;
  --fare-web-type-display2-size: 3.5rem; /* 56px */
  --fare-web-type-display2-line-height: 3.625rem; /* 58px */
  --fare-web-type-display2-weight: 700;
  --fare-web-type-display2-tracking: -0.03em;
  --fare-web-type-display-size: 3rem; /* 48px */
  --fare-web-type-display-line-height: 3.25rem; /* 52px */
  --fare-web-type-display-weight: 700;
  --fare-web-type-display-tracking: -0.02em;
  --fare-web-type-display3-size: 2.75rem; /* 44px */
  --fare-web-type-display3-line-height: 3rem; /* 48px */
  --fare-web-type-display3-weight: 700;
  --fare-web-type-display3-tracking: -0.03em;
  --fare-web-type-headline1-size: 2rem; /* 32px */
  --fare-web-type-headline1-line-height: 2.375rem; /* 38px */
  --fare-web-type-headline1-weight: 700;
  --fare-web-type-headline1-tracking: -0.02em;
  --fare-web-type-headline2-size: 1.5rem; /* 24px */
  --fare-web-type-headline2-line-height: 1.875rem; /* 30px */
  --fare-web-type-headline2-weight: 700;
  --fare-web-type-headline2-tracking: -0.02em;
  --fare-web-type-title-size: 1.25rem; /* 20px */
  --fare-web-type-title-line-height: 1.75rem; /* 28px */
  --fare-web-type-title-weight: 600;
  --fare-web-type-title-tracking: -0.01em;
  --fare-web-type-lead-size: 1.125rem; /* 18px */
  --fare-web-type-lead-line-height: 1.75rem; /* 28px */
  --fare-web-type-lead-weight: 400;
  --fare-web-type-lead-tracking: 0em;
  --fare-web-type-body-size: 1rem; /* 16px */
  --fare-web-type-body-line-height: 1.625rem; /* 26px */
  --fare-web-type-body-weight: 400;
  --fare-web-type-body-tracking: 0em;
  --fare-web-type-ui-size: 0.875rem; /* 14px */
  --fare-web-type-ui-line-height: 1.25rem; /* 20px */
  --fare-web-type-ui-weight: 400;
  --fare-web-type-ui-tracking: 0em;
  --fare-web-type-meta-size: 0.75rem; /* 12px */
  --fare-web-type-meta-line-height: 1.125rem; /* 18px */
  --fare-web-type-meta-weight: 400;
  --fare-web-type-meta-tracking: 0em;
  --fare-web-type-eyebrow-size: 0.75rem; /* 12px */
  --fare-web-type-eyebrow-line-height: 1rem; /* 16px */
  --fare-web-type-eyebrow-weight: 700;
  --fare-web-type-eyebrow-tracking: 0.12em;

  /* Shadows. `elevation` is a Flutter number; CSS needs strings, under the same names. */
  --fare-web-shadow-card: 0 1px 2px rgba(4, 40, 79, .06);
  --fare-web-shadow-raised: 0 4px 12px rgba(4, 40, 79, .08);
  --fare-web-shadow-highest: 0 16px 40px rgba(4, 40, 79, .16);
  --fare-web-shadow-none: none;

  /* Section rhythm and page gutters, above spacing.xxxl */
  --fare-web-space-section: 6rem; /* 96px */
  --fare-web-space-section-compact: 4rem; /* 64px */
  --fare-web-space-gutter-xl: 4rem; /* 64px */
  --fare-web-space-gutter-lg: 3rem; /* 48px */
  --fare-web-space-gutter-md: 2rem; /* 32px */
  --fare-web-space-gutter-sm: 1.5rem; /* 24px */

  /* Content widths */
  --fare-web-max-width-content: 78rem; /* 1248px */
  --fare-web-max-width-panel: 50rem; /* 800px */
  --fare-web-max-width-prose: 45rem; /* 720px */
  --fare-web-max-width-form: 28.75rem; /* 460px */
}

/* GOOD / MEDIUM / POOR / UNKNOWN. Declared ONLY here, so no chrome, badge, notice or
   button can reach a verdict hue: a rule outside a [data-verdict] subtree cannot
   resolve these names at all (CLAUDE.md rule 8, BC-WEB-09). The website ships the
   default preset; the presentation colours stay user-configurable in the app. */
[data-verdict] {
  --fare-verdict-good: #15804A;
  --fare-verdict-good-on: #FFFFFF;
  --fare-verdict-medium: #F2994A;
  --fare-verdict-medium-on: #1A1A1A;
  --fare-verdict-poor: #D32F2F;
  --fare-verdict-poor-on: #FFFFFF;
  --fare-verdict-unknown: #6B7280;
  --fare-verdict-unknown-on: #FFFFFF;
}