/* los-chronos · Stand 102 */
/* =========================================================
   core/tokens.css — die einzige Stelle für Design-Werte.
   Jede Seite des Projekts lädt diese Datei zuerst.

   Die Werte stammen aus dem Design-Labor. Willst du sie
   dauerhaft ändern, dreh auf der Seite (Strg+Umschalt+D),
   lass dir das CSS ausgeben und ersetze den Block unten.
   ========================================================= */

:root{
  /* ---------- Schrift ---------- */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --base: 16px;
  --lh: 1.52;

  /* Überschrift: immer einzeilig, so groß wie die Breite zulässt, höchstens
     --h1-max. Die genaue Größe rechnet home.js aus (--h1-fit); --h1 ist nur
     die Schätzung für den Augenblick davor. */
  --h1-max: 46px;
  --h1: clamp(1rem, 3.3vw, 46px);
  --h-weight: 500;
  --h-lh: 0.99;
  --h-ls: -0.042em;

  --lead: 1.098rem;
  --title: 1.048rem;
  --small: 0.820rem;
  --tiny: 0.750rem;
  --t-ls: -0.0175em;

  /* ---------- Farbe ---------- */
  --paper: hsl(140 5% 92%);
  --paper-hi: hsl(140 5% 94%);
  --paper-lo: hsl(140 5% 87%);
  --ink: hsl(140 9% 12%);
  --muted: hsl(140 5% 40%);
  --accent: hsl(103 100% 42%);   /* Leuchtgrün #3DD600, seit Stand 74 */
  --accent-ink: hsl(103 60% 10%);

  --line-rgb: 18,26,22;
  --shadow-rgb: 10,24,16;

  --grid-b: hsl(140 20% 20% / .085);
  --grid-f: hsl(140 20% 20% / .05);
  --bloom: hsl(103 80% 60% / .26);

  /* ---------- Glas ---------- */
  /* Die feststehende Zone ist deckend, nicht durchscheinend. Bei 94 Prozent
     blieben 6 Prozent übrig — genug, um die Kacheltitel als Geisterbild
     mitzulesen. Und ein Browser, der den Glasfilter nicht rechnet, zeigt
     sie ungefiltert. Deckend ist die einzige Fassung, die überall hält. */
  --band-bg: hsl(140 5% 96%);
  --glass-bg: rgba(255,255,255,0.62);
  --g-blur: 26px;
  --g-sat: 1.90;
  --g-edge: 0.95;
  --g-border: 0.16;
  --g-shadow: 0.55;
  --g-grain: 0.18;

  /* ---------- Layout ---------- */
  --shell: 1320px;
  --pad: 40px;
  --gap: 12px;
  --radius: 13px;
  --tile-w: 232px;
  --tile-h: 154px;
  --tile-pad: 16px;
  --top-pad: 10px;     /* Abstand Kopfleiste → Überschrift (Stand 67: 10 px) */
  --zone-gap: 10px;    /* Rasterstreifen unter der festen Zone, Mindestabstand der Werkzeuge */
  --bar: 60px;

  /* Höhe des Überschriftenbandes. home.js misst sie nach dem Laden und
     schreibt sie als Stilangabe an das Wurzelelement — die schlägt diesen
     Wert. Er steht hier nur für den Augenblick davor, damit der Inhalt
     nicht erst unter dem Band liegt und dann nach unten springt.
     Gemessen: 64 px am Laptop, 35 px am Handy (Stand 67, einzeilig, 10 px Abstand). */
  --open-h: 64px;

  /* Höhe der Filterleiste, ebenfalls von home.js gemessen. Bis dorthin
     reicht das Zeichenblatt über den Werkzeugen. */
  --rail-h: 55px;

  /* Beschriftung auf einem Vorschaubild — in beiden Themen gleich.
     Die Tafel liegt auf dem Bild, nicht auf der Seite; sie folgt deshalb
     dem Bild und nicht dem Hell/Dunkel-Modus. */
  --plate-bg: rgba(255,255,255,.72);
  --plate-ink: hsl(140 9% 12%);
  --plate-muted: hsl(140 5% 28%);
  --plate-line: rgba(18,26,22,.14);

  /* Suchfeld in der Kopfleiste */
  --field-bg: rgba(255,255,255,.38);
  --field-bg-hover: rgba(255,255,255,.62);
  --hover-soft: rgba(255,255,255,.28);

  color-scheme: light dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 760px){
  :root{ --pad: 20px; --top-pad: 10px; --open-h: 35px; }
}

/* ---------- Dunkel: aus denselben Tönen abgeleitet ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: hsl(140 5% 6%);
    --paper-hi: hsl(140 5% 9%);
    --paper-lo: hsl(140 5% 4%);
    --ink: hsl(140 9% 92%);
    --muted: hsl(140 5% 62%);
    --accent: hsl(103 100% 42%);
    --accent-ink: hsl(103 60% 10%);

    --line-rgb: 255,255,255;
    --shadow-rgb: 0,0,0;

    --grid-b: rgba(255,255,255,.085);
    --grid-f: rgba(255,255,255,.045);
    --bloom: hsl(103 70% 45% / .20);

    --band-bg: hsl(140 5% 9%);
    --glass-bg: rgba(255,255,255,0.136);
    --g-shadow: 0.80;

    --field-bg: rgba(0,0,0,.34);
    --field-bg-hover: rgba(0,0,0,.22);
    --hover-soft: rgba(255,255,255,.07);
  }
}

:root[data-theme="dark"]{
  --paper: hsl(140 5% 6%);
  --paper-hi: hsl(140 5% 9%);
  --paper-lo: hsl(140 5% 4%);
  --ink: hsl(140 9% 92%);
  --muted: hsl(140 5% 62%);
  --accent: hsl(103 100% 42%);
  --accent-ink: hsl(103 60% 10%);

  --line-rgb: 255,255,255;
  --shadow-rgb: 0,0,0;

  --grid-b: rgba(255,255,255,.085);
  --grid-f: rgba(255,255,255,.045);
  --bloom: hsl(103 70% 45% / .20);

  --band-bg: hsl(140 5% 9%);
  --glass-bg: rgba(255,255,255,0.136);
  --g-shadow: 0.80;

  --field-bg: rgba(0,0,0,.34);
  --field-bg-hover: rgba(0,0,0,.22);
  --hover-soft: rgba(255,255,255,.07);
}