/* Design-Tokens: alle Farben, Schrift, Größen, Abstände, Radien und Bewegungswerte an einer Stelle.
   Die Styleguide-Seite liest diese Datei aus, DESIGN.md erklärt sie. */
:root {
  color-scheme: light;

  /* Helle Zone: die Projekte auf gebrochenem Weiß (Editorial) */
  --color-paper: #f1f0ed;
  --color-paper-deep: #e9e8e4;
  --color-ink: #15110e;
  --color-ink-muted: rgb(21 17 14 / 0.65);
  --color-ink-soft: rgb(21 17 14 / 0.6);
  --color-nav-ink: rgb(21 17 14 / 0.78);
  --color-line: rgb(21 17 14 / 0.12);
  --color-focus: #15110e;

  /* Kontrast-Pille (gewählt: Idee B): eine Stufe dunkler als das Papier, feine Linie innen,
     schwarzer Tropfen mit weißer Schrift. Gilt für alle Leisten (Menü, Unterleiste, Lese-Reiter) */
  --pill-light: var(--color-paper-deep);
  --pill-line: color-mix(in srgb, var(--color-ink) 12%, var(--pill-light));
  /* Glas der Menü-Pille auf der Bühne (Passepartout) */
  --pill-glass: rgb(255 255 255 / 0.5);
  --pill-glass-blur: blur(16px) saturate(140%);

  /* Regenbogen-Schimmer: läuft mit, wenn sich etwas öffnet oder ein Tropfen wandert, in Ruhe
     unsichtbar. Normal gemischt, damit er auch auf der hellen Pille zu sehen ist */
  --rainbow: linear-gradient(
    90deg,
    transparent,
    rgb(255 150 210 / 0.75),
    rgb(150 215 255 / 0.75),
    rgb(255 240 160 / 0.7),
    transparent
  );

  /* Dunkle Zone: Mint mit Weiß, eine Palette für die ganze Seite */
  --mint-deep: #17291f;
  --mint: #4f9a70;
  --mint-light: #9fd6b4;
  --mint-white: #f3faf5;
  --mint-ground: linear-gradient(
    160deg,
    var(--mint-deep),
    color-mix(in srgb, var(--mint-deep) 70%, var(--mint))
  );
  --color-on-dark: #f4f8f5;
  --color-on-dark-muted: rgb(244 248 245 / 0.92);
  /* Weicher Schatten um dünne helle Schrift, falls das weiße Licht dahinter durchzieht */
  --halo-on-dark: 0 0 0.6rem rgb(23 41 31 / 0.55);

  /* Verlauf: Deckkraft der Flächen und des Lichts, leichte Abdunklung für die Lesbarkeit */
  --flow-opacity: 0.7;
  --flow-light-opacity: 0.35;
  --flow-scrim: 0.4;

  /* Körnung (Wahl: 60 %) */
  --grain-opacity: 0.6;
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Schrift: nur Inter (variabel, selbst gehostet) */
  --font-sans: 'Inter', system-ui, sans-serif;

  /* Typo-Skala (Type Contrast: fett und groß gegen dünn und klein) */
  --text-wordmark: min(21vw, 30svh);
  --text-h1: 1.9rem;
  --text-h2: 2.2rem;
  --text-h3: 1.4rem;
  --text-body: 0.875rem;
  --text-small: 0.8125rem;
  --text-ui: 0.75rem;
  --text-nav: 0.8125rem;
  --text-tag: 0.6875rem;
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-regular: 400;
  --weight-light: 300;
  --tracking-wordmark: -0.06em;
  --tracking-title: -0.045em;
  --tracking-h3: -0.04em;
  --leading-tight: 1.05;
  --leading-body: 1.6;
  --measure: 46ch;

  /* Abstände und Maße des Kastens (zwei Zonen) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --frame-width: min(68rem, 92vw);
  --frame-top: 5.25rem;
  --card-width: 15rem;
  --card-padding: 1.25rem;
  --zone-gap: 3rem;
  /* Passepartout (R2, Bauplan v2.0): Die Bühne füllt den Bildschirm bis auf einen schmalen Rand in
     Papierfarbe mit runden Innenecken, die Menü-Pille schwebt als Glas darauf */
  --frame-gap: 12px;
  --frame-radius: 22px;
  --stage-height: calc(100svh - 2 * var(--frame-gap));
  --nav-top: calc(var(--frame-gap) + 14px);

  /* Radien */
  --radius-s: 0.5rem;
  --radius-m: 0.8rem;
  --radius-l: 1.5rem;
  --radius-pill: 999px;

  /* Bewegung: eine Motion Language. Die Federn (für JavaScript) stehen in js/motion/motion.js.
     data-motion am html-Element: still (Bewegung reduzieren am Gerät) oder full. */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: linear(
    0,
    0.006,
    0.025 2.8%,
    0.101 6.1%,
    0.539 18.9%,
    0.721 25.3%,
    0.849 31.5%,
    0.937 38.1%,
    0.968 41.8%,
    0.991 45.7%,
    1.006 50.1%,
    1.015 55%,
    1.017 63.9%,
    1.001
  );
  --duration-hover: 160ms;
  --duration-chip: 450ms;
  --duration-spring: 750ms;
  --duration-reveal: 900ms;
  --duration-intro: 1.1s;

  /* Fotografie (Entwurf FA): links Schwarz, rechts Braun-Schwarz mit mehr Kontrast zum Foto */
  --photo-left: #0b0b0c;
  --photo-right: #120e0b;

  /* Tönung der Bühnen im Ton des Kunden oder der Marke (bewusst soft) */
  --tint-social: 0.2;
  --tint-websites: 0.4;
  --duration-tint: 900ms;

  /* Bedienelemente auf den Bühnen (Glas-Pillen, Knöpfe): im Farbmodus helles Glas */
  --control-fill: rgb(255 255 255 / 0.14);
  --control-fill-hover: rgb(255 255 255 / 0.24);
  --control-line: rgb(255 255 255 / 0.3);
  --control-ink: var(--color-on-dark);
}

/* Schwarz-Weiß-Modus (N1 Chrom ohne Schatten, gewählt in Runde 30): alles schwarz-weiß und clean,
   nur die Projekte bleiben farbig. Der Rahmen bleibt Papier, die Bühnen werden Silber mit schwarzer
   Schrift, Bedienelemente schwarz mit weißer Schrift, der Regenbogen bleibt. Schalter:
   js/components/site-controls.js; ruhender Verlauf in css/components/wave.css. */
:root[data-theme='mono'] {
  --mint-deep: #b4b4b4;
  --mint: #cdcdcd;
  --mint-light: #f3f3f3;
  --mint-white: #ffffff;
  --mint-ground: linear-gradient(160deg, #d9d9d9, #a9a9a9);
  --color-on-dark: #0b0b0b;
  --color-on-dark-muted: rgb(11 11 11 / 0.74);
  --halo-on-dark: none;
  --flow-scrim: 0.2;
  --pill-glass: rgb(12 12 12 / 0.62);
  --color-nav-ink: rgb(255 255 255 / 0.84);
  --control-fill: rgb(12 12 12 / 0.8);
  --control-fill-hover: rgb(12 12 12 / 0.92);
  --control-line: rgb(255 255 255 / 0.16);
  --control-ink: #ffffff;
  --photo-left: #efefef;
  --photo-right: #dfdfdf;
}