/* ==========================================================================
   MaxSocial — Design Tokens
   tokens.css | v1.0.0 – Dreamscape MS Edition
   Brand: Amaranth Red + Midnight Blue + Signature-Gradient auf Linen-BG
   Font: Montserrat (Google Fonts, 300–900)
   ========================================================================== */

/* -- Google Fonts (Montserrat 300–900) -- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

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

:root {
  /* -- Surfaces ------------------------------------------------------- */
  /* Linen als BG ist das zentrale Brand-Unterscheidungsmerkmal vs. neutralem Weiß */
  --ms-bg:              #FAECE0;
  --ms-surface:         #FFFFFF;
  --ms-surface-raised:  #FFFFFF;
  --ms-surface-hover:   rgba(231,49,89,0.04);
  --ms-inset:           #FEF7F0;

  /* -- Borders -------------------------------------------------------- */
  /* Midnight-Blue-getintet für konsistente Warmton-Welt */
  --ms-edge:            rgba(53,41,116,0.06);
  --ms-edge-subtle:     rgba(53,41,116,0.03);
  --ms-edge-strong:     rgba(53,41,116,0.12);
  --ms-edge-focus:      rgba(231,49,89,0.4);

  /* -- Text Hierarchy ------------------------------------------------- */
  /* Midnight Blue als primärer Textfarbton — kein neutrales Schwarz */
  --ms-ink:             #352974;
  --ms-lead:            #5E60A9;
  --ms-ghost:           #8B8DB8;
  --ms-whisper:         #C9CADC;

  /* -- Accent / Signal (Amaranth Red) --------------------------------- */
  --ms-signal:          #E73159;
  --ms-signal-hover:    #D12148;
  --ms-signal-light:    rgba(231,49,89,0.06);
  --ms-signal-muted:    rgba(231,49,89,0.12);

  /* -- CTA (Midnight Blue — Kontrast zu Amaranth) --------------------- */
  --ms-cta:             #352974;
  --ms-cta-hover:       #2A2060;

  /* -- Semantic Colors ------------------------------------------------ */
  /* critical bleibt auf EF4444 (kein Clash mit Signal #E73159) */
  --ms-healthy:         #10B981;
  --ms-healthy-light:   rgba(16,185,129,0.08);
  --ms-healthy-border:  rgba(16,185,129,0.2);
  --ms-attention:       #F59E0B;
  --ms-attention-light: rgba(245,158,11,0.08);
  --ms-attention-border: rgba(245,158,11,0.2);
  --ms-critical:        #EF4444;
  --ms-critical-light:  rgba(239,68,68,0.08);
  --ms-critical-border: rgba(239,68,68,0.2);

  /* -- Gradient Text (Signature-Gradient) ----------------------------- */
  /* Pumpkin Spice → Fuchsia Flame → Steel Azure — zentral in Brand-Identity */
  --ms-gradient-text:   linear-gradient(135deg, #EE711E, #E71F81 50%, #20509D);
  --ms-gradient-brand:  linear-gradient(135deg, #EE711E, #E71F81 50%, #20509D);

  /* -- Mesh Gradient Orbs (warme Varianten der Brand-Palette) --------- */
  --ms-orb-1:           rgba(238,113,30,0.15);   /* Pumpkin Spice */
  --ms-orb-2:           rgba(231,31,129,0.10);   /* Fuchsia Flame */
  --ms-orb-3:           rgba(32,80,157,0.12);    /* Steel Azure */
  --ms-orb-4:           rgba(231,49,89,0.08);    /* Amaranth Red */

  /* -- Sidebar -------------------------------------------------------- */
  --ms-sidebar-w:       260px;
  --ms-sidebar-bg:      #FFFFFF;
  --ms-sidebar-border:  rgba(53,41,116,0.06);

  /* -- Shadows (Midnight-Blue-getintet + Amaranth-rose-tint) ---------- */
  --ms-shadow-xs:  0 1px 2px rgba(0,0,0,0.02), 0 1px 4px rgba(53,41,116,0.02);
  --ms-shadow-sm:  0 1px 2px rgba(0,0,0,0.02), 0 4px 16px rgba(53,41,116,0.05), 0 8px 32px rgba(231,49,89,0.02);
  --ms-shadow-md:  0 2px 4px rgba(0,0,0,0.02), 0 8px 24px rgba(53,41,116,0.07), 0 16px 40px rgba(231,49,89,0.03);
  --ms-shadow-lg:  0 2px 4px rgba(0,0,0,0.02), 0 8px 24px rgba(53,41,116,0.09), 0 16px 48px rgba(231,49,89,0.04);
  --ms-shadow-xl:  0 4px 8px rgba(0,0,0,0.03), 0 16px 40px rgba(53,41,116,0.12), 0 32px 80px rgba(231,49,89,0.06);

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

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

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

  /* -- Typography ----------------------------------------------------- */
  /* Montserrat statt Outfit — Brand-konforme Wahl */
  --ms-font:     "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ms-font-mono: "SF Mono", "Fira Code", monospace;

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

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

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

  /* -- Overlay -------------------------------------------------------- */
  --ms-overlay: rgba(0,0,0,0.25);

  /* -- KPI Tint Backgrounds ------------------------------------------ */
  --ms-kpi-bg-1: rgba(16,185,129,0.06);
  --ms-kpi-bg-2: rgba(231,49,89,0.05);
  --ms-kpi-bg-3: rgba(239,68,68,0.05);
  --ms-kpi-bg-4: rgba(53,41,116,0.03);
}

/* ==========================================================================
   2. DARK MODE (Platzhalter — post-launch verfeinern)
   bg = Midnight Blue-Welt, surfaces dunkel-lila, Gradient bleibt
   ========================================================================== */

[data-theme="dark"] {
  --ms-bg:              #1A1530;
  --ms-surface:         #251E45;
  --ms-surface-raised:  #2D2555;
  --ms-surface-hover:   #352B60;
  --ms-inset:           #1F1838;

  --ms-edge:            rgba(201,202,220,0.10);
  --ms-edge-subtle:     rgba(201,202,220,0.05);
  --ms-edge-strong:     rgba(201,202,220,0.18);
  --ms-edge-focus:      rgba(231,49,89,0.5);

  --ms-ink:             #F1EFF8;
  --ms-lead:            #C9CADC;
  --ms-ghost:           #8B8DB8;
  --ms-whisper:         #5E60A9;

  --ms-signal:          #F06080;
  --ms-signal-hover:    #F5809A;
  --ms-signal-light:    rgba(240,96,128,0.10);
  --ms-signal-muted:    rgba(240,96,128,0.18);

  --ms-cta:             #A09AC8;
  --ms-cta-hover:       #C0BAE0;

  --ms-gradient-text:   linear-gradient(135deg, #F59340, #F04FA0 50%, #5090D0);
  --ms-gradient-brand:  linear-gradient(135deg, #F59340, #F04FA0 50%, #5090D0);

  --ms-orb-1:           rgba(238,113,30,0.08);
  --ms-orb-2:           rgba(231,31,129,0.06);
  --ms-orb-3:           rgba(32,80,157,0.08);
  --ms-orb-4:           rgba(231,49,89,0.05);

  --ms-sidebar-bg:      #1A1530;
  --ms-sidebar-border:  rgba(201,202,220,0.08);

  --ms-shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --ms-shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.20);
  --ms-shadow-md: 0 2px 6px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.20);
  --ms-shadow-lg: 0 2px 8px rgba(0,0,0,0.30), 0 12px 32px rgba(0,0,0,0.25);
  --ms-shadow-xl: 0 4px 12px rgba(0,0,0,0.35), 0 16px 48px rgba(0,0,0,0.28);

  --ms-overlay: rgba(0,0,0,0.5);

  --ms-healthy:         #34D399;
  --ms-healthy-light:   rgba(52,211,153,0.10);
  --ms-healthy-border:  rgba(52,211,153,0.2);
  --ms-attention:       #FBBF24;
  --ms-attention-light: rgba(251,191,36,0.10);
  --ms-attention-border: rgba(251,191,36,0.2);
  --ms-critical:        #F87171;
  --ms-critical-light:  rgba(248,113,113,0.10);
  --ms-critical-border: rgba(248,113,113,0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ms-bg:              #1A1530;
    --ms-surface:         #251E45;
    --ms-surface-raised:  #2D2555;
    --ms-surface-hover:   #352B60;
    --ms-inset:           #1F1838;
    --ms-edge:            rgba(201,202,220,0.10);
    --ms-edge-subtle:     rgba(201,202,220,0.05);
    --ms-edge-strong:     rgba(201,202,220,0.18);
    --ms-edge-focus:      rgba(231,49,89,0.5);
    --ms-ink:             #F1EFF8;
    --ms-lead:            #C9CADC;
    --ms-ghost:           #8B8DB8;
    --ms-whisper:         #5E60A9;
    --ms-signal:          #F06080;
    --ms-signal-hover:    #F5809A;
    --ms-signal-light:    rgba(240,96,128,0.10);
    --ms-signal-muted:    rgba(240,96,128,0.18);
    --ms-cta:             #A09AC8;
    --ms-cta-hover:       #C0BAE0;
    --ms-gradient-text:   linear-gradient(135deg, #F59340, #F04FA0 50%, #5090D0);
    --ms-gradient-brand:  linear-gradient(135deg, #F59340, #F04FA0 50%, #5090D0);
    --ms-orb-1:           rgba(238,113,30,0.08);
    --ms-orb-2:           rgba(231,31,129,0.06);
    --ms-orb-3:           rgba(32,80,157,0.08);
    --ms-orb-4:           rgba(231,49,89,0.05);
    --ms-sidebar-bg:      #1A1530;
    --ms-sidebar-border:  rgba(201,202,220,0.08);
    --ms-shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
    --ms-shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.20);
    --ms-shadow-md: 0 2px 6px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.20);
    --ms-shadow-lg: 0 2px 8px rgba(0,0,0,0.30), 0 12px 32px rgba(0,0,0,0.25);
    --ms-shadow-xl: 0 4px 12px rgba(0,0,0,0.35), 0 16px 48px rgba(0,0,0,0.28);
    --ms-overlay: rgba(0,0,0,0.5);
    --ms-healthy:  #34D399;
    --ms-healthy-light: rgba(52,211,153,0.10);
    --ms-critical: #F87171;
    --ms-critical-light: rgba(248,113,113,0.10);
    --ms-attention: #FBBF24;
    --ms-attention-light: rgba(251,191,36,0.10);
  }
}