/* SPANDL.ai – Design Tokens
 * Wiederverwendbar. Jede Seite, die das Designsystem nutzt, lädt diese Datei zuerst.
 */

:root {
  /* Brand Surfaces – Anthrazit-Skala */
  --ink-900: #1C1C1C; /* Seitenhintergrund, tiefste Ebene */
  --ink-800: #2A2A2A; /* Sektionen, Karten */
  --ink-700: #353535; /* hervorgehobene Flächen */
  --ink-600: #4A4A4A; /* Outlined-Borders auf dunkel */

  /* Akzent – Smaragd */
  --emerald:    #0F766E;
  --emerald-hi: #14B8A6;

  /* Text auf dunkel */
  --text:       #F5F5F4;
  --text-mute:  rgba(245, 245, 244, 0.72);
  --text-faint: rgba(245, 245, 244, 0.45);
  --text-dim:   rgba(245, 245, 244, 0.28);

  /* Helle Fläche (Marketing, Onboarding) */
  --beige:               #E7E5E4;
  --card-light:          #FFFFFF;
  --ink-on-light:        #1C1C1C;
  --ink-on-light-mute:   rgba(28, 28, 28, 0.64);
  --ink-on-light-faint:  rgba(28, 28, 28, 0.32);

  /* Hairlines */
  --border-dark:  rgba(245, 245, 244, 0.08);
  --border-light: rgba(28, 28, 28, 0.08);

  /* Semantik */
  --red:   #E5484D;
  --amber: #F5A524;
  /* Bestätigung nutzt bewusst den Akzent: var(--emerald) */

  /* Tiefe */
  --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-med:   0 8px 8px rgba(0, 0, 0, 0.30);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.50);
  --focus:        0 0 0 3px rgba(20, 184, 166, 0.45);

  /* Typografie
   * Brand: DM Sans (Body/UI) + Playfair Display (Headlines, Logo). Serif-Sans-Pairing.
   * JetBrains Mono für Tokens / Specs. */
  --font:         "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --maxw: 1100px;

  /* Spacing-Skala (8px-Basis) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;   /* 1u */
  --space-4: 12px;  /* 1.5u */
  --space-5: 16px;  /* 2u */
  --space-6: 24px;  /* 3u */
  --space-7: 32px;  /* 4u */
  --space-8: 48px;  /* 6u */
  --space-9: 80px;  /* 10u */

  /* Radien */
  --radius-subtle:     4px;
  --radius-standard:   8px;
  --radius-comfortable:12px;
  --radius-large:      20px;
  --radius-pill:       500px;
  --radius-full:       9999px;
  --radius-circle:     50%;
}