/* Hallmark · tokens — MTO Zeiterfassung (markengebundenes Theme)
 * paper-band: light (98.6 %) · display-style: grotesk-sans (Space Grotesk)
 * accent-hue: Messing (warm, ~70°) + Nachtblau als zweiter Pol
 * (bis 2026-08-19 stand hier Koralle ~15° + Indigo ~285° — abgeloest)
 *
 * Die Marke ist gesetzt (MTO: Nachtblau #131A2B + Messing #A87330, siehe Gehirn:
 * 30_Wissen/Markenfarben.md). --primary/--secondary koennen zur Laufzeit von
 * brand.js pro Kundenfirma ueberschrieben werden — deshalb hier ueberall
 * var(--primary, <fallback>) statt fixer Werte.
 */
:root {
  /* ---- Flaechen ---- */
  --c-paper:      oklch(98.6% 0.004 285);
  --c-paper-2:    oklch(96.6% 0.006 285);
  --c-paper-3:    oklch(94.2% 0.008 285);
  --c-card:       oklch(100% 0 0);
  --c-deep:       oklch(20.5% 0.022 285);   /* dunkle Abschlussflaeche */
  --c-deep-2:     oklch(26% 0.024 285);

  /* ---- Schrift ---- */
  --c-ink:        oklch(23% 0.018 285);
  --c-ink-2:      oklch(46% 0.014 285);
  /* ink-3 ist die hellste Textfarbe — 53 % ist die Grenze, ab der Fliesstext
     auf --c-paper/--c-card noch 4.5:1 erreicht (WCAG AA). Nicht aufhellen. */
  --c-ink-3:      oklch(53% 0.013 285);
  --c-on-deep:    oklch(97% 0.004 285);
  --c-on-deep-2:  oklch(78% 0.008 285);

  /* ---- Linien ---- */
  --c-line:       oklch(91.5% 0.006 285);
  --c-line-2:     oklch(86% 0.008 285);
  --c-line-deep:  oklch(32% 0.02 285);

  /* ---- Marke: FEST, bewusst nicht überschreibbar ----
     Diese Tokens gelten nur für die öffentlichen Seiten (Landingpage +
     Rechtstexte). Das sind Verkaufsseiten – die müssen nach MTO Zeiterfassung aussehen,
     nicht nach der Firma, die zufällig auf der Instanz läuft.
     Früher stand hier var(--primary, …): brand.js hat den Wert aus
     /api/branding gesetzt, und sobald ein Kunde seine Farbe wählte, färbte
     sich die Verkaufsseite mit. Deshalb lädt keine öffentliche Seite mehr
     brand.js. Das Firmen-Branding wirkt weiterhin in App, Admin und
     Stempelseite – dort gehört es hin. */
  --c-accent:     #8F6128;   /* MESSING – Bedienfarbe */
  --c-accent-d:   #734E20;   /* dunkler, für Hover */
  /* MESSING als KLEINER Text. Hier stand bis 2026-08-19 die Koralle #C22945 —
     der letzte Rest der abgelösten Farbwelt, und er war an vier Stellen in
     site.css in Gebrauch: korallenroter Text auf der Messing-Tönung, also
     zwei Farbtöne, die nichts miteinander zu tun haben.
     Gemessen auf --c-accent-t: Koralle 4,90:1 · #734E20 6,38:1 — der Wechsel
     verbessert den Kontrast und bringt die Marke auf einen Ton.
     Der Wert ist bewusst derselbe wie --c-accent-d: gleiche Farbe, andere
     Aufgabe (dort Hover, hier kleiner Text). */
  --c-accent-ink: #734E20;
  --c-accent-t:   #F6EDE0;   /* helle Tönung */
  --c-accent-2:   #131A2B;   /* NACHTBLAU – zweiter Marken-Pol */
  /* Der Marken-Gradient ist ein Highlight-Werkzeug: Punkt, Akzentlinie,
     Fortschrittsbalken. Nicht auf Flaechen, nie auf Schrift. */
  --c-brandline:  linear-gradient(90deg, var(--c-accent), var(--c-accent-2));

  /* ---- Signal ---- */
  --c-ok:         oklch(56% 0.13 152);       /* Flaechen, Punkte, Icons */
  --c-ok-ink:     oklch(45% 0.115 152);      /* Gruen als Text — dunkler, damit 4.5:1 haelt */
  --c-ok-t:       oklch(94% 0.04 152);
  --c-focus:      var(--secondary, #131A2B);

  /* ---- Radien ---- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Raster (4 pt) ---- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 72px;

  /* ---- Typo-Skala ---- */
  --text-display: clamp(2.5rem, 6.2vw, 4.4rem);
  --text-h2:      clamp(1.75rem, 3.4vw, 2.5rem);
  --text-h3:      clamp(1.1rem, 1.6vw, 1.25rem);
  --text-lead:    clamp(1.05rem, 1.35vw, 1.18rem);
  --text-body:    1rem;
  --text-sm:      .92rem;
  --text-xs:      .82rem;

  /* ---- Linienstaerke ---- */
  --rule-hair: 1px;

  /* ---- Tiefe ---- */
  --shadow-s: 0 1px 2px oklch(23% 0.018 285 / .05), 0 4px 12px oklch(23% 0.018 285 / .04);
  --shadow-m: 0 1px 2px oklch(23% 0.018 285 / .05), 0 14px 34px oklch(23% 0.018 285 / .08);
  --shadow-l: 0 2px 4px oklch(23% 0.018 285 / .06), 0 26px 60px oklch(23% 0.018 285 / .11);

  /* ---- Bewegung ---- */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in:     cubic-bezier(.55, .06, .68, .19);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-xs:  110ms;
  --dur-sm:  170ms;
  --dur-md:  260ms;
  /* Fuer das Einblenden beim Scrollen (site.css). Bewusst laenger als --dur-md:
     eine Flaeche, die einsteigt, darf gemaechlicher sein als ein Knopf, der
     antwortet. Der Design-Standard nennt 420 ms als lange Stufe. */
  --dur-lg:  420ms;

  /* ---- Ebenen ---- */
  --z-base: 1;
  --z-raised: 5;
  --z-nav: 20;
  --z-modal: 40;
}