/* Schriften – lokal unter /assets/fonts/, kein CDN.
   Fraunces als Variable Font mit den Achsen opsz und wght, wie zuvor über
   Google Fonts geladen. Karla in den drei tatsächlich genutzten Schnitten.
   Lizenzen: site/assets/fonts/LICENSE-*.txt (beide SIL Open Font License). */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/fraunces-opsz.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/fraunces-opsz-italic.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/karla-400.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/karla-500.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/karla-600.woff2") format("woff2");
}

/* tokens.css – Design-Tokens für Ronald Schaller.
   Es gibt keine bestehende CI.
   Die Palette kommt aus dem Material, mit dem in der Werkstatt gearbeitet
   wird: Nussbaum, Eiche, Schellack, Messing, Leinen. */

:root {
  /* Farben */
  --color-bg:            oklch(0.968 0.010 82);   /* helles Leinen */
  --color-bg-tint:       oklch(0.940 0.014 80);   /* abgesetzte Fläche */
  --color-surface:       oklch(0.990 0.006 85);   /* Karten, Formularfelder */
  --color-text:          oklch(0.265 0.030 58);   /* dunkles Nussbaum */
  --color-text-soft:     oklch(0.470 0.028 62);
  --color-text-faint:    oklch(0.505 0.024 63);
  --color-line:          oklch(0.865 0.016 78);
  --color-line-strong:   oklch(0.780 0.020 72);

  /* Dunkle Kontrastflächen (Haltung, Erwartungsrahmen) */
  --color-dark:          oklch(0.235 0.026 54);   /* geräucherte Eiche */
  --color-dark-tint:     oklch(0.300 0.028 56);
  --color-on-dark:       oklch(0.945 0.014 84);
  --color-on-dark-soft:  oklch(0.790 0.020 74);
  --color-line-dark:     oklch(0.365 0.026 58);

  /* Akzent: gedämpftes Messing. Sehr sparsam, nur Fokus und Hervorhebung. */
  --color-accent:        oklch(0.605 0.098 72);
  /* Messing als Textfarbe auf hellem Grund: dunkler, damit AA erfüllt ist */
  --color-accent-ink:    oklch(0.470 0.088 65);
  --color-accent-soft:   oklch(0.700 0.075 74);
  --color-accent-weak:   oklch(0.930 0.035 84);

  /* Typografie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Schriftgrößen, fluid */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.42vw, 1.44rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1.00vw, 2.15rem);
  --step-3:  clamp(1.95rem, 1.55rem + 2.00vw, 3.20rem);
  --step-4:  clamp(2.45rem, 1.70rem + 3.60vw, 5.00rem);

  /* Abstände */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 3.5rem;
  --space-xl: clamp(4rem, 8vw, 8rem);
  --space-2xl: clamp(6rem, 12vw, 11rem);

  /* Sonstiges */
  --radius: 2px;      /* fast kantig, passend zum Werkstatt-Charakter */
  --radius-img: 3px;
  --maxw: 1560px;
  --maxw-narrow: 1000px;
  --maxw-text: 62ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}