/* ============================================================
   BSH Design Tokens — single source of truth for all BSH apps
   ------------------------------------------------------------
   Consumers: floorplan (v3.0+), ev-consultation (v2.0+),
              estimate-tool, future pitch-generator UI
   Import order: tokens.css FIRST, then app-specific styles.
   Usage: var(--bsh-bg), var(--bsh-accent), var(--bsh-font-base)
   ------------------------------------------------------------
   Rules (from CLAUDE.md):
   - Base font >= 16px (20px desktop preferred for BSH apps)
   - Dark theme default
   - Large touch targets (min 44px mobile)
   ============================================================ */

:root {
  /* ---------- Surfaces (dark theme) ---------- */
  --bsh-bg:     #0f1923;   /* app background */
  --bsh-bg2:    #162332;   /* header / progress bar */
  --bsh-bg3:    #1e2d40;   /* panels / cards */
  --bsh-bg4:    #253d54;   /* hover / raised */
  --bsh-bg5:    #1a2332;   /* sidebars / status bars */

  /* ---------- Text ---------- */
  --bsh-text:   #e2e8f0;   /* primary */
  --bsh-text2:  #cbd5e1;   /* secondary */
  --bsh-text3:  #94a3b8;   /* muted */
  --bsh-text4:  #64748b;   /* placeholder / disabled */

  /* ---------- Brand ---------- */
  --bsh-accent:   #3b82f6; /* primary blue */
  --bsh-accent2:  #2563eb; /* hover / pressed */
  --bsh-accent3:  #60a5fa; /* highlight / link */
  --bsh-accent4:  #1e3a8a; /* inverse / active tab */
  --bsh-gold:     #d97706; /* BSH gold (primary) */
  --bsh-gold2:    #f59e0b; /* gold hover / amber */
  --bsh-gold3:    #b45309; /* gold pressed */
  --bsh-purple:   #7c3aed; /* optional accent */
  --bsh-purple2:  #6d28d9;

  /* ---------- Semantic ---------- */
  --bsh-green:    #22c55e;
  --bsh-green2:   #4ade80;
  --bsh-green3:   #059669; /* button bg */
  --bsh-amber:    #f59e0b;
  --bsh-amber2:   #fbbf24;
  --bsh-red:      #ef4444;
  --bsh-red2:     #dc2626;
  --bsh-red3:     #b91c1c;

  /* ---------- Borders ---------- */
  --bsh-border:   #2d4a63;
  --bsh-border2:  #2d4156;
  --bsh-border3:  #3b5068;

  /* ---------- Gradients (reusable) ---------- */
  --bsh-grad-header: linear-gradient(135deg, var(--bsh-bg2), var(--bsh-bg3));
  --bsh-grad-header-dark: linear-gradient(135deg, #1a2332, #1e3a5f);
  --bsh-grad-gold:   linear-gradient(135deg, var(--bsh-gold), var(--bsh-gold3));

  /* ---------- Radius ---------- */
  --bsh-radius-xs: 4px;
  --bsh-radius-sm: 6px;
  --bsh-radius:    8px;
  --bsh-radius-md: 10px;
  --bsh-radius-lg: 12px;
  --bsh-radius-xl: 16px;

  /* ---------- Shadow ---------- */
  --bsh-shadow-sm: 0 2px 4px rgba(0,0,0,.25);
  --bsh-shadow:    0 4px 16px rgba(0,0,0,.4);
  --bsh-shadow-lg: 0 20px 60px rgba(0,0,0,.5);

  /* ---------- Typography ----------
     CLAUDE.md rule: min 16px base, 20px desktop preferred.
     These are app-readable via var(--bsh-font-base). */
  --bsh-font-family: 'Segoe UI', system-ui, -apple-system, 'Tahoma', 'Geneva', sans-serif;
  --bsh-font-xs:     12px;
  --bsh-font-sm:     14px;
  --bsh-font-base:   16px;   /* minimum */
  --bsh-font-md:     18px;
  --bsh-font-lg:     20px;
  --bsh-font-xl:     24px;
  --bsh-font-2xl:    32px;
  --bsh-line-tight:  1.3;
  --bsh-line-base:   1.5;
  --bsh-line-relaxed:1.65;

  /* ---------- Spacing ---------- */
  --bsh-space-1: 4px;
  --bsh-space-2: 8px;
  --bsh-space-3: 12px;
  --bsh-space-4: 16px;
  --bsh-space-5: 20px;
  --bsh-space-6: 24px;
  --bsh-space-8: 32px;

  /* ---------- Touch targets ---------- */
  --bsh-touch-min: 44px;

  /* ---------- Transitions ---------- */
  --bsh-t-fast: .15s;
  --bsh-t:      .2s;
  --bsh-t-slow: .3s;

  /* ---------- v2 design language (Lightshop "lv2") ----------
     Promoted from public/lightshop/css/landing-v2.css so any surface
     that wants the premium-design feel (cream + Cormorant + warmer
     gold) can reach for these without re-declaring. v1 navy/sans-serif
     stay default; lv2 is opt-in via body.landing-v2 or per-surface
     overrides. */
  --lv2-cream:        #f4ede0;
  --lv2-cream-soft:   #ebe4d6;
  --lv2-ink:          #1a1614;
  --lv2-ink-soft:     #4a423d;
  --lv2-gold:         #c98a2e;
  --lv2-gold-deep:    #a06d1c;
  --lv2-rule:         rgba(26, 22, 20, 0.12);
  --lv2-shadow:       0 24px 64px rgba(0, 0, 0, 0.18);
  --lv2-font-display: 'Cormorant Garamond', Georgia, serif;
}

/* ------------------------------------------------------------
   Backwards-compat aliases (without bsh- prefix).
   Existing files that use var(--bg), var(--accent), etc. will
   keep working. New code should use --bsh-* tokens directly.
   ------------------------------------------------------------ */
:root {
  --bg:      var(--bsh-bg);
  --bg2:     var(--bsh-bg2);
  --bg3:     var(--bsh-bg3);
  --bg4:     var(--bsh-bg4);
  --text:    var(--bsh-text);
  --text2:   var(--bsh-text3);
  --text3:   var(--bsh-text4);
  --accent:  var(--bsh-accent);
  --accent2: var(--bsh-accent2);
  --gold:    var(--bsh-gold);
  --gold2:   var(--bsh-gold2);
  --green:   var(--bsh-green);
  --amber:   var(--bsh-amber);
  --red:     var(--bsh-red);
  --border:  var(--bsh-border);
  --radius:  var(--bsh-radius-lg);
}

/* ------------------------------------------------------------
   Global base — only applies if .bsh-scope class is set on
   <html> or <body>. Apps opt-in to avoid clobbering third-
   party styles (Tailwind in Next.js root, Three.js canvases).
   ------------------------------------------------------------ */
html.bsh-scope {
  font-size: var(--bsh-font-base);
  scroll-behavior: smooth;
}
@media (min-width: 768px) {
  html.bsh-scope { font-size: var(--bsh-font-lg); }   /* 20px desktop */
}

body.bsh-scope {
  font-family: var(--bsh-font-family);
  background: var(--bsh-bg);
  color: var(--bsh-text);
  line-height: var(--bsh-line-base);
  min-height: 100vh;
}

/* ------------------------------------------------------------
   Utility classes (opt-in, prefixed) — for quick use without
   writing per-app CSS every time.
   ------------------------------------------------------------ */
.bsh-btn {
  padding: var(--bsh-space-2) var(--bsh-space-4);
  background: var(--bsh-accent);
  color: #fff;
  border: none;
  border-radius: var(--bsh-radius-sm);
  font-size: var(--bsh-font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bsh-t-fast);
  min-height: var(--bsh-touch-min);
}
.bsh-btn:hover   { background: var(--bsh-accent2); }
.bsh-btn:disabled{ background: var(--bsh-text4); cursor: not-allowed; }

.bsh-btn-gold { background: var(--bsh-grad-gold); }
.bsh-btn-gold:hover { opacity: .9; }

.bsh-card {
  background: var(--bsh-bg3);
  border: 1px solid var(--bsh-border);
  border-radius: var(--bsh-radius-lg);
  padding: var(--bsh-space-4);
}