/* Speedchtime - Farbwelt und Grundwerte.
   Siebdruck-Plakat: kraeftige Fluessigfarben auf warmem Papier, Tusche als Kontur. */
:root {
  --paper: #fcf6e7;
  --paper-2: #f4e9cf;
  --paper-3: #e9dabd;
  --ink: #16120c;
  --ink-2: #4c4234;
  --mute: #85795f;

  --red: #d7263d;
  --red-2: #a3142a;
  --orange: #e8823a;
  --orange-2: #f7d9bc;
  --mustard: #efb03c;
  --teal: #12796f;
  --blue: #35569e;
  --magenta: #c33c7d;
  --purple: #6e4a9e;

  --line: rgba(22, 18, 12, 0.16);
  --line-strong: rgba(22, 18, 12, 0.6);
  --hard: 6px 6px 0 var(--ink);
  --hard-sm: 4px 4px 0 var(--ink);
  --soft: 0 18px 40px rgba(22, 18, 12, 0.22);

  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;

  /* Alle drei Schriften liegen im Projekt und stehen unter freier Lizenz. */
  --font-body: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Segoe UI Black", "Arial Black", Roboto, Arial, sans-serif;
  /* Countdown und Restzeit: kraeftige Comic-Schrift. */
  --font-fun: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;

  --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.86rem);
  --text-sm: clamp(0.86rem, 0.8rem + 0.3vw, 1.02rem);
  --text-md: clamp(1rem, 0.92rem + 0.42vw, 1.28rem);
  --text-lg: clamp(1.3rem, 1rem + 1.1vw, 2rem);
  --text-xl: clamp(1.7rem, 1.2rem + 2.2vw, 3.1rem);
  --text-timer: clamp(3.2rem, 1.8rem + 7.6vw, 7.2rem);
  --text-count: clamp(4rem, 2.4rem + 11vw, 11rem);

  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 26px;
  --space-5: 38px;
  --space-6: 56px;

  --tap: 56px;
  --speed: 200ms;
}