/* Stadt Leipzig corporate design — design tokens. SINGLE SOURCE OF TRUTH.
 *
 * tokens-version: 1.0.0
 *
 * Every value here is either quoted from the Markenportal (source noted) or
 * a documented project decision (marked DECISION — see references/decisions.md).
 * Copy into a project as-is. Do NOT edit locally: changes go into the skill,
 * otherwise projects drift apart. Bump tokens-version on every change and
 * re-run scripts/build_tokens.py to regenerate the Tailwind artefacts.
 *
 * Units
 *   - type scale in rem (respects the reader's browser font size — BITV)
 *   - spacing, radii, borders in px
 *   - --doc-* in pt/mm and --slide-* in pt/cm: consumed by audit_docx.py and
 *     audit_pptx.py; inert in the browser. They live here so print and Office
 *     share the same single source as the web.
 *
 * Non-negotiables baked into these tokens (Farben p.14, Typografie p.6/12,
 * Barrierefrei p.2): text is black or white, never a brand colour; colour goes
 * on surfaces. No gradients, no tints other than the six Helle Töne, no
 * shadows on text, no italics, no ALL CAPS, no hyphenation, no dark theme.
 */

:root {
  /* ---- Brand palette (Farben p.4–8) ------------------------------------ */
  /* Primärfarben */
  --color-blau: #0E3AB6;            /* Leipzig Blau · CMYK 100/70/0/0 · Pantone 293 C · text on it: white */
  --color-gold: #FFE500;            /* Leipzig Gold · CMYK 0/0/100/0 · Yellow PY12 C · text on it: black */
  /* Sekundärfarben */
  --color-waldgruen: #006647;       /* Leipzig Waldgrün · 90/0/70/40 · 342 C · text: white */
  --color-kupfer: #F07E26;          /* Leipzig Kupfer (Orange) · 0/55/90/0 · 151 C · text: BLACK */
  --color-violett: #5C2A6B;         /* Leipzig Violett · 65/100/0/10 · 259 C · text: white */
  --color-porphyr: #A11838;         /* Leipzig Porphyr · 20/100/60/10 · 7426 C · text: white */
  /* Helle Töne — the only permitted tints, one per parent colour (Farben p.7–8); text on all: black */
  --color-blau-hell: #C3E7FF;
  --color-gold-hell: #FFF6A6;
  --color-waldgruen-hell: #C5ECE0;
  --color-kupfer-hell: #FED27A;
  --color-violett-hell: #DC95FF;
  --color-porphyr-hell: #FFBAC4;
  /* Unbunt */
  --color-schwarz: #000000;
  --color-weiss: #FFFFFF;
  /* Logo-Blau lives ONLY inside the logo artwork (Farben p.4, Logo p.7). It is
     listed so the checker can recognise it and reject it in project code. */
  --color-logo-blau: #0040F0;
  /* Light grey: not part of the palette. Permitted as a logo background
     ("hellgrau", Logo p.6) and used by the city's own deck for placeholders.
     DECISION: the one neutral for UI chrome (table stripes, dividers, disabled). */
  --color-grau-hell: #F2F2F2;

  /* ---- Semantic aliases (what code should actually reference) ---------- */
  --color-primary: var(--color-blau);
  --color-primary-hell: var(--color-blau-hell);
  --color-accent: var(--color-gold);           /* Gold: web = Bürgerservice only (Farben p.18) */
  --color-text: var(--color-schwarz);
  --color-text-inverse: var(--color-weiss);
  --color-bg: var(--color-weiss);
  --color-bg-subtle: var(--color-grau-hell);   /* DECISION */
  --color-border: var(--color-schwarz);        /* DECISION: no grey borders in the palette; 1px black */
  --color-divider: var(--color-grau-hell);     /* DECISION: soft separators */
  /* Status — DECISION, mapped onto the Sekundärfarben; text colour per palette rule */
  --color-success: var(--color-waldgruen);     /* text on it: white */
  --color-warning: var(--color-kupfer);        /* text on it: BLACK */
  --color-danger: var(--color-porphyr);        /* text on it: white */
  --color-info: var(--color-blau);             /* text on it: white */
  --color-success-hell: var(--color-waldgruen-hell);
  --color-warning-hell: var(--color-kupfer-hell);
  --color-danger-hell: var(--color-porphyr-hell);
  --color-info-hell: var(--color-blau-hell);

  /* ---- Interaction (DECISION — Farben p.8 says web "Zwischentöne" exist but publishes none) */
  --color-link: var(--color-blau);             /* underlined; the city's newsletter/portal convention. NEVER #0040F0 */
  --color-link-visited: var(--color-violett);  /* mirrors the Office theme's folHlink */
  --link-underline: 1px;
  --link-underline-hover: 3px;                 /* hover changes weight, never colour */
  --color-focus: var(--color-schwarz);
  --color-focus-halo: var(--color-weiss);      /* 2px black ring + 2px white halo = visible on every surface */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --shadow-focus-halo: 0 0 0 var(--focus-ring-offset) var(--color-focus-halo); /* the only permitted box-shadow */
  --opacity-disabled: 0.5;
  --target-min: 44px;                          /* DECISION: minimum pointer target (WCAG 2.5.5 AAA); 2.5.8 AA would be 24px */
  --color-on-primary: var(--color-text-inverse); /* text on --color-primary; flip to schwarz if primary is remapped to Gold/Kupfer */

  /* ---- Typography (Typografie p.2–11) ---------------------------------- */
  /* Leipzig Sans is the brand font. Arial is the only permitted substitute
     (Typografie p.11), Noto Sans only for non-Latin scripts. Web fonts:
     LeipzigSans-Regular.woff2/.woff ship in assets/fonts/web/ (converted
     from the OTF) — see assets/fonts/web/README.md. */
  --font-sans: 'Leipzig Sans', Arial, sans-serif;
  --font-sans-nonlatin: 'Noto Sans', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* DECISION: no brand mono exists */

  /* Weights the city owns and uses (print-indesign: Light/Regular/Medium/Bold; italics exist but are never used and Barrierefrei p.2 forbids them) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;   /* headings in the official deck and templates */
  --weight-bold: 700;     /* URLs in the Absender row, H2/H3 in print */

  /* Type scale — DECISION derived from Typografie p.6 (steps 1:1 / 1:2 / 1:3)
     and the official deck (16 pt body, 28 title, 48 H1). Body 1rem = 16px. */
  --text-h1: 3rem;        /* 48px — 3× body */
  --text-h2: 2rem;        /* 32px — 2× body */
  --text-h3: 1.5rem;      /* 24px */
  --text-h4: 1.125rem;    /* 18px */
  --text-body: 1rem;      /* 16px */
  --text-small: 0.875rem; /* 14px ≈ 10.5pt — floor for reading text (Barrierefrei p.2: ≥10pt) */
  --text-endorsement: 0.75rem; /* 12px — the only absolute web size the manual states (Endorsement p.12) */

  --leading-tight: 1.2;
  --leading-snug: 1.3;    /* endorsement line-height 130% (Endorsement p.12) */
  --leading-normal: 1.5;

  --tracking-normal: 0;
  --tracking-absender: 0.02em; /* Light Absender text, tracking +20 in the templates */

  /* ---- The layout unit x (Layout p.5–6, Logo p.12) ---------------------- */
  /* x = logo height / 3. Margins 2x top/bottom, 3x left/right — identical to
     the logo's Schutzzone, so the logo sits flush in the margin corner.
     Minimum gap between elements 2x; caption gap 1x. Digital logo min 30px. */
  --logo-height: 48px;                 /* DECISION default for desktop; 30px is the floor (Logo p.13) */
  --logo-height-min: 30px;
  /* The delivered SVG/PNG canvas already contains the Schutzzone: artwork
     height × 2.2 ≈ canvas height (layout-logo B.14). Size the <img> by canvas. */
  --logo-canvas-ratio: 2.2;
  --x: calc(var(--logo-height) / 3);   /* 16px at the default */
  --margin-block: calc(2 * var(--x));  /* top / bottom */
  --margin-inline: calc(3 * var(--x)); /* left / right */
  --gap-min: calc(2 * var(--x));
  --gap-caption: var(--x);

  /* ---- Spacing scale (px, for component internals) ---------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radii: the CD is rectilinear (L-Form, tiles); Störer is a circle --- */
  --radius-none: 0;
  --radius-full: 9999px;  /* Störer only */

  /* ---- Borders --------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---- Elevation: the brand does not use shadows (Layout p.21, Störer p.8) */
  --shadow-none: none;

  /* ---- L-Form (L-Form p.3–8) ------------------------------------------- */
  /* Touches exactly two edges. One leg ends flush with the edge, the other
     stops short. Asymmetric — never equal legs. Min 5% of the format area.
     One L-Form colour per layout. Values below are the component defaults. */
  --lform-color: var(--color-blau);
  --lform-thickness: calc(3 * var(--x));   /* the thin leg */
  --lform-step: calc(6 * var(--x));        /* the thick leg */
  --lform-min-area: 5%;

  /* ---- Störer (Störer p.4–5) ------------------------------------------- */
  --stoerer-size-min: 30%;     /* of the format's short side */
  --stoerer-size-max: 70%;
  --stoerer-safe-inset: 10%;   /* of the diameter, measured inward */
  --stoerer-rotation-max: 10deg;

  /* ---- Endorsement bar, web (Endorsement p.12–13) ----------------------- */
  /* The manual's 18px/12px labels are cap-top/baseline distances of the 12px
     text, not paddings (VERIFICATION B2): a 40px bar with the text vertically
     centred reproduces the figure. */
  --endorsement-text: var(--text-endorsement);
  --endorsement-leading: 1.3;
  --endorsement-logo-block: 60px;
  --endorsement-bar-height: 40px;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1200px;   /* DECISION */
  --measure: 72ch;           /* DECISION */

  /* ---- Motion — DECISION; nothing in the CD -------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Documents (Word / PDF) — pt and mm -------------------------------- */
  /* DECISION derived from the print type scale (body 10/15, H1 Medium 30,
     H2 Bold 13.5, H3 Bold 11.5, captions 8 — print-indesign) and the
     Barrierefrei floor of 10pt for reading text. */
  --doc-title-size: 30pt;    /* Medium */
  --doc-h1-size: 24pt;       /* Medium */
  --doc-h2-size: 14pt;       /* Bold */
  --doc-h3-size: 12pt;       /* Bold */
  --doc-body-size: 11pt;     /* Regular, 1.35 leading */
  --doc-caption-size: 9pt;   /* Light/Regular — captions, footers, URLs */
  --doc-min-size: 9pt;       /* captions may not go below; body ≥ 10pt is checked separately */
  --doc-body-min-size: 10pt; /* Barrierefrei p.2 */
  /* Letter: anchored on the city's Briefpapier / Urkunde (office-slides): logo box
     38.9×15.6mm at 10.4mm from top, 15.5mm from the right edge; left 35mm. */
  --doc-margin-top: 40mm;
  --doc-margin-bottom: 20mm;
  --doc-margin-left: 35mm;
  --doc-margin-right: 20mm;
  /* Report: interior brochure Satzspiegel (print-indesign, A4) */
  --doc-report-margin-top: 25mm;
  --doc-report-margin-bottom: 20mm;
  --doc-report-margin-left: 20mm;
  --doc-report-margin-right: 20mm;
  --doc-logo-height: 12mm;   /* 100% = delivered artwork = 12mm (VERIFICATION B4); min 5mm */
  --doc-logo-min: 5mm;
  --doc-header-distance: 10mm;  /* Briefpapier logo top edge 10.4mm (office-slides §3.2) */
  --doc-footer-distance: 10mm;  /* DECISION */
  --doc-list-indent: 6.35mm;    /* Urkunde numbering.xml hanging indent, 360 twips */

  /* ---- Print (InDesign-class) — from the ten city templates (print-indesign) */
  --print-bleed: 3mm;
  --print-x-a4: 4mm;            /* unit x on A4/A5/square/DIN lang; A6 3mm; A3 6; A2 10; A1 12; A0 16 */
  --print-body-size: 10pt;      /* Regular, 15pt leading */
  --print-body-leading: 15pt;
  --print-h1-size: 30pt;        /* Medium, 33.75 */
  --print-h2-size: 13.5pt;      /* Bold, 15 */
  --print-h3-size: 11.5pt;      /* Bold, 15 */
  --print-caption-size: 9pt;    /* DECISION: templates use 8pt; ≥9pt for generated material */
  --print-baseline-grid: 3.75pt;

  /* ---- Slides (PowerPoint) — from the official deck (office-slides) ------ */
  --slide-width: 33.867cm;   /* 16:9 */
  --slide-height: 19.05cm;
  --slide-margin-left: 2.43cm;
  --slide-margin-right: 1.74cm;
  --slide-margin: 1.74cm;    /* generic safe area used by audit_pptx.py */
  --slide-h1-size: 48pt;     /* Medium — title slide */
  --slide-title-size: 28pt;  /* Medium — H3 slide title */
  --slide-h4-size: 18pt;
  --slide-body-size: 16pt;   /* Regular, 125% */
  --slide-small-size: 14pt;
  --slide-caption-size: 12pt;/* Light */
  --slide-footer-size: 10pt; /* footer strip only */
  --slide-min-size: 12pt;    /* DECISION: anything below except the footer is a finding */
  --slide-logo-width: 3.23cm;
  --slide-logo-height: 1.30cm;
}

/* Only Regular ships as a web font, so let the browser synthesise bold —
   but never italics, which the CD does not allow (Barrierefrei p.2). */
html { font-synthesis: weight; }

/* Motion off when the reader asks for it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}