/* ==========================================================================
   Your Social Hero Partners — Design Tokens
   tokens.css | v2.0.0 – Sunset Pop Edition
   Brand: Vibrant Orange (Logo-Anker) + Deep Purple CTA + Hot Magenta Accent
   Gradient: Orange → Magenta → Purple (Sunset)
   Font: Outfit (Google Fonts variable 300–900)
   ========================================================================== */

/* -- Google Fonts (Outfit variable 300–900) -- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..900&display=swap');

/* ==========================================================================
   1. CSS Custom Properties — LIGHT MODE (default)
   ========================================================================== */

:root {
  /* -- Surfaces ------------------------------------------------------- */
  /* Warm Pfirsich als Page-BG — deutlich abgesetzt zur weißen App-Card-Surface */
  --yshp-bg:              #FFD4B8;        /* Page-BG: Sunset-Pfirsich, deutlich farbig */
  --yshp-surface:         #FFFFFF;        /* App-Card + Inner-Cards */
  --yshp-surface-raised:  #FFFFFF;
  --yshp-surface-hover:   rgba(255,120,73,0.05);
  --yshp-inset:           #FFFBF5;
  --yshp-app-card-bg:     #FFFFFF;        /* Outer App-Card BG */
  --yshp-app-card-radius: 24px;           /* Outer App-Card Radius */
  --yshp-app-card-margin: 24px;           /* Page-Edge zum App-Card */

  /* -- Borders -------------------------------------------------------- */
  /* Deep-Purple-getintet für ruhigen Kontrast zum poppigen Orange */
  --yshp-edge:            rgba(91,33,182,0.06);
  --yshp-edge-subtle:     rgba(91,33,182,0.03);
  --yshp-edge-strong:     rgba(91,33,182,0.12);
  --yshp-edge-focus:      rgba(255,120,73,0.45);

  /* -- Text Hierarchy ------------------------------------------------- */
  /* Deep Indigo als Text-Anker — kein neutrales Schwarz */
  --yshp-ink:             #1E1B4B;
  --yshp-lead:            #6B5B95;
  --yshp-ghost:           #9C8FB8;
  --yshp-whisper:         #D4C9E0;

  /* -- Accent / Signal (Brand Orange — Logo-Anker) -------------------- */
  --yshp-signal:          #FF7849;
  --yshp-signal-hover:    #F25F2E;
  --yshp-signal-light:    rgba(255,120,73,0.07);
  --yshp-signal-muted:    rgba(255,120,73,0.14);

  /* -- CTA (Deep Purple — Kontrast-Komplement zu Orange) -------------- */
  --yshp-cta:             #5B21B6;
  --yshp-cta-hover:       #4C1D95;

  /* -- Pop-Accent (Hot Magenta — Pills, Badges, Highlights) ----------- */
  --yshp-pop:             #EC4899;
  --yshp-accent:          var(--yshp-pop);   /* Alias: legacy "accent" -> Pop-Magenta */
  --yshp-pop-hover:       #DB2777;
  --yshp-pop-light:       rgba(236,72,153,0.08);
  --yshp-pop-muted:       rgba(236,72,153,0.16);

  /* -- Semantic Colors ------------------------------------------------ */
  --yshp-healthy:         #10B981;
  --yshp-healthy-light:   rgba(16,185,129,0.08);
  --yshp-healthy-border:  rgba(16,185,129,0.2);
  --yshp-attention:       #F59E0B;
  --yshp-attention-light: rgba(245,158,11,0.08);
  --yshp-attention-border: rgba(245,158,11,0.2);
  --yshp-critical:        #EF4444;
  --yshp-critical-light:  rgba(239,68,68,0.08);
  --yshp-critical-border: rgba(239,68,68,0.2);

  /* -- Signature Gradient (Orange → Magenta → Purple Sunset) ---------- */
  --yshp-gradient-text:   #5B21B6;
  --yshp-gradient-brand:  linear-gradient(135deg, #FF7849, #EC4899 50%, #5B21B6);

  /* -- Mesh Gradient Orbs (Sunset-Spektrum) --------------------------- */
  --yshp-orb-1:           rgba(255,120,73,0.18);   /* Vibrant Orange */
  --yshp-orb-2:           rgba(236,72,153,0.14);   /* Hot Magenta */
  --yshp-orb-3:           rgba(124,58,237,0.12);   /* Light Purple */
  --yshp-orb-4:           rgba(253,186,116,0.16);  /* Peach */

  /* -- Sidebar -------------------------------------------------------- */
  --yshp-sidebar-w:       260px;
  --yshp-sidebar-bg:      #FFFFFF;
  --yshp-sidebar-border:  rgba(91,33,182,0.06);

  /* -- Shadows (Indigo-getintet multi-layer — ruhig auf Cream-BG) ---- */
  --yshp-shadow-xs:  0 1px 2px rgba(0,0,0,0.02), 0 1px 4px rgba(91,33,182,0.03);
  --yshp-shadow-sm:  0 1px 2px rgba(0,0,0,0.02), 0 4px 16px rgba(91,33,182,0.05), 0 8px 32px rgba(255,120,73,0.03);
  --yshp-shadow-md:  0 2px 4px rgba(0,0,0,0.02), 0 8px 24px rgba(91,33,182,0.07), 0 16px 40px rgba(255,120,73,0.04);
  --yshp-shadow-lg:  0 2px 4px rgba(0,0,0,0.02), 0 8px 24px rgba(91,33,182,0.09), 0 16px 48px rgba(255,120,73,0.05);
  --yshp-shadow-xl:  0 4px 8px rgba(0,0,0,0.03), 0 16px 40px rgba(91,33,182,0.12), 0 32px 80px rgba(255,120,73,0.07);

  /* -- Radius --------------------------------------------------------- */
  --yshp-radius-xs:   8px;
  --yshp-radius-sm:   10px;
  --yshp-radius-md:   16px;
  --yshp-radius-lg:   20px;
  --yshp-radius-xl:   24px;
  --yshp-radius-full: 9999px;

  /* -- Spacing -------------------------------------------------------- */
  --yshp-space-1:  4px;
  --yshp-space-2:  8px;
  --yshp-space-3:  12px;
  --yshp-space-4:  16px;
  --yshp-space-5:  20px;
  --yshp-space-6:  28px;
  --yshp-space-8:  36px;
  --yshp-space-10: 48px;
  --yshp-space-12: 56px;

  --yshp-gap:      24px;
  --yshp-max-w:    1000px;

  /* -- Typography ----------------------------------------------------- */
  /* Outfit als Brand-Font — variable 300–900 */
  --yshp-font:     "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;
  --yshp-font-mono: "SF Mono", "Fira Code", monospace;

  --yshp-fs-2xs:   11px;
  --yshp-fs-xs:    12px;
  --yshp-fs-sm:    13px;
  --yshp-fs-base:  15px;
  --yshp-fs-md:    16px;
  --yshp-fs-lg:    18px;
  --yshp-fs-xl:    20px;
  --yshp-fs-2xl:   24px;
  --yshp-fs-3xl:   32px;
  --yshp-fs-4xl:   42px;

  /* -- Transitions ---------------------------------------------------- */
  --yshp-ease:            cubic-bezier(0.16,1,0.3,1);
  --yshp-ease-in-out:     ease;
  --yshp-duration:        200ms;
  --yshp-duration-fast:   150ms;
  --yshp-duration-slow:   300ms;

  /* -- Z-Index -------------------------------------------------------- */
  --yshp-z-sidebar:  200;
  --yshp-z-sticky:   100;
  --yshp-z-dropdown: 300;
  --yshp-z-overlay:  500;
  --yshp-z-modal:    600;

  /* -- Overlay -------------------------------------------------------- */
  --yshp-overlay: rgba(30,27,75,0.30);

  /* -- KPI Tint Backgrounds ------------------------------------------ */
  --yshp-kpi-bg-1: rgba(16,185,129,0.06);   /* healthy */
  --yshp-kpi-bg-2: rgba(255,120,73,0.06);   /* orange-signal */
  --yshp-kpi-bg-3: rgba(239,68,68,0.05);    /* critical */
  --yshp-kpi-bg-4: rgba(91,33,182,0.04);    /* purple-cta */
}