/* Design-Tokens: einzige Quelle für Farben, Typografie, Formen, Raster und Bewegung */

/* Inter Variable, auf Latin und die genutzten Gewichte (400 bis 900) und opsz gesubsettet, siehe README */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-app.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutral: Creme überall als Grund, Sand für Karten */
  --creme: #F4EFE6;
  --sand: #EEE7DB;
  --ink: #161616;
  /* Ink-2 leicht dunkler als #6F6A63, damit auch auf Sand 4,5:1 erreicht wird */
  --ink-2: #6C6761;
  --line: #E1DACF;
  /* Text im Aura-Bereich: Ink mit 78 % Deckkraft hält 4,5:1 auch auf den sattesten Stellen */
  --ink-aura: rgba(22, 22, 22, 0.78);

  /* Semantische Namen, die die Komponenten nutzen */
  --color-bg: var(--creme);
  --color-card: var(--sand);
  --color-text: var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-line: var(--line);
  --color-tabline: rgba(22, 22, 22, 0.12);
  /* Karten sind transparent mit feiner Kontur, die Aura scheint durch */
  --color-outline: rgba(22, 22, 22, 0.14);
  /* Leichte Creme-Füllung nur für Eingabefelder und aktive Zustände */
  --color-fill: rgba(244, 239, 230, 0.72);

  /*
    Modulfarben in zwei Stufen.
    base: Pastellton für Verläufe und Flächen.
    deep: Buttons, große Zahlen, Linien, aktive Elemente, Text in Modulfarbe.
    Die deep-Werte sind so abgedunkelt, dass Creme-Schrift auf deep und deep-Text auf Creme
    mindestens 4,6:1 erreichen (WCAG AA mit Reserve).
    Butter ist die Ausnahme: Primärbuttons tragen Ink-Schrift, dafür braucht es eine hellere
    Füllung (butter-strong, Ink 4,66:1). Ink auf Butter deep käme nur auf 3,5:1.
  */
  --butter: #F5D96B;
  --butter-deep: #81691E;
  --butter-strong: #9B7E25;
  --mandarine: #F49A5A;
  --mandarine-deep: #B04F1C;
  --koralle: #F27A6B;
  --koralle-deep: #C4382A;
  --rose: #F3B8CB;
  --rose-deep: #BB3C6D;
  --periwinkle: #A9B8F0;
  --periwinkle-deep: #4A5FCC;
  --salbei: #B9CFA6;
  --salbei-deep: #51753B;

  /*
    Modul-Ton: jede Ansicht setzt ihn über data-tone am body (js/app.js),
    einzelne Elemente über die Klasse .tone-<farbe>.
    tone-fill und tone-on: Primärbutton, tone-deep: Sekundärbutton, Zahlen, aktive Elemente.
    Neutral (Startseite, Einstellungen, Profil) ist Periwinkle.
  */
  --tone: var(--periwinkle);
  --tone-deep: var(--periwinkle-deep);
  --tone-fill: var(--periwinkle-deep);
  --tone-on: var(--creme);

  /* Aura: weiche Verläufe von base zu transparent */
  --aura-blur: 56px;
  --aura-height: 460px;
  --aura-fade: 400ms;

  /* Typografie: Inter Variable */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Große Zahlen (Tageszahl, Werte, Streaks, Gewichte) */
  --font-size-number: 72px;
  --font-weight-number: 900;
  --line-height-number: 0.9;
  --letter-spacing-number: -0.05em;

  /* Überschriften und Begrüßung */
  --font-size-heading: 28px;
  --font-weight-heading: 900;
  --letter-spacing-heading: -0.03em;

  /* Titel in Karten und Kopfzeile */
  --font-size-title: 20px;
  --font-weight-title: 800;

  /* Monat neben der Tageszahl */
  --font-size-month: 20px;
  --font-weight-month: 700;

  /* Kartenzahlen und Chips */
  --font-size-card-number: 32px;
  --font-weight-card-number: 800;

  /* Fließtext und Hinweise */
  --font-size-body: 16px;
  --font-weight-body: 500;
  --line-height-body: 1.45;

  /* Labels und Tab-Beschriftungen */
  --font-size-label: 12px;
  --font-weight-label: 700;
  --letter-spacing-label: 0.08em;

  /* Raster (8 px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --page-margin: 20px;
  --card-gap: 12px;

  /* Formen: Karten Rechteck mit 24 px, alles Interaktive vollrund, nie unter 12 px */
  --radius-card: 24px;
  --radius-pill: 999px;
  --radius-min: 12px;
  --radius-control: var(--radius-pill);
  --line-width: 1px;
  --icon-stroke: 1.5;

  /* Größen interaktiver Elemente */
  --tap-min: 44px;
  --button-height: 52px;
  --chip-height: 32px;
  --tap-circle: 52px;
  --day-circle: 40px;
  --dot: 12px;

  /* Bewegung */
  --duration: 180ms;
  --easing: ease-out;

  /* Layout */
  --header-height: 56px;
  --tabbar-height: 60px;
  --tab-icon: 26px;
  --tab-stroke: 1.75;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}