/* CSL-IMT — Color tokens
   Palette is derived directly from the logo: Blau, Hellblau and Sand.
   Gold is the single accent (use exactly once per design). */
:root {
  /* Brand — from the logo */
  --csl-blue: #5386E4;        /* Primary. Headlines, surfaces, footers */
  --csl-blue-dark: #4272C9;   /* Kleintext-Blau: Labels unter 14px auf hellem Grund (4.69:1). Markenblau erreicht dort nur 3.56:1. */
  --csl-blue-light: #90B2F0;  /* Pills, chips, accent surfaces */
  --csl-sand: #DCDCD2;        /* Dividers, light pills, text on blue */

  /* Accent — verbindlich: exactly 1× per design */
  --csl-gold: #FFDD00;

  /* Ink & neutrals */
  --csl-ink: #1A2233;         /* Strongest text; text on gold/light pills */
  --csl-text: #3D4658;        /* Body text (dark) */
  --csl-text-grey: #667085;   /* Secondary body / captions */
  --csl-muted: #98A2B3;       /* Labels, meta, disabled */
  --csl-muted-2: #8A94A6;     /* Muted body on white cards */
  --csl-white: #FFFFFF;
  --csl-page: #F4F5F7;        /* App/page background */
  --csl-border: #E3EAF7;      /* Card & hairline borders */

  /* Blue tints for depth */
  --csl-blue-050: #EEF1F6;    /* Skeleton / placeholder bars */
  --csl-blue-shadow: 20, 51, 126;   /* rgba base for brand shadows */
  --csl-ink-shadow: 20, 30, 60;     /* rgba base for card shadows */

  /* Semantic — correct / incorrect examples */
  --csl-success-bg: #F0F7F1;
  --csl-success-text: #2E6B3E;
  --csl-error-bg: #FBF1F0;
  --csl-error-text: #A13B30;
  --csl-error-strong: #C0392B;

  /* --- Semantic aliases --- */
  --text-heading: var(--csl-blue);
  --text-body: var(--csl-text-grey);
  --text-strong: var(--csl-ink);
  --text-muted: var(--csl-muted);
  --text-label-on-light: var(--csl-blue-dark);   /* Eyebrows, Sektionslabels, Kleintext auf Weiss/Page */
  --surface-page: var(--csl-page);
  --surface-card: var(--csl-white);
  --surface-brand: var(--csl-blue);
  --surface-accent: var(--csl-blue-light);
  --accent: var(--csl-gold);
  --border-card: var(--csl-border);
  --link: var(--csl-blue);
  --link-hover: var(--csl-blue-light);
}