/* ══════════════════════════════════════════════════════════════════════════
   v3/base.css — Reset und Grundschicht
   Dashboard-v3 WP5, 27.07.2026

   Zwei Layer in einer Datei, weil sie zusammengehoeren und die Layer-Reihenfolge
   ohnehin von der @layer-Zeile in index-v3.html bestimmt wird, nicht von der
   Ladereihenfolge.

   `base` liegt VOR `legacy` — Legacy darf die Grundschicht ueberschreiben, so
   wie es das heute tut. Was Legacy NICHT ueberschreiben soll, gehoert nach
   `layout` (spaeterer Layer), nicht hierher.
   ══════════════════════════════════════════════════════════════════════════ */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  /* Nur Abstaende zuruecksetzen, die das Dashboard ohnehin selbst setzt.
     Kein aggressiver Reset: 30 Legacy-Sheets rechnen mit Browser-Defaults. */
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

  :where(img, svg, video, canvas) { max-width: 100%; }

  /* Fokus nur bei Tastaturnutzung, und sichtbar. Der Ring nutzt den
     Akzent-Wash, ist also in allen drei Themes korrekt - in narr automatisch
     Zinnober. */
  :focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) { outline: none; }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background: var(--surface-canvas);
    color: var(--text-1);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Zahlen richten sich in Tabellen aus. Das legitimiert Mono dort, statt es
     zu kaschieren - und ist Teil der Mono-Reduktion: Mono bleibt fuer Daten,
     verschwindet aus Prosa. */
  code, kbd, samp, pre, .mono, [class*="-mono"] {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
  }

  /* Selection theme-korrekt statt hart kodiert. Stand vorher als
     rgba(217,119,87,.25) in index.html:129 und musste in narr per Extra-Regel
     nachkorrigiert werden. */
  ::selection { background: var(--accent-wash-2); }

  /* Scrollbars: schmal und leise, in allen Themes aus Tokens.
     polish.css:88-90 faerbt sie unter @media (prefers-color-scheme: dark)
     coral - das greift am Betriebssystem statt am Theme und ist ein Bug.
     Layer `base` kann das nicht schlagen (legacy ist spaeter); die Korrektur
     sitzt deshalb in v3/components.css. */
  * { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--line-3);
    border-radius: var(--r-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

  /* Papier-Grain — bleibt, aber runtergedreht.
     Von 0.02/0.03 auf --grain-opacity (0.012 light / 0.014 dark+narr):
     spuerbar als Waerme, nicht als Textur.
     z-index 60 statt 9999: ueber dem Inhalt, UNTER Rail, Modals und Toast.
     Vorher sass es ueber dem Toast (9700) - bei 2% nie aufgefallen.
     translateZ(0) haelt das fixe Vollbild-Pseudoelement auf mobilen GPUs
     beim Scrollen aus dem Neu-Rastern. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-grain);
    opacity: var(--grain-opacity);
    transform: translateZ(0);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Serif ausschliesslich fuer grosse Headlines. Der einzige Ort, an dem
     --font-hero konsumiert wird - kein Legacy-Sheet kennt den Token. */
  .v3-hero-title, .v3-greeting {
    font-family: var(--font-hero);
    font-weight: var(--fw-normal);
    font-variation-settings: "opsz" 144, "SOFT" 20;
    letter-spacing: var(--tr-3xl);
    line-height: var(--lh-3xl);
  }
}