/* Sprechauftrag – Design-Tokens
   Quelle: design/referenz/sprechauftrag/Main.dc.html
   Schriften: Geist (alles), Geist Mono (Zahlen, Labels, Code)
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet"> */

:root {
  /* Marke */
  --brand: #4FF0B8;          /* Mint – Akzent, Buttons, Links */
  --brand-hover: #A9F8DC;
  --on-brand: #02221A;       /* Text auf Mint */
  --brand-glow: rgba(79, 240, 184, 0.25);
  --accent-blue: #3A8BFF;    /* nur sparsam */

  /* Plattform-Akzent – heller Modus (Mint als Text auf Weiß zu hell → dunkleres Mint) */
  --app-accent-light: #4FF0B8;
  --app-on-accent-light: #02221A;
  --app-accent-text-light: #06734F;

  /* Plattform-Akzent – dunkler Modus */
  --app-accent-dark: #4FF0B8;
  --app-on-accent-dark: #02221A;
  --app-accent-text-dark: #4FF0B8;

  /* Flächen (dunkel) */
  --page: #020D12;
  --surface: #061A21;
  --surface-2: #071B22;
  --surface-3: #0B1F24;
  --logo-tile: #06222B;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);

  /* Text */
  --text: #EAF4F1;
  --text-strong: #FFFFFF;
  --text-soft: #DDE8E8;
  --text-muted: #A9BDBE;
  --text-faint: #8FA6A8;
  --text-dim: #6F8789;

  /* Schrift */
  --font: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --tracking-tight: -0.02em;

  /* Form */
  --radius-pill: 999px;
  --radius-card: 26px;
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1240px;
  --pad-x: 24px;

  /* Website: Overlays & Leuchten (aus Referenz-Entwurf) */
  --header-bg: rgba(2, 13, 18, 0.78);
  --hover-bg: rgba(255, 255, 255, 0.05);
  --hover-bg-strong: rgba(255, 255, 255, 0.06);
  --fill-soft: rgba(255, 255, 255, 0.03);
  --line-hover: rgba(255, 255, 255, 0.3);
  --brand-line: rgba(79, 240, 184, 0.35);
  --brand-line-strong: rgba(79, 240, 184, 0.45);
  --glow-blue: rgba(58, 139, 255, 0.22);
  --glow-mint: rgba(79, 240, 184, 0.18);
  --shadow-deep: rgba(0, 0, 0, 0.8);
  --shadow-card: rgba(0, 0, 0, 0.65);

  /* Website: Handy-Animation (aus Referenz-Entwurf) */
  --mock-shell-1: #1B2E35;
  --mock-shell-2: #071318;
  --mock-screen: #04161C;
  --mock-notch: #000000;
  --rec: #FF6B5B;
  --rec-text: #FF8A7A;
  --paper: #FAFCFB;
  --paper-text: #0B1F24;
  --paper-muted: #4A6266;
  --paper-line: #E2E9E7;
}