/* =========================================================================
   DESIGN-SET  "monochrom"
   -------------------------------------------------------------------------
   Diese Datei ist die einzige Stelle, an der Farben, Schriften, Abstaende
   und Rundungen festgelegt werden. Wer das Aussehen der Seite aendern will,
   aendert nur hier. base.css benutzt ausschliesslich diese Variablen und
   enthaelt selbst keinen einzigen Farbwert.

   Ein neues Set anlegen:
     1. Diese Datei kopieren, z.B. als theme-warm.css
     2. Werte aendern
     3. In allen HTML-Dateien die eine Zeile
        <link rel="stylesheet" href="assets/theme.css">
        auf die neue Datei zeigen lassen
   ========================================================================= */

:root{
  /* --- Schrift. Serifenlos, systemeigen, laedt nichts nach. ------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.88rem;
  --fs-base: 1rem;
  --fs-md:   1.12rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.9rem;
  --fs-2xl:  clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);

  --lh-tight: 1.18;
  --lh-base:  1.62;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   650;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.09em;

  /* --- Farbe. Schwarz, Weiss, ein Akzent. ------------------------------ */
  --c-bg:         #ffffff;
  --c-bg-sunken:  #f5f5f4;
  --c-surface:    #ffffff;
  --c-text:       #121212;
  --c-text-dim:   #4a4a48;
  --c-text-muted: #78787a;
  --c-line:       #e2e2df;
  --c-line-firm:  #c9c9c5;

  /* Der eine Akzent. Eine Zeile aendern faerbt die gesamte Seite um. */
  --c-accent:      #1f49c4;
  --c-accent-deep: #16358f;
  --c-accent-soft: #eef1fb;
  --c-on-accent:   #ffffff;

  --c-focus: var(--c-accent);

  /* --- Mass und Raum --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --maxw:      1120px;
  --maxw-text: 68ch;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --border: 1px solid var(--c-line);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 8px 30px rgba(0,0,0,.07);

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  .18s;
}

/* --- Dunkelmodus. Nur Tokens, keine eigenen Regeln. --------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-bg:         #0e0e0f;
    --c-bg-sunken:  #161617;
    --c-surface:    #131314;
    --c-text:       #f2f2f0;
    --c-text-dim:   #c2c2be;
    --c-text-muted: #8d8d8a;
    --c-line:       #2a2a2c;
    --c-line-firm:  #3d3d40;

    --c-accent:      #7d9bff;
    --c-accent-deep: #a8bcff;
    --c-accent-soft: #171b2b;
    --c-on-accent:   #0e0e0f;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow:    0 8px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --c-bg:#0e0e0f; --c-bg-sunken:#161617; --c-surface:#131314;
  --c-text:#f2f2f0; --c-text-dim:#c2c2be; --c-text-muted:#8d8d8a;
  --c-line:#2a2a2c; --c-line-firm:#3d3d40;
  --c-accent:#7d9bff; --c-accent-deep:#a8bcff; --c-accent-soft:#171b2b;
  --c-on-accent:#0e0e0f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 8px 30px rgba(0,0,0,.5);
}