/*
  Bram Timeline — Design Tokens
  Quelle: Project Briefing/20260811_Draft_Bram Design System Guideline.pdf
  Farben, Radien und Abstände sind 1:1 aus dem Guideline übernommen.
  Die dort dokumentierte Typo-Skala (--fs-display etc.) ist für großflächige
  Marketing-/Display-Flächen ausgelegt. Für die dichte Timeline-UI wird eine
  kompaktere, aber auf denselben Schriften basierende Skala verwendet
  (siehe README, Abschnitt "UX-Annahmen").
*/

@font-face {
  font-family: "Lato";
  src: url("../Fonts/lato-300.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../Fonts/lato-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../Fonts/lato-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../Fonts/lato-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../Fonts/lato-900.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grand Hotel";
  src: url("../Fonts/grand-hotel-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Bram Farbwelt */
  --color-pearl-aqua: #7cc8c1;
  --color-pearl-aqua-very-light: #eef8f7;
  /* Zwischenstufe aus dem Mobile-Storyboard_v1.0-Designsystem (dortiges
     --color-pearl-aqua-light) – für den Segmented-Control-Track in Listen. */
  --color-pearl-aqua-light: #e6f0ef;
  --color-sage: #b7c8b5;
  --color-sage-light: #d9e1d6;
  --color-sage-very-light: #f1f4f0;
  --color-sand: #f4e7ca;
  --color-platinum-white: #f1f1f1;
  --color-granite: #58585a;
  --color-shadow-grey: #242426;
  --color-carbon-black: #1c1a1b;
  --color-lilac-ash: #ada4a9;

  /* Funktionale Signalfarbe (ergänzend, sparsam, siehe README) */
  --color-signal-review: #b9782f;
  --color-signal-review-bg: #f6e9d9;

  /* Funktionsfarbe für destruktive Aktionen (Löschen-Button etc.) – bewusst
     von der Reifegrad-Skala unten getrennt gehalten, auch wenn beide einen
     roten Ton nutzen. */
  --color-danger: #bd5136;
  --color-danger-bg: #f7e6e0;

  /* Reifegrad-Farbskala (Review 0.4): zeigt, wie gut ein Ereignis vorbereitet
     ist. 0 % = rot ("braucht Aufmerksamkeit") bis 100 % = grün ("erledigt"),
     50 % = gelb. */
  --color-reifegrad-0: #c0392b;
  --color-reifegrad-0-bg: #f8e2de;
  --color-reifegrad-25: #d9822b;
  --color-reifegrad-25-bg: #f9e7d5;
  --color-reifegrad-50: #cfa72c;
  --color-reifegrad-50-bg: #f7f0d6;
  --color-reifegrad-75: #8bab3a;
  --color-reifegrad-75-bg: #eaf1d9;
  --color-reifegrad-100: #4c9a5b;
  --color-reifegrad-100-bg: #e1f0e3;

  /* Demand-Indikatoren: nutzt die bestehenden Management-/Reifegradfarben.
     Nur "gleichbleibend" erhält den fachlich festgelegten Blauton. */
  --color-demand-strong-down: var(--color-reifegrad-0);
  --color-demand-down: var(--color-reifegrad-25);
  --color-demand-neutral: #95c3f3;
  --color-demand-up: var(--color-reifegrad-75);
  --color-demand-strong-up: var(--color-reifegrad-100);
  --color-demand-unknown: var(--color-lilac-ash);

  /* Tagesbewertung: dieselbe Managementlogik wie Demand, inklusive neutralem
     Blau. Die hellen Flächen markieren eine aktive Smiley-Auswahl. */
  --color-rating-1: var(--color-reifegrad-0);
  --color-rating-1-bg: var(--color-reifegrad-0-bg);
  --color-rating-2: var(--color-reifegrad-25);
  --color-rating-2-bg: var(--color-reifegrad-25-bg);
  --color-rating-3: var(--color-demand-neutral);
  --color-rating-3-bg: #eaf3fd;
  --color-rating-4: var(--color-reifegrad-75);
  --color-rating-4-bg: var(--color-reifegrad-75-bg);
  --color-rating-5: var(--color-reifegrad-100);
  --color-rating-5-bg: var(--color-reifegrad-100-bg);

  /* Oberflächen */
  --color-surface-app: var(--color-platinum-white);
  --color-surface-card: #ffffff;
  --color-surface-card-muted: var(--color-platinum-white);
  --color-border: #e1e6df;
  --color-border-strong: #cfd6cc;

  /* Text */
  --color-text-primary: var(--color-shadow-grey);
  --color-text-muted: var(--color-granite);
  --color-text-on-dark: #ffffff;

  /* Typografie */
  --font-ui: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Grand Hotel", cursive;

  --fs-page-title: 1.65rem;
  --fs-h2: 1.15rem;
  --fs-body: 0.95rem;
  --fs-body-sm: 0.85rem;
  --fs-caption: 0.75rem;
  --fs-accent: 1.35rem;

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

  /* Radien */
  --radius-sm: 6px;
  --radius-md: 1rem;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease-standard: 180ms ease;

  /* Schatten (dezent, gemäß Guideline "keine wiederholenden Texturen") */
  --shadow-card: 0 1px 2px rgba(36, 36, 38, 0.06), 0 1px 1px rgba(36, 36, 38, 0.04);
  --shadow-panel: 0 4px 16px rgba(36, 36, 38, 0.08);
}