/* Copy of brand/tokens.css, made by scripts/brand-sync.mjs. Change brand/tokens.css, not this file. */
/* Rodio design system: the one source for colour, type, space, lines and shape.
   Used by the app (imported in src/main.tsx) and the website (copied to site/tokens.css with the
   fonts by scripts/brand-sync.mjs at every build and site deploy). Change a value here, push to
   main, and both go live. The Branding page of the organization Rodio shows these values live.
   Rodio Studio cannot load this file: after a change, the Werkplaats task "Studio bijwerken naar
   de merkstijl" brings the same values to Studio. Rules in words: CLAUDE.md, "Huisstijl". */
/* Typefaces. Files live in brand/fonts/ (the website gets a copy in site/fonts/).
   - Outfit: headings and subheadings in the app, on the website and in Rodio Studio. SIL Open Font License
     (brand/fonts/Outfit-OFL.txt), free to use on the web. One variable file, weights 100 to 900.
     Outfit has no italic: the grey second part of a heading stays upright (no fake slant).
   - Switzer: body text, labels and buttons, everywhere. Fontshare, ITF Free Font
     License (brand/fonts/Switzer-FFL.txt), free for commercial use, also on the web. */
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-SemiboldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* IBM Plex Mono (SIL Open Font License, Latin subset), only for codes and hex values. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Greys: four surfaces, one line, three inks. Cards are Grey (palette of 3 November 2026). */
  --paper: #f4f3f3; /* Chalk: the page */
  --grey: #e3e3e1; /* Grey (Cool Grey 1 U, 2330 C) */
  --surface: var(--grey); /* cards and panels */
  --surface-sunk: #d6d6d3; /* secondary buttons, tabs, filters */
  --field: #fafaf9; /* input fields */
  --white: #ffffff;
  --line: #c9c9c5;
  --charcoal: #1d1c1b; /* fixed Charcoal, for parts that stay dark inside a coloured fill */
  --ink: var(--charcoal); /* text; turns white inside a Flag 800 fill */
  --ink-2: #575552; /* secondary text */
  --ink-3: #a3a09c; /* light grey: only on dark panels or as decoration */

  /* The Rodio palette (3 November 2026). Colour has a meaning: one per B, Verity Green for the
     main action, Flag 800 for headings, Flag 300 for dots. Only Flag 800 and Bronze carry white
     text; on the light colours text is Charcoal, secondary text too (Flag 300 with white is
     2.6:1). Gold and Bronze are in the palette without a fixed role in the app yet. */
  --verity-green: #7ae377; /* Pantone 2267 C */
  --purple: #e8b2f5; /* Pantone 7438 C */
  --flag-300: #f38536; /* Pantone 1485 C */
  --flag-800: #520e0b; /* Pantone 1805 C */
  --gold: #ceab53; /* Pantone 466 C */
  --bronze: #4e3b13; /* Pantone 7504 C */
  --b-belofte: var(--flag-300);
  --b-bewijs: var(--flag-800);
  --b-beleving: var(--purple);
  --b-bereik: var(--verity-green);
  --heading: var(--flag-800);
  --action: var(--verity-green); /* the main action, with Charcoal text */
  --accent: var(--flag-300); /* dots: the status Actie, the logo, the favicon */
  --on-dark: var(--white); /* text on Flag 800, Bronze and Charcoal */
  --on-dark-2: rgba(255, 255, 255, 0.86); /* secondary text there */
  --line-on-dark: rgba(255, 255, 255, 0.35);

  /* Typefaces: Outfit for headings and subheadings, Switzer for everything else */
  --font-heading: "Outfit", var(--font-sans);
  --font-sans: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* codes and hex values only */

  /* Type sizes: six fixed sizes, each with its line height. On phones the title and heading
     step down (see the media query below). */
  --text-label: 12px; /* labels: Switzer 600, capitals, +0.08em */
  --leading-label: 1.3;
  --text-small: 14px; /* secondary text, captions */
  --leading-small: 1.45;
  --text-body: 16px; /* running text, buttons, fields */
  --leading-body: 1.55;
  --text-sub: 20px; /* subheadings, card titles */
  --leading-sub: 1.3;
  --text-heading: 32px; /* section headings, big figures */
  --leading-heading: 1.15;
  --text-title: 56px; /* page titles */
  --leading-title: 1.05;
  --text-display: 104px; /* the four bands on the dashboard and the week number; phones 48 */
  --leading-display: 0.95;
  --tracking-label: 0.08em;
  --tracking-heading: -0.025em; /* Outfit: -25 in Illustrator (3 November 2026) */

  /* Weights */
  --weight-regular: 400; /* Switzer text */
  --weight-strong: 600; /* Switzer emphasis: buttons, labels, the main action */
  --weight-heading: 700; /* Outfit headings and subheadings (700 since 3 November 2026, standing in for Gilroy) */
  --weight-display: 700; /* Outfit at display size */

  /* Space: six steps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 48px;
  --space-6: 96px;

  /* Lines: no lines around buttons */
  --stroke: 1px; /* lines, frames, fields */
  --stroke-strong: 1.5px; /* status pills, chosen items */
  --focus: 2px; /* keyboard focus */
  --focus-offset: 2px;
  --band: 8px; /* the colour band that marks a B on a card */

  /* Shape: 50% only for dots */
  --radius: 28px; /* cards */
  --radius-field: 14px; /* fields */
  --radius-small: 10px; /* labels, small parts */
  --radius-pill: 999px; /* buttons, pills */
}

@media (max-width: 700px) {
  :root {
    --text-title: 40px;
    --text-heading: 24px;
    --text-display: 48px;
  }
}