/* Kopie von client/src/styles/tokens.css. Änderungen dort vornehmen und hierher übernehmen. */
/*
 * Bad Tratsching: Gestaltungs-Tokens (Schrift, Farbe, Abstand, Bewegung)
 * Verbindliche Beschreibung: docs/STYLE-TYPO-UI.md
 *
 * Schriften (alle SIL Open Font License 1.1, Lizenzen in /fonts/OFL-*.txt):
 *   Brygada 1918  Überschriften, Titel, Ortsnamen
 *   Literata      Fließtext, Dialoge, Beschreibungen
 *   Fira Sans     Oberfläche: Uhr, Inventar, Werte, Menüs, Schaltflächen
 * Zeichensatz der woff2-Dateien: Latin-1, Latin Extended-A, ẞ, typografische
 * Anführungszeichen, Striche, €, §, Pfeile.
 */

@font-face {
  font-family: "Brygada 1918";
  src: url("/fonts/brygada-roman-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("/fonts/brygada-italic-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-roman-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-italic-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans-400-v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans-400-italic-v1.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans-500-v1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans-600-v1.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Schriftfamilien */
  --bt-font-display: "Brygada 1918", "Literata", Georgia, serif;
  --bt-font-text: "Literata", Georgia, "Times New Roman", serif;
  --bt-font-ui: "Fira Sans", "Segoe UI", Roboto, system-ui, sans-serif;

  /* ---- Schriftgrößen, fließend zwischen 360 px und 1440 px Fensterbreite */
  --bt-size-xs: 0.8125rem;                                    /* 13 px, kleinste erlaubte Größe */
  --bt-size-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem); /* 14 bis 15 px */
  --bt-size-md: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);      /* 16 bis 18 px, Fließtext und Dialog */
  --bt-size-lg: clamp(1.1875rem, 1.11rem + 0.28vw, 1.375rem); /* 19 bis 22 px */
  --bt-size-xl: clamp(1.375rem, 1.25rem + 0.56vw, 1.75rem);   /* 22 bis 28 px */
  --bt-size-2xl: clamp(1.625rem, 1.375rem + 1.11vw, 2.375rem); /* 26 bis 38 px */
  --bt-size-3xl: clamp(2rem, 1.5rem + 2.22vw, 3.5rem);       /* 32 bis 56 px */
  --bt-size-clock: clamp(1.25rem, 1.125rem + 0.56vw, 1.625rem);/* 20 bis 26 px, Uhr */

  /* ---- Zeilenhöhen */
  --bt-leading-tight: 1.08;   /* große Überschriften */
  --bt-leading-snug: 1.25;    /* Zwischenüberschriften, Namen */
  --bt-leading-ui: 1.3;       /* Oberfläche */
  --bt-leading-dialog: 1.5;   /* Dialogzeilen */
  --bt-leading-text: 1.6;     /* Fließtext */

  /* ---- Laufweiten */
  --bt-track-display: 0.005em;
  --bt-track-caps: 0.09em;    /* Versalien und Kapitälchen in der Oberfläche */
  --bt-track-label: 0.04em;
  --bt-measure: 38em;         /* längste Zeile im Fließtext */
  --bt-measure-dialog: 46em;

  /* ---- Farben, gemessen in Key-Art und Szenen */
  --bt-night: #151a2b;        /* Abendschatten der Key-Art, Grundfläche dunkel */
  --bt-night-2: #1e2540;      /* Abendhimmel tief */
  --bt-night-3: #2a3354;
  --bt-dusk: #365588;         /* Himmel über dem Ort, nur Fläche und Linie */
  --bt-snow: #f3eee6;         /* Text auf dunkel */
  --bt-snow-muted: #c9c1b3;   /* Nebentext auf dunkel */
  --bt-paper: #f1e7d4;        /* Papier, Aushang, Menügrund hell */
  --bt-paper-2: #e6d8bf;
  --bt-ink: #2a1f1a;          /* Text auf hell, dunkles Holz */
  --bt-ink-muted: #65503f;    /* Nebentext auf hell */
  --bt-amber: #f3ae61;        /* Fensterlicht: Sprechername, Fokus, aktiver Zustand */
  --bt-glow: #e0907d;         /* Alpenglühen: zweiter Akzent auf dunkel */
  --bt-glow-ink: #9a4a3a;     /* Alpenglühen dunkel, Akzent auf hell */
  --bt-loden: #3d5a45;        /* Kachelofen, Akzent auf hell */
  --bt-wood: #7a4430;         /* Gaststube, Linien und Akzent auf hell */
  --bt-teal: #2f6b6a;         /* Hallenbad und Salon, Akzent auf hell */
  --bt-pool: #8fc3d0;         /* Hallenbad, Akzent auf dunkel */

  /* ---- Bedeutungen */
  --bt-bg: var(--bt-night);
  --bt-text: var(--bt-snow);
  --bt-text-muted: var(--bt-snow-muted);
  --bt-accent: var(--bt-amber);
  --bt-focus: var(--bt-amber);
  --bt-line-dark: rgba(243, 238, 230, 0.18);  /* Trennlinie auf dunkel */
  --bt-line-light: rgba(42, 31, 26, 0.2);     /* Trennlinie auf hell */
  --bt-dialog-bg: #17131a;
  --bt-dialog-fade: linear-gradient(0deg,
      rgba(23, 19, 26, 0.92) 0%, rgba(23, 19, 26, 0.88) 64%, rgba(23, 19, 26, 0) 100%);
  --bt-bar-bg: rgba(21, 26, 43, 0.82);        /* ruhige Leisten: Inventar, Kopfzeile */
  --bt-hotspot: rgba(243, 174, 97, 0.22);

  /* ---- Abstände (Raster 4 px) */
  --bt-space-1: 0.25rem;
  --bt-space-2: 0.5rem;
  --bt-space-3: 0.75rem;
  --bt-space-4: 1rem;
  --bt-space-5: 1.5rem;
  --bt-space-6: 2rem;
  --bt-space-7: 3rem;
  --bt-space-8: 4rem;
  --bt-gutter: clamp(1rem, 0.7rem + 1.3vw, 2rem);  /* Seitenrand, mindestens 16 px */

  /* ---- Radien, sparsam */
  --bt-radius-s: 3px;
  --bt-radius-m: 6px;
  --bt-radius-l: 10px;

  /* ---- Schatten, sparsam */
  --bt-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 16px rgba(0, 0, 0, 0.35);
  --bt-shadow-raise: 0 12px 32px rgba(8, 10, 18, 0.38);

  /* ---- Bewegung */
  --bt-dur-fast: 120ms;
  --bt-dur-base: 200ms;
  --bt-dur-slow: 360ms;
  --bt-dur-scene: 600ms;
  --bt-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bt-ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);

  /* ---- Ebenen */
  --bt-z-scene: 0;
  --bt-z-hud: 20;
  --bt-z-dialog: 30;
  --bt-z-menu: 40;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bt-dur-fast: 0ms;
    --bt-dur-base: 0ms;
    --bt-dur-slow: 0ms;
    --bt-dur-scene: 0ms;
  }
}