/* Skelett
   ============================================================
   generated: oskar

   Written by Oskar (stage 17). Editing it by hand is fine – but take the
   `generated` line out, and the panel will leave the file alone from then on.

   name: Skelett
   description: Die ruhige Ausgangsgestaltung, aus der jedes Projekt startet.
   version: 1
   author: Oskar */

:root {
  /* Farben */
  --ink: #1a1a1a;
  --ink-soft: #565656;
  --paper: #fafafa;
  --paper-sunk: #f0f0f0;
  --band: #f9a70d;
  --band-ink: #1a1a1a;
  --line: #dedede;
  --shadow: rgb(28 25 23 / 0.14);
  --accent: #10409a;
  --accent-deep: #0a2f75;
  --alert: #d1503f;

  /* Schrift */
  --font-display: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-s: 0.8rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-heading: clamp(1.56rem, 1.2rem + 1.35vw, 1.95rem);
  --text-display: clamp(1.95rem, 1.1rem + 3.8vw, 3.81rem);

  /* Maße */
  --baseline: calc(var(--text-m) * 1.5);
  --width-page: 68rem;
  --measure: 36rem;
  --width-card: 24rem;
  --radius: 3px;

  /* Abstände */
  --space-2xs: calc(var(--baseline) * 0.25);
  --space-xs: calc(var(--baseline) * 0.5);
  --space-s: calc(var(--baseline) * 0.75);
  --space-m: calc(var(--baseline) * 1);
  --space-l: calc(var(--baseline) * 2);
  --space-xl: calc(var(--baseline) * 4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ececec;
    --ink-soft: #a3a3a3;
    --paper: #17181a;
    --paper-sunk: #212326;
    --band: #f9a70d;
    --band-ink: #1a1a1a;
    --line: #34373b;
    --shadow: rgb(0 0 0 / 0.6);
    --accent: #7ba7f5;
    --accent-deep: #a3c2f8;
    --alert: #e0715f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ececec;
  --ink-soft: #a3a3a3;
  --paper: #17181a;
  --paper-sunk: #212326;
  --band: #f9a70d;
  --band-ink: #1a1a1a;
  --line: #34373b;
  --shadow: rgb(0 0 0 / 0.6);
  --accent: #7ba7f5;
  --accent-deep: #a3c2f8;
  --alert: #e0715f;
}