/* Falck design tokens
 * Source: brandportal.falck.com — "02. Visual identity", pulled 2026-07-27.
 * Every value below is documented in the guide AND verified against the official
 * swatch artwork.
 *
 * NOT authoritative for digital. Falck's guide explicitly defers screen colour usage
 * and type sizing to its Figma Design System ("Falck ReBranded"). The semantic layer
 * here is our own WCAG-safe reading of the print palette — revisit once we have Figma.
 */

:root {
  /* ============ Primary ============ */
  --falck-red: #FF1E28;   /* Pantone 185C · RAL 3020 */
  --falck-dark-red: #66182A;   /* Pantone 7428 · RAL 3005 */
  --falck-white: #FFFFFF;

  /* ---- Dark Red tints (sanctioned 9-step ramp) ---- */
  --dark-red-90: #752F3F;
  --dark-red-80: #844654;
  --dark-red-70: #935D69;
  --dark-red-60: #A3747F;
  --dark-red-50: #B28B94;
  --dark-red-40: #C1A2A9;
  --dark-red-30: #D1B9BE;
  --dark-red-20: #E0D0D4;
  --dark-red-10: #EFE7E9;

  /* ============ Secondary — use sparingly ============ */
  --falck-dark-blue: #121A44;   /* Pantone 648 */
  --falck-vibrant-blue: #0047FF;   /* Pantone 300 */
  --falck-dark-grey: #415565;   /* Pantone 7545 — the guide's hex is wrong */
  --falck-cool-grey: #D1D4D3;   /* Pantone 427 */
  --falck-response-yellow: #FFE600;   /* Pantone Yellow C — highest-priority CTAs only */

  /* ============ Semantic ============
   * Contrast vs white: dark-blue 16.7:1 · dark-red 12.1:1 · dark-grey 7.7:1
   *                    falck-red 3.8:1 (large text only) · yellow 1.3:1 (bg only)
   */
  --surface: var(--falck-white);
  --surface-muted: var(--dark-red-10);
  /* The app's dark surface is navy, not dark red — a deliberate choice so two
     reds never stack under the red topbar, and so Response Yellow sits on navy
     at 13.2:1 rather than fighting a warm red. This token pointed at dark red
     and had zero consumers while thirteen rules named the navy directly. */
  --surface-inverse: var(--falck-dark-blue);

  --border: var(--falck-cool-grey);
  --border-strong: var(--dark-red-30);

  --text: var(--falck-dark-red);        /* 12.1:1 — body copy */
  --text-muted: var(--falck-dark-grey); /* 7.7:1  — secondary copy */
  --text-on-dark: var(--falck-white);

  /* Falck Red never carries body text — headings, accents and fills only. */
  --accent: var(--falck-red);
  --accent-text: var(--falck-dark-red);
  --on-accent: var(--falck-white);

  /* Repointed off Vibrant Blue, which is now series 2 of six rather than one of
     two. The old note argued a transient 2px outline never reads as a plotted
     line — fair with two series, and no longer fair on a card carrying six,
     where a focused chart is outlined in the exact colour of one of its lines.
     Dark Blue is the right home: 16.7:1, and deliberately NOT in the series set
     because it failed the colour-vision check as a series colour. */
  --focus-ring: var(--falck-dark-blue);

  /* ---- Chart series (categorical) ----
   * Identity, not magnitude — one hue per area. Six of them, and six is not an
   * arbitrary stopping point: it is where this brand runs out of room.
   *
   * Every value here clears 3:1 against --surface for a 2px stroke, avoids the
   * reserved status hues and body-text Dark Red, and was picked by maximising
   * the WORST pairwise CIELAB separation across normal, protanopic, deuteranopic
   * and tritanopic vision rather than by eye. At six the worst pair is ΔE 25.6
   * (Falck Red vs Deep Red, protan). A seventh drops that to 21.7 and an eighth
   * to 16.9, i.e. below the 24.1 floor the original two-colour pair was held to
   * — so a seventh area does not get a seventh hue. It reuses these and changes
   * its stroke pattern instead; see PATTERNS in core/charts.js.
   *
   * Contrast vs white: 1) 3.84  2) 6.28  3) 8.45  4) 4.56  5) 11.02  6) 9.92
   *
   * These assume --surface is light. There is no dark mode anywhere in the app
   * today; if one arrives, every value here needs revalidating against the new
   * ground, because contrast is a relationship and not a property of the hue. */
  --chart-series-1: var(--falck-red);          /* brand primary */
  --chart-series-2: var(--falck-vibrant-blue); /* brand secondary */
  --chart-series-3: #703285;                   /* purple */
  --chart-series-4: #0F8570;                   /* teal */
  --chart-series-5: #4717A1;                   /* indigo */
  --chart-series-6: #861313;                   /* deep red */

  /* ---- Status ----
   * The brand colour is red, which collides with the usual "error" convention.
   * Error therefore uses Dark Red (brand-native, unambiguous against Falck Red);
   * ok/warn are outside the palette and need a decision.
   */
  /* Green is outside the brand palette — the guide has no success colour. Kept
     deliberately desaturated so it reads as "settled" beside Dark Blue rather
     than competing with Falck Red. Flag for branding if it ever ships. */
  --status-ok: #1B6B45;
  --status-warn: #B26A00;
  --status-error: var(--falck-dark-red);
  --status-info: var(--falck-dark-blue);
  --status-attention-bg: var(--falck-response-yellow);
  --status-attention-text: var(--falck-dark-blue);
  /* The tint behind a note or callout, as opposed to Response Yellow itself,
     which is too strong to sit under text. Four near-identical literals were in
     the stylesheet (#FFFBE6 ×3, #FFF8D6 ×1) doing exactly this job. */
  --surface-attention: #FFFBE6;
  /* The tint behind an error message. Pairs with --status-error for the text,
     the same way --surface-attention pairs with --status-attention-text. */
  --surface-error: #FDECEE;
  /* And the one behind a confirmation. Added for the "Text queued for …" banner:
     the alert component had a tint for a refusal and one for a note, and the
     third thing a banner has to be able to say — it worked — had no rule, so it
     rendered as a bare box that read like neither. Same relationship to
     --status-ok as the two above have to theirs. */
  --surface-ok: #ECF5F0;

  /* ============ Type ============
   * "Falck" is the bespoke corporate typeface — free for use, five weights plus
   * italics. Package is behind login; drop webfonts in ./fonts/ and this works.
   */
  --font-display: "Falck", system-ui, -apple-system, sans-serif;
  --font-body: "Falck", system-ui, -apple-system, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Scale is ours — Falck documents print sizes only, and defers digital to Figma. */
  --fs-caption: 0.8125rem;
  --fs-body-sm: 0.875rem;
  --fs-body: 1rem;
  --fs-h4: 1.125rem;
  --fs-h3: 1.375rem;
  --fs-h2: 1.75rem;
  --fs-h1: 2.25rem;
  --fs-display: 3.5rem;

  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* ============ Space / radius ============ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius-sm: 4px;
  --radius-md: 10px;   /* matches the guide's button styling */
  --radius-pill: 100px;   /* the guide's own button radius */
}