/* sga-landing-theme.css
 * Theme-Layer der SGA Connect Landing.
 * Basis-Token = warmes Pergament + Marine-Tinte, Gold als Leitakzent.
 * Alle Ableitungen über color-mix(in oklab, …) — keine neuen Hexwerte im Renderer.
 *
 * Theme wird über data-Attribute am .sga-app-Wurzelknoten gesteuert:
 *   data-accent="gold | blue | green | danger"
 *   data-glass="dezent | edel | stark"
 *   data-hero="embrace | aurora | split | calm"
 */

:root {
  /* Flächen */
  --bg: #f3e9d4;
  --bg-soft: #ede1c8;
  --paper: #fbf6ec;
  --paper-2: #f7eed9;

  /* Tinte / Text */
  --ink: #14233b;
  --ink-2: #2a3850;
  --muted: #6c6452;
  --muted-2: #8a8270;

  /* Linien */
  --line: #d9cdb1;
  --line-2: #c7b994;

  /* Akzent & Status */
  --gold: #b48a3a;
  --blue: #3a6a9c;
  --green: #4d7c4a;
  --rust: #b25a3a;
  --wine: #7a3a3a;
  --danger: #b04848;

  /* Aktiver Akzent (per data-accent überschrieben) */
  --accent: var(--gold);

  /* Glas-System (per data-glass überschrieben) */
  --glass-blur: 14px;
  --glass-alpha: 0.80;
  --glass-panel: 0.62;
  --glass-border: 0.45;

  /* Radien */
  --r-card: 14px;
  --r-btn: 9px;
  --r-input: 10px;
  --r-datechip: 11px;
  --r-chip: 99px;
  --r-dark: 24px;

  /* Schatten (warm getönt, negativer Spread) */
  --shadow-1: 0 1px 2px -1px rgba(20, 35, 59, 0.16);
  --shadow-2: 0 6px 16px -6px rgba(20, 35, 59, 0.22);
  --shadow-3: 0 18px 40px -14px rgba(20, 35, 59, 0.28);

  /* Layout */
  --maxw: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --section-gap: clamp(56px, 8vw, 96px);
  --grid-gap: 22px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 200ms;

  /* Semantische Aliase */
  --surface-card: color-mix(in oklab, var(--paper) calc(var(--glass-panel) * 100%), transparent);
  --surface-input: var(--paper-2);
}

/* ---- Akzent-Umschaltung (nur englische Keys) ---- */
.sga-app[data-accent="gold"]   { --accent: var(--gold); }
.sga-app[data-accent="blue"]   { --accent: var(--blue); }
.sga-app[data-accent="green"]  { --accent: var(--green); }
.sga-app[data-accent="danger"] { --accent: var(--danger); }

/* ---- Glas-Presets ---- */
.sga-app[data-glass="dezent"] { --glass-blur: 6px;  --glass-alpha: 0.92; --glass-panel: 0.78; --glass-border: 0.55; }
.sga-app[data-glass="edel"]   { --glass-blur: 14px; --glass-alpha: 0.80; --glass-panel: 0.62; --glass-border: 0.45; }
.sga-app[data-glass="stark"]  { --glass-blur: 22px; --glass-alpha: 0.66; --glass-panel: 0.48; --glass-border: 0.38; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  * { scroll-behavior: auto !important; }
}