/* =============================================================
   HOTBOX SALES ENGINE — PORTAL TOKENS  (THE RE-SKIN SURFACE)
   -------------------------------------------------------------
   This file maps the portal's component tokens onto the official
   Hotbox brand tokens (--hb-*) shipped by the Brand bot
   (05-brand/design-tokens, vendored here as brand-tokens.css).

   To re-skin: edit brand-tokens.css (the brand source of truth),
   or override a specific --hb-* / portal token below. Components
   never hardcode brand values — they read these tokens.

   Stage colors are tokens named  --stage-<id>  (id matches config.js
   stages). Product colors are  --product-<id>  (pokemon/vape/both).
   ============================================================= */
@import url("brand-tokens.css");   /* Hotbox --hb-* palette (dark by default) */

:root {
  /* ---------- map portal component tokens -> Hotbox brand ---------- */
  --brand-primary:      var(--hb-blue);
  --brand-primary-600:  var(--hb-blue-press);
  --brand-on-primary:   var(--hb-primary-fg);
  --brand-accent:       var(--hb-blue-bright);

  --bg:            var(--hb-bg);
  --surface:       var(--hb-bg-elevated);
  --surface-2:     var(--hb-surface-2);
  --sidebar-bg:    var(--hb-ink-deep);
  --sidebar-ink:   var(--hb-text);
  --sidebar-muted: var(--hb-text-muted);
  --border:        var(--hb-border);
  --border-strong: var(--hb-border-strong);

  --text:        var(--hb-fg);
  --text-muted:  var(--hb-fg-muted);
  --text-faint:  var(--hb-text-faint);

  --success: var(--hb-success);
  --warning: var(--hb-warning);
  --danger:  var(--hb-danger);
  --info:    var(--hb-blue);

  /* ---------- pipeline stage colors (ids match config.js) ---------- */
  --stage-sourced:     var(--hb-text-faint);
  --stage-contacted:   var(--hb-blue-deep);
  --stage-pitched:     var(--hb-blue);
  --stage-followup:    var(--hb-amber);
  --stage-verbal_yes:  var(--hb-purple);
  --stage-signed:      var(--hb-teal);
  --stage-installed:   var(--hb-blue-bright);
  --stage-live:        var(--hb-green);
  --stage-lost:        var(--hb-ember);
  --stage-onhold:      #94A3B8;

  /* ---------- product line colors ---------- */
  --product-pokemon:   var(--hb-blue);
  --product-vape:      var(--hb-purple);
  --product-both:      var(--hb-teal);

  /* ---------- typography ---------- */
  --font-sans:    var(--hb-font-sans);
  --font-display: var(--hb-font-display);
  --font-mono:    var(--hb-font-mono);

  --fs-xs: var(--hb-text-xs);
  --fs-sm: var(--hb-text-sm);
  --fs-base: 0.9375rem;
  --fs-md: var(--hb-text-base);
  --fs-lg: 1.25rem;
  --fs-xl: var(--hb-text-xl);
  --fs-2xl: var(--hb-text-2xl);

  --fw-normal: var(--hb-w-regular);
  --fw-medium: var(--hb-w-medium);
  --fw-semibold: var(--hb-w-semibold);
  --fw-bold: var(--hb-w-bold);

  /* ---------- radii / shadows ---------- */
  --radius-sm: var(--hb-radius-sm);
  --radius-md: var(--hb-radius-md);
  --radius-lg: var(--hb-radius-lg);
  --radius-pill: var(--hb-radius-pill);

  --shadow-sm: var(--hb-shadow-sm);
  --shadow-md: var(--hb-shadow-md);
  --shadow-lg: var(--hb-shadow-lg);

  /* ---------- layout / motion ---------- */
  --sidebar-w: 252px;
  --topbar-h: 60px;
  --maxw: var(--hb-maxw-content);
  --t-fast: 120ms ease;
  --t-med: 200ms ease;
}