/* ============================================================
   SnapSite HQ - Design Tokens
   Dark Luxury. Gold ist Gast, nie Host (max ~8% Viewport).
   ============================================================ */
:root {
  /* --- Surfaces (matte black -> graphite) --- */
  --bg:        #08080a;   /* app base */
  --bg-2:      #0c0c0f;   /* sunken / behind cards */
  --surface:   #131318;   /* card */
  --surface-2: #1a1a20;   /* raised card / sheet */
  --surface-3: #212129;   /* inputs, chips */
  --hairline:  rgba(255,255,255,0.07);
  --hairline-2:rgba(255,255,255,0.12);

  /* --- Ink (warm off-white) --- */
  --ink:       #ECEAE4;   /* primary text */
  --ink-2:     #B6B3AC;   /* secondary */
  --ink-3:     #7E7B74;   /* muted / captions */
  --ink-4:     #514F4A;   /* disabled / faint */

  /* --- Gold (Gast) --- */
  --gold:      #C8A24B;
  --gold-soft: #D9BE7E;
  --gold-deep: #A07E2E;
  --gold-glow: rgba(200,162,75,0.16);
  --gold-line: rgba(200,162,75,0.34);

  /* --- Status hues (desaturated, luxe) --- */
  --ok:        #6FB78A;   /* paid / live / done */
  --ok-bg:     rgba(111,183,138,0.12);
  --warn:      #D7A95A;   /* offen / wartend */
  --warn-bg:   rgba(215,169,90,0.12);
  --crit:      #D17A6E;   /* überfällig / blockiert / kritisch */
  --crit-bg:   rgba(209,122,110,0.12);
  --info:      #7FA8C9;   /* in umsetzung / demo */
  --info-bg:   rgba(127,168,201,0.12);
  --neutral:   #8C8A86;
  --neutral-bg:rgba(140,138,134,0.12);

  /* --- Typography --- */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-num:  'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --font-mark: 'Cinzel', 'Cormorant Garamond', Georgia, serif;

  /* type scale (mobile) */
  --t-hero:   clamp(26px, 7vw, 34px);
  --t-h1:     22px;
  --t-h2:     17px;
  --t-body:   15px;
  --t-sm:     13px;
  --t-xs:     11px;
  --t-mono:   12px;

  /* --- Radius --- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Spacing --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* --- Shadows / glow --- */
  --shadow:    0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -12px rgba(0,0,0,0.7);
  --shadow-lg: 0 24px 60px -24px rgba(0,0,0,0.85);
  --ring:      0 0 0 1px var(--hairline);

  /* --- Layout --- */
  --maxw: 540px;            /* phone-first column */
  --nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 240ms;
  --dur-fast: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; --dur-fast: 1ms; }
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}