/* =====================================================================
   THEME TOKENS — Sodexo brand guidelines (Dec 2025) and typography
   guidelines (Jan 2026). Every colour below is from the published
   palette; nothing else in the site uses a raw colour or font name.

   Rules applied here:
   - Titles in Sodexo Blue, body text in Dark Blue-Purple.
   - Red used sparingly, never as a flat tone or block fill.
   - No gradients. One colour per block.
   - At most three secondary colours in use: Fir Green, Sky Blue, Bronze.
   - Sansa is licensed (agencies need a signed Sodexo contract); the
     approved free alternative is Open Sans, with Arial as fallback.
   ===================================================================== */
/* Open Sans is served from this site, never from Google: loading it from Google sends each visitor's
   IP address to Google, which German courts have ruled a GDPR breach. One variable file covers every weight. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: local("Open Sans"), url("/assets/fonts/open-sans-variable.woff") format("woff");
}

:root {
  /* Primary palette */
  --sodexo-blue: #283897;          /* Pantone 2747C: titles, primary actions, primary blocks */
  --sodexo-blue-shade: #1E2B78;    /* darker shade of Sodexo Blue for hover (shades of a colour are allowed) */
  --blue-light: #D7DFF3;           /* Pantone 2706C: tinted surfaces, selected states */
  --blue-lighter: #EBF0F9;         /* Pantone 649C: page background, subtle surfaces */
  --dark-blue-purple: #2A295C;     /* Pantone 5265C: body text */
  --white: #FFFFFF;
  --red: #EE0000;                  /* Pantone 185C: sparingly, never a fill */

  /* Secondary palette in use (three maximum) */
  --fir: #228085;                  /* Fir Green: positive / completed. AA on white for text. */
  --fir-mid: #95D1D4;
  --fir-light: #DFF2F2;
  --sky: #199CDA;                  /* Sky Blue: informational. AA18 on white, so used with dark text. */
  --sky-mid: #8CCDEC;
  --sky-light: #E3F3FB;
  --bronze: #B28B4E;               /* Bronze: attention / under. AA18 on white, so used with dark text. */
  --bronze-mid: #D8C5A6;
  --bronze-light: #F3EEE4;

  /* Semantic aliases used by components */
  --navy: var(--sodexo-blue);
  --navy-deep: var(--sodexo-blue-shade);
  --navy-mid: var(--sodexo-blue);
  --navy-soft: var(--blue-light);
  --navy-tint: var(--blue-lighter);
  --brand-primary: var(--sodexo-blue);
  --brand-accent: var(--red);
  --link: var(--sodexo-blue);

  /* Text */
  --ink: var(--dark-blue-purple);
  --ink-2: #4A4A78;                /* shade of Dark Blue-Purple: secondary text (AA on white) */
  --ink-3: #6B6B90;                /* shade of Dark Blue-Purple: muted text (AA on white) */

  /* Lines and surfaces */
  --line: var(--blue-light);
  --line-strong: #B9C4E6;          /* shade between the two light blues, for input borders */
  --paper: var(--white);
  --paper-2: var(--blue-lighter);
  --paper-3: var(--blue-light);

  /* Status aliases */
  --ok: var(--fir);
  --ok-soft: var(--fir-light);
  --warn: var(--bronze);
  --warn-soft: var(--bronze-light);
  --bad: var(--red);
  --bad-soft: #FDECEC;             /* light tint of red for the flag background only */
  --info: var(--sky);
  --info-soft: var(--sky-light);
  --muted-soft: var(--blue-lighter);

  /* Type */
  --font: "Open Sans", Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 26px;
  --fs-xxl: 34px;

  /* Shape: rounded corners from the brand card */
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(42, 41, 92, 0.05), 0 4px 14px rgba(42, 41, 92, 0.05);
  --shadow-lg: 0 12px 36px rgba(42, 41, 92, 0.18);

  /* Layout */
  --content-max: 1240px;
  --gutter: 24px;
  --topbar-h: 60px;

  /* Logos are set from js/config.js at start-up (see applyLogos in main.js) */
  --logo-on-dark: url("");
  --logo-on-light: url("");
  --logo-card: url("");
  --logo-height: 32px;
  --logo-width: 100px;             /* logotype is 3.1:1 */
}