/*
 * Design-Variablen: alle Abstände, Radien und Schriftgrößen stehen nur hier.
 * Farben und Schriften kommen aus dem gemeinsamen MINTucation-Rahmen (site/shared/rahmen.css);
 * hier werden sie nur auf die Namen dieser App abgebildet. Hell/dunkel regelt rahmen.css.
 * Gestaltung „Labor“: Millimeterpapier, klare Linien, eckige Formen, keine Schatten.
 */

:root {
  /* Farben: Fläche und Linien */
  --color-bg: var(--bg);
  --color-surface: var(--bg);
  --color-surface-muted: var(--tint);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-border: var(--hair);
  --color-border-strong: var(--rule);
  /* Akzent und Rückmeldung */
  --color-primary: var(--mint-ink); /* Text, Linien, Symbole */
  --color-primary-fill: var(--mint); /* Flächen (Hauptknopf) */
  --color-primary-contrast: var(--tile-ink);
  --color-primary-soft: var(--mint-soft);
  --color-success: var(--ok);
  --color-danger: var(--err);
  --color-warning: var(--warn);
  --color-focus: var(--focus);
  --color-backdrop: var(--backdrop);
  --color-grid-fine: var(--grid-fine); /* Millimeterpapier */
  --color-grid-bold: var(--grid-bold);
  --color-flame: #f08c00;

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;

  /* Radien und Linien: eckig wie ein Datenblatt; nur Punkte (Stationen) sind rund */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-dot: 50%;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-ring-width: 3px;

  /* Millimeterpapier der Aufgabenkarte: feine Linien, jede fünfte kräftig */
  --grid-size: 10px;
  --grid-size-bold: 50px;

  /* Schrift */
  --font-family: var(--font-text);
  --font-family-display: var(--font-head); /* Überschriften, Urteil „Richtig“ */
  --font-family-label: var(--font-mono); /* kleine Etiketten in Großbuchstaben */
  --font-family-math: 'Cambria Math', 'STIX Two Math', 'Times New Roman', serif;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.625rem;
  --font-size-xxl: 2rem;
  --font-size-label: 0.72rem;
  --font-size-display: 1.375rem;
  --font-size-display-lg: 1.75rem;
  --font-weight-normal: 350;
  --font-weight-semibold: 600;
  --font-weight-display: 800;
  --letter-spacing-label: 0.06em;
  --letter-spacing-display: -0.02em;
  --line-height: 1.55;
  --line-height-tight: 1.2;
  --line-height-none: 1;
  /* Brüche: etwas kleiner als die Zeile, Linie wächst mit der Schriftgröße */
  --fraction-font-scale: 0.8em;
  --fraction-line-width: 0.07em;
  --fraction-gap: 0.05em;

  /* wächst mit der Bildschirmbreite, damit die Überschrift auf dem Handy in eine Zeile passt */
  --font-size-title: clamp(1.5rem, 6.5vw, 2.5rem);

  /* Icons */
  --icon-size: 1.75rem;
  --icon-size-sm: 1.25rem;
  --icon-size-md: 2.25rem;
  --icon-size-lg: 2.5rem;
  --icon-tile-size: 2.75rem;
  --icon-stroke: 2.4;

  /* Bewegung */
  --transition-fast: 120ms ease-out;

  /* Ebenen und Drehungen */
  --z-dialog: 10;
  --rotate-open: 90deg;

  /* Raketenflug */
  --track-width: 13rem;
  --track-inset: 1rem; /* Abstand der Flugbahn oben und unten */
  --track-line-x: 1.75rem; /* Lage der Flugbahn-Linie von links */
  --track-line-width: 2px;
  --station-dot-size: 0.5rem;
  --station-hit-size: 1.25rem; /* Klick-/Hover-Fläche um den Punkt */
  --rocket-size: 2.75rem;
  --flight-duration: 1.4s;
  --flicker-duration: 180ms;
  --flicker-strength: 1.18;
  --flame-scale-0: 0.45;
  --flame-scale-1: 0.8;
  --flame-scale-2: 1.1;
  --flame-scale-3: 1.4;
  --flame-scale-4: 1.75;

  /* Maße */
  --sidebar-width: 22rem;
  --divider-width: 2rem; /* Klickfläche der Trennlinie */
  --handle-width: 1rem;
  --handle-height: 3rem;
  --dialog-width: 34rem;
  --choice-min-width: 12rem;
  --url-field-min-width: 14rem;
  --content-max-width: 44rem;
  --input-width: 9ch;
  --touch-target: 2.75rem;
  --check-size: 1.125rem;
  --area-tile-size: 2.5rem; /* Nummer des Bereichs in der Kopfzeile */
}