/* No @import here: an import cannot start until this file has arrived, so it
   cost every framing page a second render-blocking round trip. The pages that
   link this file link fonts.css and a11y-focus.css beside it instead. */
/* ============================================================================
   Planspiel — shared chrome design system (single source of truth).
   Consumed by the Fraunhofer-branded framing pages (login, 404, injection viewer,
   network map). Page-specific layout stays in each template; page-specific or
   divergent tokens may be re-declared inline AFTER this file to override.
   Design language reference: .claude/skills/planspiel-design/SKILL.md
   ========================================================================== */

:root{
  /* Fraunhofer brand */
  --fhg-green:#179c7d;      /* servers / "ok" / ambient glow */
  --fhg-silver:#a6bbc8;     /* hairlines, muted UI, hover borders */
  --fhg-orange:#f58220;     /* PRIMARY ACCENT — eyebrows, buttons, focus */
  --hover-red:#E2001A;      /* the ONE danger/alert red (official Fraunhofer red) */
  --hover-red-rgb:226,0,26;
  --hover-red-text:#FF5449; /* SMALL RED TEXT ONLY — #E2001A is 3.55:1 on --ink and
                               3.02:1 on --ink-2, below the 4.5:1 text bar. This lift is
                               5.52:1 / 4.71:1. Use --hover-red for fills, borders and
                               large marks; use this only for small text. */

  /* ── Readable variants of the brand colours (UI-01) ─────────────────────
     Same idea as --hover-red-text above, generalised. On the DARK theme the
     brand colours are already readable (orange 6.76:1 on --ink, 5.76:1 on
     --ink-2), so these resolve to the brand values here and only diverge in
     light. On LIGHT they do not: orange measures 2.37:1 on the canvas, 2.59:1
     on a card and 2.32:1 on a chip, and green 3.45:1 — all below the 4.5:1 bar,
     and the light theme has been the default since 2026-08-06.

     Use --fhg-*-text wherever the colour carries TEXT. Keep plain --fhg-orange
     / --fhg-green for fills, glows, borders and decorative marks, where the
     brand tone is the point and no contrast bar applies. --fhg-focus is the
     focus/graphical variant and only needs 3:1. */
  --fhg-orange-text:var(--fhg-orange);
  --fhg-green-text:#1bb591;
  --fhg-focus:var(--fhg-orange);
  --fhg-silver-text:var(--fhg-silver);  /* 6.19:1 on dark tints — no lift needed */
  --fhg-steel-text:#4aa8d8;   /* the brand steel is only 2.34:1 on --ink */
  --fhg-green-fill:#127a62;   /* fill that carries white text: 5.27:1.
                                 Theme-independent — white on the brand green is
                                 only 3.45:1 on dark too. */

  /* Dark surfaces (default) */
  --ink:#0c1b24;            /* page background */
  --ink-2:#13293a;          /* raised surface / card */
  --fg:#e6eef3;             /* body text */
  --fg-mute:#8ea2b0;        /* secondary text */
  --chip:#0f2230;           /* input / chip fill */
  --chip-border:rgba(166,187,200,0.22);
  --surface-border:rgba(166,187,200,0.14);

  /* ── Shape scale ────────────────────────────────────────────────────────
     Six steps, and they are the whole vocabulary for chrome + admin. Pick by
     what the thing IS, not by how big it looks: a card is --radius-lg even
     when it is small. Layers 2 and 3 (simulated tools, injection slides) are
     out of scope — they imitate other products and keep their own radii. */
  --radius-xs:4px;          /* micro tags, swatches, inline chips */
  --radius-sm:8px;          /* small controls: buttons, toggles, tabs */
  --radius-md:10px;         /* inputs, selects, larger chips */
  --radius-lg:14px;         /* cards, panels, section surfaces */
  --radius-pill:999px;      /* badges and pills */
  --radius-round:50%;       /* dots and circular buttons */

  /* ── Elevation ──────────────────────────────────────────────────────────
     Only shadows that genuinely repeat across chrome files are tokenised. The
     admin panel already declares its own semantic set in admin/base.html
     (--shadow-lift-menu/-drag/-drawer, --shadow-focus-ring, --shadow-state-halo,
     --shadow-card-hover-*); these are the chrome equivalents, same naming.

     Deliberately NOT tokenised: network.html's per-node-type glows
     (0 0 8px rgba(<zone colour>,0.55)). Those encode *which kind of node this
     is* — gateway steel, server green, endpoint orange — so folding them into an
     elevation scale would destroy meaning rather than converge it. Measured:
     25 distinct shadow declarations in chrome+admin, and these three were the
     only cross-file duplicates. There is no further latent scale here. */
  --shadow-lift-card:0 30px 60px rgba(0,0,0,0.35);
  --shadow-btn-primary:0 8px 24px rgba(245,130,32,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
  --shadow-btn-primary-hover:0 10px 28px rgba(245,130,32,0.4), inset 0 1px 0 rgba(255,255,255,0.3);

  /* ── Type scale ─────────────────────────────────────────────────────────
     The four dense steps (2xs–md) carry the great majority of the UI; --fs-md
     is the body default. Above that the steps get deliberately coarse — there
     is no 1px heading decision to make any more. */
  --fs-2xs:10px;            /* eyebrows, micro labels, table micro-copy */
  --fs-xs:11px;             /* dense UI labels */
  --fs-sm:12px;             /* secondary text, help text */
  --fs-md:13px;             /* body / UI default */
  --fs-lg:15px;             /* lead paragraphs, sub-heads */
  --fs-xl:18px;             /* section headings */
  --fs-2xl:22px;            /* page titles */
  --fs-3xl:26px;            /* hero headings */
  --fs-display:44px;        /* the one oversized numeral / glyph size */
}

html[data-theme="light"]{
  --ink:#f1f5f9;
  --ink-2:#ffffff;
  --fg:#0f172a;
  --fg-mute:#576478;
  --chip:#eef3f8;
  --chip-border:rgba(15,23,42,0.18);
  --surface-border:rgba(15,23,42,0.1);
  --hover-red-text:#ba0015; /* inverts by theme. #E2001A itself reaches 4.94:1 on white
                               but not on the red-tinted difficulty chip, so the light
                               variant is darkened to 4.84:1 there. Hue 353° held.
                               --hover-red (the ONE brand red for fills) is unchanged. */

  /* Hue and saturation are held exactly; only lightness drops, so these stay
     recognisably the Fraunhofer orange (28°) and green (166°). Worst measured
     ratio across canvas/card/chip is quoted per token. */
  --fhg-orange-text:#944706;  /* 4.72:1 on the orange-tinted state chip */
  --fhg-green-text:#106854;   /* 4.69:1 on the active badge's layered green tint */
  --fhg-focus:#ca6209;        /* 3.16:1 worst — focus rings need 3:1, not 4.5:1 */
  --fhg-silver-text:#4b6779;  /* 4.73:1 (silver itself is 1.70:1 here) */
  --fhg-steel-text:var(--fhg-steel);  /* 5.94:1 on light — no lift needed */
  --fhg-green-fill:#127a62;   /* white text on this fill is 5.27:1 (was 3.45:1) */
}

*,*::before,*::after{box-sizing:border-box}

/* Base type — pages own their own layout/background.
   Fira Sans is FIRST and ships as woff2 (see fonts.css), so every machine renders
   the same face. That is the point: an exercise runs on whatever hospital laptops
   are in the room, and half the room seeing a different typeface is worse than
   nobody seeing Frutiger. 'Frutiger' stays in the stack behind it — it records the
   brand lineage and still supplies any glyph Fira Sans lacks, since fallback is
   per-glyph, not per-font. Declared identically in templates/admin/base.html and
   templates/planspiel/network.html; keep the three in step. */
body{
  font-family:'Fira Sans','Frutiger','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Shared theme-toggle button */
.theme-btn{
  background:transparent;border:1px solid var(--chip-border);color:var(--fg-mute);
  border-radius:var(--radius-sm);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:var(--fs-lg);flex-shrink:0;
  transition:border-color 0.15s,background 0.15s;
}
.theme-btn:hover{background:rgba(166,187,200,0.12);border-color:var(--fhg-silver)}
/* Theme-toggle icons: inline SVG, switched declaratively so no JS textContent
   swap can drift. Replaces the ☾/☀ glyph pair — ☾ (U+263E) has no glyph in the
   deployed container's fonts and rendered as tofu. See templates/_theme_icons.html */
.theme-btn .ti-moon,.theme-btn .ti-sun{display:none}
.theme-btn .ti-moon{display:block}
html[data-theme="light"] .theme-btn .ti-moon{display:none}
html[data-theme="light"] .theme-btn .ti-sun{display:block}