/* Wirth Websites – Design-Tokens (EINE Quelle für Website, Scan-Seite und Brief).
   Quelle: wirthwebsites/design/tokens.css. Kopien in site/css/, scan/assets/css/, brief/css/
   erzeugt design/sync.py – dort NICHT von Hand ändern. Doku: site/DESIGN.md */

@font-face { font-family: "General Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/general-sans-400.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/general-sans-500.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/general-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("../fonts/newsreader-display.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: italic; font-display: swap; src: url("../fonts/newsreader-italic.woff2") format("woff2"); }

:root {
  /* Schrift */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Nacht (Grund) – von tief nach hell */
  --night: #080a14;
  --night-2: #0c0e17;
  --night-3: #12141d;
  --night-4: #1a1d29;

  /* Creme (Text + einziger Akzent auf Nacht) */
  --creme: #f3efe6;
  --on-night: #ece6da;                    /* Fließtext auf Nacht, 15.9:1 */
  --on-night-2: rgba(236, 230, 218, .74); /* Nebentext auf Nacht, ≥ 8.5:1 */
  --on-night-3: rgba(236, 230, 218, .58); /* Kleingedrucktes, ≥ 5.5:1 */
  --line-night: rgba(236, 230, 218, .16);
  --edge-night: rgba(236, 230, 218, .32);

  /* Papier (helle Räume, Brief) */
  --paper: #f5f2ec;
  --card: #fbfaf7;
  --ink: #0e1726;                         /* Text auf Papier, 16:1 */
  --ink-2: #535e6d;                       /* Nebentext auf Papier, 6.2:1 */
  --line: rgba(14, 23, 38, .13);
  --edge: rgba(14, 23, 38, .42);

  /* Markierung für offene Punkte (nur Vorschau, nie live) */
  --todo-bg: #fff1b8;
  --todo-ink: #6b4a00;

  /* Typo-Skala (fluid) */
  --fs-xs: .875rem;
  --fs-sm: .9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-h3: clamp(1.3125rem, 1.15rem + .7vw, 1.625rem);
  --fs-h2: clamp(2.125rem, 1.55rem + 2.6vw, 3.75rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.9vw, 5rem);

  /* Raum */
  --gut: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  --sec: clamp(4.5rem, 3rem + 7vw, 9rem);
  --max: 72rem;
  --measure: 38rem;

  /* Form */
  --r: .375rem;
  --r-lg: 1.25rem;
  --pill: 999px;
  --arch: 999px 999px 0 0;

  /* Bewegung – nur transform/opacity */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --t-fast: .16s;
  --t-reveal: .8s;

  --shadow-float: 0 1px 2px rgba(8, 10, 20, .08), 0 12px 32px -10px rgba(8, 10, 20, .28);
  --shadow-deep: 0 2px 4px rgba(0, 0, 0, .2), 0 24px 48px -16px rgba(0, 0, 0, .55);
}

/* ── Primitive, die alle drei Medien teilen ───────────────────────────── */

/* Wortmarke: »Wirth« aufrecht, »Websites« kursiv – beides Newsreader */
.wm { font: 400 1.25rem/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; color: inherit; }
.wm i { font-style: italic; font-weight: 400; }

/* Abschnittsmarke: kursive Serife mit Haarlinie davor (keine Versal-Labels) */
.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font: italic 400 1.1875rem/1.25 var(--serif); }
.eyebrow::before { content: ""; flex: none; width: 2rem; height: 1px; background: currentColor; }

/* Rundbild mit Ring im Grundton; .ini = Initialen-Kreis, wenn es kein Foto gibt */
.av { display: block; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 28%; background: var(--night-4); box-shadow: 0 0 0 3px var(--ring, var(--night)), 0 0 0 4px rgba(243, 239, 230, .22); }
.ini { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--night-4); color: var(--creme); font: 400 1.125rem/1 var(--serif); letter-spacing: .04em; box-shadow: 0 0 0 3px var(--ring, var(--night)), 0 0 0 4px rgba(243, 239, 230, .22); }

.todo { background: var(--todo-bg); color: var(--todo-ink); font: 600 max(.75rem, .75em)/1.2 var(--sans); letter-spacing: .02em; padding: .1em .4em; border-radius: .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.todo.ph { font-size: max(.8125rem, 1em); }   /* Platzhalter für einen echten Wert (z. B. WhatsApp-Nummer): so groß wie der Text drumherum */

@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); }

/* Studio 2026 — opt-in for the main website. Existing scan/brief themes retain
   their current tokens until the explicitly planned migration. */
