/* ==========================================================================
   Made Glow — Tokens Bridge
   ==========================================================================
   This file extends `colors_and_type.css` with derived/site-only tokens that
   the marketing site uses. Keeping them here (instead of inlined as hex codes
   throughout the CSS) means:

     • A change to the brand primitive automatically flows through every
       component (tints, buttons, gradient surfaces, etc.).
     • Every "magic hex" in the site has a name and a stated relationship
       to a brand primitive — auditable and overridable.
     • The site can stay in lock-step with the design system: when the
       design system updates, only `colors_and_type.css` needs to be
       re-synced; this bridge file rarely changes.

   Naming convention:
     --site-*    site-specific composite tokens (page bg, tints, etc.)
     --tint-*    light wash of a brand color (used for soft backgrounds)
     --grad-*    site-level gradients composed from primitives
   ========================================================================== */

:root {
  /* ---------- Surfaces ---------- */
  --site-bg:           #FDF9F6;                  /* warm cream — page background */
  --site-bg-soft:      var(--mg-gray-50);
  --site-bg-warm:      #F1EDE8;                  /* mid-cream — input fills, dim rows */
  --site-bg-dark:      #0E0819;                  /* deep purple-black — dark sections, footer */

  /* ---------- Tints (light washes used as section / card backgrounds) ---------- */
  --tint-pink:         #FDECF6;                  /* var(--mg-pink) at ~10% mixed w/ white */
  --tint-pink-2:       #FCE0EE;                  /* var(--mg-pink) at ~15% */
  --tint-purple:       #EDE9FA;                  /* var(--mg-purple-deep) at ~10% */
  --tint-purple-2:     #D9C6F9;                  /* var(--mg-purple-vibrant) at ~25% */
  --tint-peach:        #FCD8B4;                  /* var(--mg-peach) at ~80% */
  --tint-peach-2:      #FFE8D3;                  /* var(--mg-peach) at ~50% */
  --tint-cream:        #FDF4ED;
  --tint-cream-2:      #F5E6D9;
  --tint-blue:         var(--mg-blue-lilac);
  --tint-cyan:         var(--mg-cyan-bright);
  --tint-unread:       var(--mg-unread-bg);

  /* ---------- Site gradients (composed from primitives) ---------- */
  --grad-hero:         linear-gradient(180deg, var(--site-bg) 0%, var(--tint-pink) 40%, var(--site-bg) 100%);
  --grad-pink-purple:  linear-gradient(135deg, var(--mg-pink), var(--mg-purple-deep));
  --grad-pink-magenta: linear-gradient(135deg, var(--mg-pink), var(--mg-magenta));
  --grad-pink-peach:   linear-gradient(135deg, var(--mg-pink), var(--tint-peach));
  --grad-cell-pink:    linear-gradient(135deg, var(--tint-pink) 0%, var(--tint-pink-2) 100%);
  --grad-cell-peach:   linear-gradient(135deg, var(--tint-peach-2) 0%, var(--tint-peach) 100%);
  --grad-cell-cream:   linear-gradient(135deg, var(--tint-cream) 0%, var(--tint-cream-2) 100%);
  --grad-cell-purple:  linear-gradient(135deg, var(--tint-purple) 0%, var(--tint-purple-2) 100%);
  --grad-rainbow-line: linear-gradient(90deg, var(--mg-pink) 0%, var(--mg-blue-lilac) 33%, var(--tint-peach) 66%, var(--tint-purple-2) 100%);
  --grad-cta:          linear-gradient(135deg, var(--mg-pink) 0%, var(--mg-purple-deep) 50%, var(--mg-cyan-bright) 100%);
  --grad-numbers:      var(--grad-cta);
  --grad-section-soft: linear-gradient(135deg, var(--tint-pink), var(--tint-purple));

  /* ---------- Shadows (with brand color tint) ---------- */
  --shadow-pink:       0 6px 20px rgba(245,132,203,0.35);
  --shadow-pink-hover: 0 10px 28px rgba(245,132,203,0.45);
  --shadow-purple-12:  0 18px 40px rgba(99,84,165,0.10);
  --shadow-purple-25:  0 30px 80px rgba(99,84,165,0.25);
  --shadow-purple-soft:0 24px 60px rgba(99,84,165,0.18);

  /* ---------- Live status pill (consumer "live now" indicator) ---------- */
  --color-live:        #22C55E;                  /* universal "online" green; not part of brand */

  /* ---------- Aliases used by older site CSS ---------- */
  --mg-header:         var(--mg-ink-strong);
  --mg-border:         var(--mg-gray-200);
  --mg-purple:         var(--mg-purple-deep);
}

/* ==========================================================================
   Dark-mode overrides — applied when <body class="dark">
   The for-pros page uses the dark theme.
   ========================================================================== */
body.dark {
  --site-bg:           var(--site-bg-dark);
  --color-bg:          var(--site-bg-dark);
  --color-fg-1:        var(--mg-white);
  --color-fg-2:        rgba(242, 237, 249, 0.78);
  --color-fg-3:        rgba(242, 237, 249, 0.55);
  --color-border:      rgba(255,255,255,0.12);
}