/*
 * Farben, Radien und Maße von „bin dabei“. Quelle: docs/design.md.
 * Dies ist die einzige Datei mit Farbwerten. Alle anderen Stylesheets nutzen var(--…).
 * Hell ist der Standard, dunkel folgt der Einstellung des Geräts.
 *
 * Wird auch von lib/theme_colors.rb gelesen: --color-ground (hell und dunkel) ist theme_color und
 * background_color im PWA-Manifest und die theme-color im Layout. Format „--color-name: #RRGGBB;“ beibehalten.
 * Das App-Symbol (public/icon*.svg/png) trägt --color-accent und --color-on-accent (hell) als feste Werte.
 */

:root {
  color-scheme: light dark;

  /* Flächen */
  --color-ground: #F4F4F6;       /* Seitenhintergrund */
  --color-card: #FFFFFF;         /* Karten, Leiste, runde Knöpfe im Seitenkopf */
  --color-tint: #F4F4F6;         /* Kacheln, Eingabefelder, Nebenknöpfe, Schalter aus */
  --color-track: #F4F4F6;        /* Hintergrund des Verbrauchsbalkens */
  --color-avatar: #FFFFFF;       /* Initialen-Kreis auf getönter Fläche */
  --color-grid: #EDEDF0;         /* Hilfslinien im Diagramm */

  /* Text */
  --color-ink: #16161A;          /* Text, Hauptknopf, Balken, Diagrammlinie */
  --color-ink-2: #6B6B76;        /* Nebentext, inaktive Navigation */
  --color-ink-3: #B4B4BE;        /* Haken im ausgeschalteten Schalter, graue Diagrammlinie */
  --color-on-ink: #FFFFFF;       /* Text auf --color-ink */

  /* Status */
  --color-accent: #1E9E5A;       /* Schalter an, Marke */
  --color-on-accent: #FFFFFF;    /* Haken auf --color-accent */
  --color-positive: #167A3E;     /* positive Prognose als Text */
  --color-negative: #C5281C;     /* Minus, „Abgesagt“, „Termin löschen“ */

  /* Form */
  --radius-card: 20px;
  --radius-card-list: 16px;
  --radius-row: 14px;
  --radius-tile: 12px;
  --radius-pill: 999px;

  /* Maße */
  --size-tap: 44px;              /* kleinstes Tippziel, Schalter in Listen */
  --size-toggle-large: 56px;     /* Schalter beim nächsten Termin und im Detail */
  --size-field: 48px;            /* Eingabefelder, große Knöpfe */
  --size-header: 60px;
  --size-nav: 68px;
  --space-page: 16px;            /* Rand links und rechts */
  --space-card: 20px;            /* Innenabstand großer Karten */
  --space-stack: 10px;           /* Abstand zwischen Karten */
  --width-column: 480px;         /* Inhaltsspalte am Desktop */
  --width-column-wide: 720px;    /* Guthaben-Übersicht und Matrix am Desktop */
  --width-sidebar: 268px;        /* Leiste links am Desktop, so breit wie in Desktop-Termine gerendert */
  --space-desktop: 24px;         /* Rand links und rechts der Spalte am Desktop */
  --breakpoint-desktop: 900px;   /* nur zur Dokumentation, in @media als Zahl schreiben */

  /* Schrift */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text-display: 700 44px/1.1 var(--font-sans);   /* Restguthaben */
  --text-title: 700 26px/1.2 var(--font-sans);     /* Datum des nächsten Termins */
  --text-heading: 700 20px/1.3 var(--font-sans);   /* Seitenkopf */
  --text-section: 700 17px/1.35 var(--font-sans);  /* „Weitere Termine“ */
  --text-body: 400 15px/1.35 var(--font-sans);
  --text-small: 400 13px/1.35 var(--font-sans);
  --text-tiny: 400 12px/1.35 var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ground: #0C0C0E;
    --color-card: #1A1A1E;
    --color-tint: #26262B;
    --color-track: #2E2E34;
    --color-avatar: #3A3A41;
    --color-grid: #2E2E34;

    --color-ink: #F2F2F4;
    --color-ink-2: #A0A0AA;
    --color-ink-3: #5C5C66;
    --color-on-ink: #0C0C0E;

    --color-accent: #3DDC84;
    --color-on-accent: #0C0C0E;
    --color-positive: #3DDC84;
    --color-negative: #F87171;
  }
}