/*
  Marken-Tokens von getfollometry.app. core.css und site.css lesen nur diese Variablen.
  Farben aus facts.json: Violett #7C3AED (Akzent), Pink #EC4899 (zweite Farbe, wie die
  Entfolgt-Balken im Trend). Pink traegt nie kleinen Text: auf Weiss nur 3,5:1.
  Dunkel nutzt echtes Schwarz wie Instagram und die App.
*/
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --color-bg: #ffffff;
  --color-surface: #f6f3fe;          /* leicht violett, damit Flaechen zur Marke gehoeren */
  --color-elevated: #ffffff;
  --color-text: #0d0b14;
  --color-body: #2a2733;
  --color-muted: #5d5a68;            /* 6,6:1 auf Weiss, 6,1:1 auf surface */
  --color-border: #e6e1f2;
  --color-accent: #7c3aed;           /* Weiss darauf 5,7:1 */
  --color-accent-hover: #6d28d9;
  --color-on-accent: #ffffff;
  --color-pink: #ec4899;
  --color-link: #6d28d9;
  --color-focus: #7c3aed;
  --color-success: #15803d;
  --color-error: #b91c1c;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #713f12;
  --color-badge-bg: #0d0b14;
  --color-badge-text: #ffffff;
  --color-phone-frame: #16141c;
  --color-panel-dark: #120d1f;
  --color-panel-dark-text: #f6f3fe;

  --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #ec4899 100%);
  --gradient-text: linear-gradient(120deg, #6d28d9 0%, #a21caf 50%, #db2777 100%);
  --glow: radial-gradient(60% 60% at 70% 30%, rgba(236, 72, 153, .16), transparent 70%), radial-gradient(60% 70% at 20% 20%, rgba(124, 58, 237, .18), transparent 70%);

  --tile-1: #ede9fe; --tile-2: #ddd6fe; --tile-3: #fce7f3;
  --tile-4: #f3e8ff; --tile-5: #e9d5ff; --tile-6: #fbcfe8;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 1px 2px rgba(18, 13, 31, .06), 0 8px 24px rgba(18, 13, 31, .06);
  --shadow-lift: 0 24px 60px rgba(76, 29, 149, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-surface: #120f19;
    --color-elevated: #1a1624;
    --color-text: #f6f3fe;
    --color-body: #e4e0ee;
    --color-muted: #a8a3b6;
    --color-border: #2b2638;
    --color-accent: #7c3aed;
    --color-accent-hover: #8b5cf6;
    --color-on-accent: #ffffff;
    --color-pink: #f472b6;
    --color-link: #c4b5fd;             /* 11:1 auf Schwarz */
    --color-focus: #a78bfa;
    --color-success: #4ade80;
    --color-error: #f87171;
    --color-warning-bg: #3a2a06;
    --color-warning-text: #fde68a;
    --color-badge-bg: #f6f3fe;
    --color-badge-text: #0d0b14;
    --color-phone-frame: #2a2633;
    --color-panel-dark: #160f26;
    --color-panel-dark-text: #f6f3fe;

    --gradient-text: linear-gradient(120deg, #a78bfa 0%, #e879f9 50%, #f472b6 100%);
    --glow: radial-gradient(60% 60% at 70% 30%, rgba(236, 72, 153, .20), transparent 70%), radial-gradient(60% 70% at 20% 20%, rgba(124, 58, 237, .28), transparent 70%);

    --tile-1: #2e1065; --tile-2: #3b0764; --tile-3: #500724;
    --tile-4: #1e1b4b; --tile-5: #4c1d95; --tile-6: #831843;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
    --shadow-lift: 0 24px 60px rgba(124, 58, 237, 0.28);
  }
}