/* =========================================================================
   THEME – everything that makes this app look like SCAPE°.
   css/kit.css and css/app.css only use the custom properties defined here,
   so another institution changes this file (plus theme.js) and nothing else.

   SCAPE° corporate design (Bureau Mitte), in short:
   * Founders Grotesk only. Headlines very large, light, in caps; labels
     medium weight in caps; running text regular, mixed case.
   * Palette colours only. Strong tones always next to pastels. Text black,
     white on dark fields.
   * Flat: hard-edged rectangular colour fields, no rounded rectangles,
     no shadows, no gradients. Circles and pills belong to the shape
     vocabulary and may be used.
   ========================================================================= */

/* Founders Grotesk (Klim Type Foundry) is commercial and not shipped. It is
   used when installed on the device; otherwise the system fallback applies. */
@font-face { font-family: "Founders Grotesk"; src: local("Founders Grotesk Light"), local("FoundersGrotesk-Light"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: local("Founders Grotesk Regular"), local("FoundersGrotesk-Regular"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: local("Founders Grotesk Medium"), local("FoundersGrotesk-Medium"); font-weight: 500; font-display: swap; }

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font: "Founders Grotesk", "Helvetica Neue", Inter, Arial, sans-serif;
  --fw-light: 300;      /* big headlines, big numbers, wordmark */
  --fw-regular: 400;    /* running text */
  --fw-medium: 500;     /* labels, buttons, small caps headings, emphasis */
  --caps: uppercase;    /* headlines and labels; "none" for a brand without caps */

  /* ---- Palette (scape-corporate-design, section 4) --------------------- */
  --c-black: #000000;   --c-white: #FFFFFF;
  --c-olive: #726B1E;   --c-sand: #D4BFA3;
  --c-gold: #E09F00;    --c-amber: #F59E24;   --c-yellow: #FFE547;
  --c-yellow-strong: #FFD500;  --c-yellow-bright: #FFED00;  --c-yellow-pastel: #FFF487;  --c-yellow-pale: #FDF6B7;
  --c-rust: #D55117;    --c-orange: #EE7518;  --c-salmon: #EF887F;
  --c-pink: #F8E1E6;    --c-cream: #F2E4BA;
  --c-red: #E41513;     --c-red-2: #E8472E;
  --c-purple: #442683;  --c-purple-2: #523E91; --c-lavender: #E0E5F5; --c-lilac: #C5B8DB;
  --c-green-strong: #00983A; --c-green: #62BA91; --c-green-pale: #B0D8C0;
  --c-mint: #CFE6CE;    --c-pale-green: #D0E8DC;
  --c-cyan: #0097BE;    --c-cyan-2: #44ABCC;  --c-cyan-3: #80C0DA;
  --c-petrol: #1F6C8E;  --c-teal: #007B73;    --c-grey: #AEC4C2;
  --c-navy: #28348B;    --c-blue: #0253A0;    --c-blue-2: #3274BA;
  --c-blue-pale: #98B8DD; --c-ice: #D4EDF8;

  /* ---- Roles ----------------------------------------------------------- */
  --ink: var(--c-black);          /* text, outlines */
  --ink-inverse: var(--c-white);  /* text on dark fields */
  --ink-muted: #4d4d4d;           /* secondary text (8.4:1 on white) */
  --paper: var(--c-white);        /* page background */
  --line: var(--c-black);         /* borders of buttons, cards, frames */
  --line-width: 2px;
  --rule-soft: #d9d9d9;           /* grid lines and axes inside charts only */
  --primary: var(--c-yellow-bright); /* THE main action button */
  --primary-ink: var(--c-black);
  --active: var(--c-black);       /* selected / switched-on state */
  --active-ink: var(--c-white);
  --accent: var(--c-orange);      /* decoration of the current part */
  --accent-pale: var(--c-yellow-pastel); /* hover */
  --merke: var(--c-yellow-pale);  /* "Merke" box */
  --focus: var(--c-cyan);         /* keyboard focus ring */
  --stage-bg: var(--c-cream);     /* behind simulations */

  /* Poster header (CD "Gestaltungsebenen"): background field, two fields on
     the right, a small solid shape and a large cropped outline. Each app
     overrides these with its own signature combination. */
  --f1: var(--c-yellow-pastel);
  --f2: var(--c-orange);
  --f3: var(--c-navy);
  --shape: var(--c-green);
  --outline: var(--c-pink);

  /* Footer */
  --foot-bg: var(--c-navy);
  --foot-ink: var(--c-white);

  /* Shape */
  --radius: 0;                    /* no rounded rectangles in the CD */
  --tap: 44px;                    /* minimum touch target */
}

/* ---- Wordmark ------------------------------------------------------------
   "SCAPE°" with the subtitle spread over the full width of the word.
   The markup comes from theme.js (brand.logoHtml). */
.logo { display: inline-flex; flex-direction: column; color: var(--ink); text-decoration: none; line-height: 1; }
.logo-word { font-family: var(--font); font-weight: var(--fw-light); font-size: var(--logo-size, 40px); letter-spacing: .01em; line-height: .85; white-space: nowrap; }
.logo-sub { display: flex; justify-content: space-between; gap: .5em; margin-top: calc(var(--logo-size, 40px) * .13); font-family: var(--font); font-weight: var(--fw-medium); font-size: calc(var(--logo-size, 40px) * .23); letter-spacing: .04em; text-transform: uppercase; }

/* ---- Isobaren zeichnen ---------------------------------------------------- */
:root {
  --f1: var(--c-ice); --f2: var(--c-gold); --f3: var(--c-cyan);
  --shape: var(--c-lilac); --outline: var(--c-yellow-bright);
  --stage-bg: var(--c-cream);          /* around the map (= THEME.isobars.land) */
  --warn: var(--c-red);                /* status line: crossings, wrong stations */
  --good: var(--c-green-strong);       /* result: a level separates every station */
  --result-head: var(--c-ice);         /* result card: score band */
}