/* dashboard/static/style-tokens.css
   Luminous Pastel SaaS design tokens — Phase 1.
   Import or link this before any stylesheet that uses --lp-* variables. */

:root {
  /* ── Surfaces ─────────────────────────────── */
  --lp-bg:               #f7f9fb;
  --lp-bg-top:           #d6e9f2;
  --lp-bg-mid:           #e4f0f6;
  --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:        #f2f4f6;
  --lp-surface-2:        #eceef0;
  --lp-border:           #e0e3e5;
  --lp-border-soft:      #f1f5f9;

  /* ── Text ─────────────────────────────────── */
  --lp-text:             #0f172a;
  --lp-text-body:        #191c1e;
  --lp-muted:            #41484c;
  --lp-subtle:           #64748b;

  /* ── Primary ──────────────────────────────── */
  --lp-primary:          #396477;
  --lp-primary-light:    #bae6fd;
  --lp-primary-hover:    #2d5063;

  /* ── 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;
}