/* wtf. (wtfar.eu) Design-Tokens – einzige Quelle für Farben, Schrift, Abstände und Radien.
   Einbinden: <link rel="stylesheet" href="…/brand/tokens.css"> (Schriftpfade sind relativ zu dieser Datei).
   Dunkelmodus: folgt dem System; data-theme="light" | "dark" auf <html> überstimmt es.
   Gleiche Werte maschinenlesbar in tokens.json – bei Änderungen beide Dateien anpassen. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2-variations"), url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2-variations"), url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* Farben hell – Kontrast gegen --w-bg in Klammern */
  --w-bg: #fbfaf7;            /* Papier, Seitengrund */
  --w-surface: #ffffff;       /* Karten, Popover, Menüs */
  --w-field: #f3f1ec;         /* Eingabefelder, Code, ruhige Flächen */
  --w-text: #1c1b19;          /* Tinte (16,5:1) */
  --w-muted: #6b6860;         /* Nebentext (5,3:1) */
  --w-line: #dcd9d2;          /* Trennlinien, nur Dekoration */
  --w-line-strong: #8c887f;   /* Feld- und Button-Rahmen (3,4:1, UI-Grenze ≥ 3:1) */
  --w-brand: #e2462c;         /* Markenrot: Logo-Punkt, Flächen, Markierungen, große Schrift ab 24 px (3,9:1) */
  --w-accent: #c93a22;        /* Rot für Links, Fokus, Primärbutton-Fläche (4,9:1) */
  --w-accent-hover: #b0321d;  /* (6,1:1) */
  --w-on-accent: #ffffff;     /* Schrift auf --w-accent (5,1:1) */
  --w-ok: #1d7a3e;            /* gefunden, gespeichert (5,2:1) */
  --w-guess: #a65300;         /* geraten, unsicher, Warnung (5,2:1) */
  --w-error: #c93a22;         /* Fehler – immer mit Text, nie nur Farbe */
  --w-focus: #c93a22;

  /* Schrift */
  --w-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --w-weight-regular: 400;
  --w-weight-semibold: 600;
  --w-weight-heavy: 800;      /* wie das Logo – nur Überschriften */
  --w-size-xs: 11px;
  --w-size-sm: 12px;
  --w-size-base: 13px;        /* Popup */
  --w-size-md: 14px;          /* Taskpane, Webapp */
  --w-size-lg: 16px;
  --w-size-xl: 18px;          /* Homepage-Fließtext */
  --w-size-2xl: 22px;
  --w-size-3xl: 32px;
  --w-size-display: clamp(36px, 8vw, 56px);
  --w-size-section: clamp(32px, 5vw, 56px); /* Homepage-Abschnitte */
  --w-size-hero: clamp(44px, 9vw, 96px);    /* Homepage-Hero */
  --w-leading-tight: 1.1;
  --w-leading: 1.5;
  --w-tracking-tight: -0.03em; /* Überschriften in 800 */
  --w-tracking-caps: 0.05em;   /* Versal-Labels */

  /* Abstände – 4-px-Raster */
  --w-space-1: 4px;
  --w-space-2: 8px;
  --w-space-3: 12px;
  --w-space-4: 16px;
  --w-space-5: 24px;
  --w-space-6: 32px;
  --w-space-7: 48px;
  --w-space-8: 64px;

  /* Radien */
  --w-radius-sm: 4px;         /* Mini-Selects, Tags */
  --w-radius: 8px;            /* Buttons, Felder, Hinweise */
  --w-radius-lg: 12px;        /* Karten, Dialoge */
  --w-radius-pill: 999px;     /* Chips */
  --w-radius-tile: 22%;       /* App-Icon-Kachel (56/256 wie favicon.svg) */

  /* Sonstiges */
  --w-shadow: 0 1px 2px rgb(28 27 25 / 0.06), 0 4px 16px rgb(28 27 25 / 0.08);
  --w-focus-ring: 0 0 0 2px var(--w-bg), 0 0 0 4px var(--w-focus);
  --w-duration: 120ms;
  --w-duration-slow: 700ms;   /* Homepage: Einblenden, Mockup-Aufbau */
  --w-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --w-popup-width: 360px;     /* Chrome-Erweiterung */
  --w-taskpane-min: 320px;    /* Outlook-Add-in, schmalste Breite */
  --w-content-max: 640px;     /* Homepage-Textspalte */
  --w-page-max: 1200px;       /* Homepage, breite Raster */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --w-bg: #161513;
    --w-surface: #1e1c1a;
    --w-field: #24221f;
    --w-text: #f1efe9;          /* (15,9:1) */
    --w-muted: #a29e94;         /* (6,8:1) */
    --w-line: #34312d;
    --w-line-strong: #7a766e;   /* (4,0:1) */
    --w-brand: #ff6a4d;         /* (6,5:1) */
    --w-accent: #ff6a4d;
    --w-accent-hover: #ff8a72;
    --w-on-accent: #161513;     /* (6,5:1) – im Dunkeln dunkle Schrift auf Rot */
    --w-ok: #5fcf86;
    --w-guess: #ffb15c;
    --w-error: #ff6a4d;
    --w-focus: #ff6a4d;
    --w-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --w-bg: #161513;
  --w-surface: #1e1c1a;
  --w-field: #24221f;
  --w-text: #f1efe9;
  --w-muted: #a29e94;
  --w-line: #34312d;
  --w-line-strong: #7a766e;
  --w-brand: #ff6a4d;
  --w-accent: #ff6a4d;
  --w-accent-hover: #ff8a72;
  --w-on-accent: #161513;
  --w-ok: #5fcf86;
  --w-guess: #ffb15c;
  --w-error: #ff6a4d;
  --w-focus: #ff6a4d;
  --w-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}