/* ═══════════════════════════════════════════════════════════════
 * VinSnap Design Tokens
 *
 * Single source of truth for all CSS variables that define brand
 * surfaces, gradients, shadows, typography display sizes, and
 * radii. Imported by `business.css` (portal) and `index.html` (and
 * any future public page that wants the brand look).
 *
 * Naming convention: `--dash-*` prefix preserved for portal compat.
 * The "dash" name is historical (came from the Command Center
 * dashboard); these values now apply site-wide.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --dash-bg:
    radial-gradient(1400px 400px at 0% 0%, rgba(59,130,246,0.08), transparent 60%),
    radial-gradient(1000px 400px at 100% 100%, rgba(34,211,166,0.04), transparent 60%),
    linear-gradient(180deg, #080d18 0%, #0b1328 100%);
  --dash-card-bg:
    linear-gradient(180deg, rgba(14,22,36,0.95) 0%, rgba(14,22,36,0.82) 100%);
  --dash-card-bg-alt:
    linear-gradient(180deg, rgba(20,28,44,0.95) 0%, rgba(14,22,36,0.82) 100%);

  /* Borders + accents */
  --dash-border-grad:
    linear-gradient(135deg,
      rgba(59,130,246,0.27) 0%,
      rgba(14,165,233,0.15) 40%,
      rgba(34,211,166,0.18) 100%);
  --dash-accent-grad:
    linear-gradient(90deg, #0EA5E9 0%, #22D3A6 100%);

  /* Phase D — community-side 3-stop "social" gradient + amber accent.
   * Garage side reads cyan via --dash-accent-grad above; community side
   * reads amber to give the GARAGE⇄COMMUNITY mode toggle visual contrast. */
  --dash-social-grad:
    linear-gradient(135deg, #0EA5E9 0%, #22D3A6 50%, #facc15 100%);
  --dash-amber-grad:
    linear-gradient(135deg, #fb923c 0%, #facc15 100%);

  /* Semantic status */
  --dash-red:        #f87171;
  --dash-red-soft:   rgba(248,113,113,0.12);
  --dash-amber:      #fb923c;
  --dash-amber-soft: rgba(251,146,60,0.10);
  --dash-green:      #22d3a6;
  --dash-green-soft: rgba(34,211,166,0.14);

  /* Elevation */
  --dash-lift:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 48px -20px rgba(59,130,246,0.18);
  --dash-lift-lg:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 80px -30px rgba(59,130,246,0.24);

  /* Display typography */
  --dash-display-size:   38px;
  --dash-display-weight: 800;
  --dash-display-letter: -0.02em;
  --dash-display-grad:
    linear-gradient(135deg, #ffffff 0%, #a8bee6 100%);
  --dash-label-size:   10px;
  --dash-label-letter: 0.08em;
  --dash-label-weight: 600;

  /* Radii */
  --dash-radius-sm: 10px;
  --dash-radius-md: 14px;
  --dash-radius-lg: 18px;
}

/* ═══ Legacy palette aliases (B2C app compatibility) ═══════════
 * The B2C garage + community SPAs (`app.html`) were built on a
 * purple-leaning palette: `--accent-purple: #8b5cf6`,
 * `--accent-blue: #3b82f6`, `--secondary-color: #8b5cf6`,
 * `--primary-color: #3b82f6`. Across `style.css`, `main.css`, and
 * 40 page-specific CSS files these names are referenced 226 times.
 *
 * Rather than rewriting every consumer site, we retint the names
 * themselves at the token layer. Any 2-stop gradient that mixed
 * blue→purple now becomes cyan→teal automatically (e.g.
 * `linear-gradient(135deg, var(--accent-blue), var(--accent-purple))`
 * resolves to cyan→teal — visually equivalent to `--dash-accent-grad`).
 *
 * For app.html to pick this up, `tokens.css` MUST be loaded AFTER
 * `style.css` and `main.css` so its `:root` wins the cascade.
 *
 * Files that intentionally want a *real* purple (e.g. `business.css`
 * for `.biz-badge-purple` and `[data-accent="purple"]` stat-card
 * variants) re-declare these vars in their own `:root` block AFTER
 * importing this file — that re-declaration wins, so portal-purple
 * stays portal-purple.
 * ════════════════════════════════════════════════════════════════ */
:root {
  --accent-purple:   #22D3A6;  /* was #8b5cf6 → now teal */
  --accent-blue:     #0EA5E9;  /* was #3b82f6 → now cyan */
  --secondary-color: #22D3A6;  /* was #8b5cf6 → now teal */
  --primary-color:   #0EA5E9;  /* was #3b82f6 → now cyan */
}