/* dashboard/static/style-tokens.css
   Luminous Pastel SaaS design tokens — violet brand.
   Import or link this before any stylesheet that uses --lp-* variables.
   Palette source: "Luminous Pastel High-Energy SaaS" seed design.
   Contrast: #630ed4 on #fff = 8.3:1 (AAA), #4a4455 on #fff = 8.9:1,
   #6f6781 on #fff = 5.3:1 (AA). Keep frontend/src/tokens.css in sync. */

:root {
  /* ── Surfaces ─────────────────────────────── */
  --lp-bg:               #fdfaff;
  --lp-bg-top:           #ece0fb;
  --lp-bg-mid:           #f6eefd;
  --lp-bg-gradient:      linear-gradient(180deg, var(--lp-bg-top) 0%, var(--lp-bg-mid) 38%, var(--lp-bg) 100%);
  --lp-surface-0:        #ffffff;
  --lp-surface-1:        #f7f1fc;
  --lp-surface-2:        #efe7f7;
  --lp-border:           #e4dcee;
  --lp-border-soft:      #f3edf9;

  /* Frosted glass (marketing nav, floating audience toggle) */
  --lp-glass-bg:         rgba(255, 255, 255, 0.62);
  --lp-glass-blur:       blur(14px) saturate(180%);

  /* ── Text ─────────────────────────────────── */
  --lp-text:             #1d1a24;
  --lp-text-body:        #221b2c;
  --lp-muted:            #4a4455;
  --lp-subtle:           #6f6781;

  /* ── Primary ──────────────────────────────── */
  --lp-primary:          #630ed4;
  --lp-primary-light:    #eaddff;
  --lp-primary-hover:    #5a00c6;
  /* focus/glow tint: rgba form of --lp-primary */
  --lp-primary-rgb:      99, 14, 212;

  /* ── Pastel accents ───────────────────────── */
  --lp-mint:             #d1fae5;
  --lp-mint-text:        #065f46;
  --lp-lavender:         #ede9fe;
  --lp-lavender-text:    #5b21b6;
  --lp-peach:            #ffd8c4;
  --lp-peach-text:       #9a3412;

  /* ── State ────────────────────────────────── */
  --lp-error:            #ba1a1a;

  /* ── Shadows ──────────────────────────────── */
  --lp-shadow-xs:  0 1px 3px rgba(15, 23, 42, 0.06);
  --lp-shadow-sm:  0 2px 8px rgba(15, 23, 42, 0.07);
  --lp-shadow-md:  0 10px 25px -5px rgba(15, 23, 42, 0.05);

  /* ── Border radius ────────────────────────── */
  --lp-r-sm:   4px;
  --lp-r:      8px;
  --lp-r-md:   12px;
  --lp-r-lg:   16px;
  --lp-r-pill: 9999px;

  /* ── Spacing ──────────────────────────────── */
  --lp-space-base:   8px;
  --lp-gutter:       24px;
  --lp-max-w:        1280px;
  --lp-section-gap:  80px;
}