/* ═══════════════════════════════════════════════════════════════
   BTB DESIGN SYSTEM — Design Tokens v1.0
   Better Than Boxes · betterthanboxes.co
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── COLORS ─── */
  --btb-bg:           #0a0a0a;   /* Page background */
  --btb-surface:      #111111;   /* Card / panel surface */
  --btb-surface2:     #141414;   /* Elevated surface / teaser block */
  --btb-border:       #222222;   /* Default border */
  --btb-border2:      #2a2a2a;   /* Subtle border / input border */
  --btb-text:         #ffffff;   /* Primary text */
  --btb-muted:        #999999;   /* Secondary / body text */
  --btb-subtle:       #666666;   /* Tertiary / placeholder text */
  --btb-light-bg:     #f5f5f5;   /* Light-mode surface (inverted sections) */
  --btb-light-text:   #0a0a0a;   /* Light-mode text */

  /* ─── TYPOGRAPHY ─── */
  --btb-font-headline:   'Oswald', sans-serif;
  --btb-font-body:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --btb-text-display:  clamp(4.5rem, 18vw, 9rem);  /* Hero h1 */
  --btb-text-h1:       clamp(2.8rem, 7vw, 5rem);   /* Section h2 */
  --btb-text-h2:       2.5rem;                      /* Sub-section heading */
  --btb-text-h3:       1.7rem;                      /* Teaser title */
  --btb-text-h4:       1.5rem;                      /* Card/step title (headline) */
  --btb-text-lead:     1.05rem;                     /* Section lead paragraph */
  --btb-text-body:     1rem;                        /* Body copy */
  --btb-text-small:    0.88rem;                     /* Card body, footnotes */
  --btb-text-meta:     0.78rem;                     /* Nav wordmark, btn label */
  --btb-text-label:    0.65rem;                     /* Overline, badge, tag */
  --btb-text-eyebrow:  0.62rem;                     /* Pricing eyebrow */

  /* Font weights */
  --btb-weight-light:  300;
  --btb-weight-regular: 400;
  --btb-weight-bold:   700;
  --btb-weight-black:  900;

  /* Line heights */
  --btb-lh-tight:   0.88;
  --btb-lh-heading: 0.9;
  --btb-lh-body:    1.6;
  --btb-lh-lead:    1.7;
  --btb-lh-loose:   1.8;

  /* Letter spacing */
  --btb-ls-display:  -0.01em;
  --btb-ls-overline:  0.18em;
  --btb-ls-badge:     0.12em;
  --btb-ls-label:     0.1em;
  --btb-ls-btn:       0.15em;
  --btb-ls-meta:      0.06em;

  /* ─── SPACING ─── */
  --btb-section-padding:  6rem 2rem;
  --btb-section-padding-sm: 4rem 1.25rem;
  --btb-max-width:        1100px;
  --btb-nav-height:       56px;
  --btb-card-padding:     2rem;
  --btb-card-gap:         1.5rem;
  --btb-section-gap:      3.5rem;

  /* ─── BORDERS ─── */
  --btb-border-width:     1px;
  --btb-border-default:   1px solid var(--btb-border);
  --btb-border-subtle:    1px solid var(--btb-border2);
  --btb-stroke-outlined:  2px;

  /* ─── EFFECTS ─── */
  --btb-transition-default: 0.2s;
  --btb-transition-reveal:  0.55s ease;
  --btb-reveal-offset:      24px;

  /* ─── Z-INDEX ─── */
  --btb-z-nav:    100;
  --btb-z-modal:  200;
  --btb-z-toast:  300;

  /* ─── CHAT WIDGET ─── */
  --btb-chat-bg:            #111111;
  --btb-chat-bubble-agent:  #141414;
  --btb-chat-bubble-user:   #1a3a28;
  --btb-chat-border:        #222222;
  --btb-chat-fab-size:      56px;
  --btb-chat-panel-w:       360px;
  --btb-chat-panel-h:       520px;

  /* ─── TIMELINE ─── */
  --btb-timeline-line:      #222222;
  --btb-timeline-dot-done:  #3a9b62;
  --btb-timeline-dot-todo:  #333333;
  --btb-timeline-dot-size:  10px;

  /* ─── SEMANTIC EXTENDED ─── */
  --btb-green-dim:          #1a3a28;
  --btb-green-border:       #1f5c38;
  --btb-blue:               #3b82f6;
  --btb-blue-dim:           #1a2a4a;

  /* ─── MOTION ─── */
  --btb-transition:         150ms ease;
  --btb-transition-reveal:  550ms ease;
}