/* Taxio Design-Tokens
   Referenz: wisprflow.ai (Branding-Audit 2026-10-14, design/audit.md)
   Eigene Handschrift: Garamond-Ziffern für alle Beträge, Buchungsband als Signaturelement.
   Fonts lokal (OFL), nie per CDN. */

@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Basisfarben */
  --papier:        #FFFFEB;   /* Grund */
  --papier-tief:   #F6F5DC;   /* zweite Fläche, Zebra */
  --leinen:        #E6E4CF;   /* Karten, Pillen, Drop-Zone-Rand */
  --tinte:         #1A1A1A;   /* Text, Rahmen */
  --tinte-70:      rgba(26, 26, 26, .70);
  --tinte-55:      rgba(26, 26, 26, .64);
  --tinte-20:      rgba(26, 26, 26, .20);
  --tinte-10:      rgba(26, 26, 26, .10);
  --tanne:         #0B4A40;   /* dunkle Bänder, Erfolg */
  --tanne-hell:    #D3EEDC;   /* Erfolg-Fläche */
  --flieder:       #EBDDFF;   /* einziger CTA */
  --flieder-tief:  #DCC6FF;   /* CTA hover */
  --siegellack:    #9B2C2C;   /* Differenz, Fehler */
  --siegellack-hell:#F7DEDA;
  --bernstein:     #8A5200;   /* Warnung Text */
  --bernstein-hell:#FBE9C8;

  /* Semantik */
  --bg: var(--papier);
  --fg: var(--tinte);
  --fg-muted: var(--tinte-70);
  --fg-subtle: var(--tinte-55);
  --line: var(--tinte-20);
  --line-soft: var(--tinte-10);
  --surface: #FFFFF7;
  --surface-sunk: var(--papier-tief);
  --cta-bg: var(--flieder);
  --cta-bg-hover: var(--flieder-tief);
  --ok-fg: var(--tanne);   --ok-bg: var(--tanne-hell);
  --warn-fg: var(--bernstein); --warn-bg: var(--bernstein-hell);
  --err-fg: var(--siegellack); --err-bg: var(--siegellack-hell);
  --focus: #6B3FD1;

  /* Typo */
  --font-display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(3.25rem, 7.2vw, 6.5rem);   /* 104px bei 1440 */
  --fs-h1:   clamp(2.5rem, 4.6vw, 4rem);
  --fs-h2:   clamp(2rem, 3.2vw, 3rem);
  --fs-h3:   2rem;
  --fs-num-xl: clamp(2.25rem, 3.4vw, 3rem);    /* Garamond-Beträge groß */
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-tiny: .8125rem;

  --lh-display: .96;
  --lh-tight: 1.15;
  --lh-body: 1.45;
  --ls-display: -0.03em;

  /* Abstände (8er-Raster) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

  /* Radien nach Hierarchie: klein für Steuerelemente, groß für Flächen */
  --r-xs: 4px;     /* Badges in Tabellen */
  --r-sm: 8px;     /* Buttons, Felder */
  --r-md: 16px;    /* Karten */
  --r-lg: 32px;    /* Drop-Zone, Modal */
  --r-xl: 80px;    /* Bänder, Sektionskanten */
  --r-pill: 999px;

  --border: 1.5px solid var(--tinte);
  --border-soft: 1px solid var(--line);

  /* Bewegung: kurz, mit leichtem Nachschwingen nur bei Zustandswechsel */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .15s; --t-base: .25s; --t-slow: .45s;

  --maxw: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-base: 0s; --t-slow: 0s; }
}