:root {
  --ww-bg: #f7f8f4;
  --ww-surface: #ffffff;
  --ww-soft: #edf2eb;
  --ww-mint: #e0efdf;
  --ww-ink: #17221b;
  --ww-muted: #536258;
  --ww-green: #246746;
  --ww-green-hover: #194d33;
  --ww-green-pale: #d8eddd;
  --ww-border: #d0d9d0;
  --ww-s1: .25rem; --ww-s2: .5rem; --ww-s3: .75rem;
  --ww-s4: 1rem; --ww-s5: 1.25rem; --ww-s6: 1.5rem;
  --ww-s8: 2rem; --ww-s10: 2.5rem; --ww-s12: 3rem;
  --ww-s16: 4rem; --ww-s20: 5rem;
  --ww-gutter: clamp(1.25rem, 3.75vw, 3rem);
  --ww-section: clamp(4.5rem, 7.5vw, 6.5rem);
  --ww-max: 86rem;
  --ww-hit: 2.75rem; --ww-control: 3.25rem;
  --ww-radius: 1.125rem; --ww-radius-sm: .65rem;
  --ww-h1: clamp(2.5rem, 4.8vw, 5rem);
  --ww-h2: clamp(2rem, 3.6vw, 3.25rem);
  --ww-h3: clamp(1.4rem, 1.7vw, 1.75rem);
  --ww-body: 1.0625rem; --ww-small: .9375rem;
  --ww-shadow: 0 1px 1px #17221b05, 0 18px 50px -26px #17221b35;
  --ww-device-shadow: 0 26px 65px -24px #17221b55;
  --ww-header-bg: #fffffff0;
  --ww-focus: #246746;
  --ww-duration: .65s;
  --ww-ambient-color: 40, 116, 82;
  --ww-ui: 1rem;
  --ww-sans: "Space Grotesk", system-ui, sans-serif;
  --ww-serif: "Newsreader", Georgia, serif;
  --ww-price: clamp(3rem, 4vw, 4.5rem);
  --ww-h1-em: 1.08em;
  --ww-h1-em-compact: 1em;
  --ww-monitor-screen-gradient: linear-gradient(135deg, #e7e9e5, #b2b9b1);
  --ww-monitor-stem-gradient: linear-gradient(90deg, #879187, #e0e5df, #8d988e);
  --ww-monitor-base-gradient: linear-gradient(#dbe1d9, #8b998d);
  --ww-phone-border: #5a655c;
}
.ww-main {
  --sans: var(--ww-sans);
  --night: var(--ww-bg); --night-2: var(--ww-surface); --night-3: var(--ww-soft); --night-4: var(--ww-mint);
  --on-night: var(--ww-ink); --on-night-2: var(--ww-muted); --on-night-3: var(--ww-muted);
  --creme: var(--ww-green); --line-night: var(--ww-border); --edge-night: var(--ww-green);
  --paper: var(--ww-soft); --card: var(--ww-surface); --ink: var(--ww-ink); --ink-2: var(--ww-muted);
  --fs-h1: var(--ww-h1); --fs-h2: var(--ww-h2); --shadow-deep: var(--ww-device-shadow);
}
@media (max-width: 47.99rem) {
  :root { --ww-small: 1rem; --ww-h1: clamp(2.375rem, 11.5vw, 3.35rem); }
}

/* Mia: WhatsApp-like chat material. Own implementation, no Meta logos or assets. */
:root {
  --ww-wa-frame: #18201c;
  --ww-wa-frame-edge: #3b4741;
  --ww-wa-frame-radius: 3rem;
  --ww-wa-frame-padding: .55rem;
  --ww-wa-screen-radius: 2.5rem;
  --ww-wa-height: 47rem;
  --ww-wa-max-height: 90svh;
  --ww-wa-min-height: 36rem;
  --ww-wa-mobile-height: 40rem;
  --ww-wa-mobile-max-height: 85svh;
  --ww-wa-mobile-radius: 1.25rem;
  --ww-wa-shadow: 0 2.5rem 5rem #14201a33, 0 .6rem 1.5rem #14201a1f;
  --ww-wa-island: 6.5rem;
  --ww-wa-status-height: 2.6rem;
  --ww-wa-wallpaper: #efeae2;
  --ww-wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23dad1c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 34 30 24l12 10v12H18ZM26 46v-7h8v7'/%3E%3Crect x='96' y='14' width='26' height='10' rx='3'/%3E%3Cpath d='M122 19h6v10h-19v8'/%3E%3Crect x='106' y='37' width='6' height='14' rx='2'/%3E%3Cpath d='m70 66 3.5 7 7.7 1.1-5.6 5.4 1.3 7.7L70 83.6l-6.9 3.6 1.3-7.7-5.6-5.4 7.7-1.1Z'/%3E%3Cpath d='M128 94c-4-6-14-3-12 4 1 5 12 12 12 12s11-7 12-12c2-7-8-10-12-4Z'/%3E%3Cpath d='M16 108h26a5 5 0 0 1 5 5v12a5 5 0 0 1-5 5H28l-8 6v-6h-4a5 5 0 0 1-5-5v-12a5 5 0 0 1 5-5Z'/%3E%3Cpath d='M78 124c14-2 22 8 22 20-12 1-22-6-22-20Zm0 0 20 18'/%3E%3Ccircle cx='62' cy='22' r='4'/%3E%3Ccircle cx='148' cy='58' r='3'/%3E%3Cpath d='M38 72h10m-5-5v10M140 136h8m-4-4v8'/%3E%3C/svg%3E");
  --ww-wa-doodle-size: 10rem;
  --ww-wa-bar: #f6f6f3;
  --ww-wa-bar-edge: #dfe3e0;
  --ww-wa-ink: #111b21;
  --ww-wa-muted: #5f6f78;
  --ww-wa-in: #ffffff;
  --ww-wa-out: #d9fdd3;
  --ww-wa-accent: #008069;
  --ww-wa-accent-hover: #006e5a;
  --ww-wa-on-accent: #ffffff;
  --ww-wa-overlay: #0b141ab3;
  --ww-wa-scrollbar: #0b141a33;
  --ww-wa-link: #027eb5;
  --ww-wa-read: #34a8dd;
  --ww-wa-notice: #ffeecd;
  --ww-wa-notice-ink: #54656f;
  --ww-wa-change: #fff1a8;
  --ww-wa-card: #f2f4f1;
  --ww-wa-card-edge: #dfe5df;
  --ww-wa-type: 1rem;
  --ww-wa-small: .8125rem;
  --ww-wa-chip-type: .875rem;
  --ww-wa-line: 1.4;
  --ww-wa-target: 2.75rem;
  --ww-wa-avatar: 2.5rem;
  --ww-wa-avatar-type: 1.65rem;
  --ww-wa-profile-avatar: 4.5rem;
  --ww-wa-profile-avatar-type: 2.9rem;
  --ww-wa-icon: 1.35rem;
  --ww-wa-icon-small: 1.05rem;
  --ww-wa-header-padding: .4rem .5rem .4rem .35rem;
  --ww-wa-header-gap: .5rem;
  --ww-wa-log-padding: .75rem .9rem 1rem;
  --ww-wa-bubble-max: 86%;
  --ww-wa-bubble-radius: .6rem;
  --ww-wa-bubble-padding: .35rem .5rem .4rem .6rem;
  --ww-wa-bubble-shadow: 0 1px .5px #0b141a21;
  --ww-wa-tail: .55rem;
  --ww-wa-gap: .15rem;
  --ww-wa-group-gap: .7rem;
  --ww-wa-meta-space-in: 3.1rem;
  --ww-wa-meta-space-out: 4.5rem;
  --ww-wa-tick: 1.05rem;
  --ww-wa-button-gap: .15rem;
  --ww-wa-chip-padding: .3rem .75rem;
  --ww-wa-notice-padding: .5rem .8rem;
  --ww-wa-card-radius: .45rem;
  --ww-wa-preview-image: 9.5rem;
  --ww-wa-typing-dot: .45rem;
  --ww-wa-footer-padding: .45rem .5rem .6rem;
  --ww-wa-input-height: 2.75rem;
  --ww-wa-duration: .22s;
  --ww-wa-arrive: .5rem;
}

/* Portfolio: large, user-controlled design studies. */
:root {
  --ww-study-gap: clamp(2rem, 4vw, 3.5rem);
  --ww-study-window-height: 34rem;
  --ww-study-window-secondary: 29rem;
  --ww-study-window-mobile: 32rem;
  --ww-study-title: clamp(1.375rem, 1.8vw, 1.75rem);
  --ww-study-radius: 1rem;
  --ww-study-dot: #a4afa7;
  --ww-study-backdrop: #17221bcc;
  --ww-study-dialog-width: 70rem;
  --ww-study-dialog-height: 92svh;
  --ww-study-measure: 52ch;
}