/* ============================================================
   TBB Pages — Design Tokens (CSS Custom Properties)
   All values are consumed by common.css, utilities.css, and
   every page-specific stylesheet.
   ============================================================ */

:root {

  /* ── Brand Blue Palette ─────────────────────────────────── */
  --tbb-blue-950:  #0c1a4d;
  --tbb-blue-900:  #1e3a8a;
  --tbb-blue-800:  #1e40af;
  --tbb-blue-700:  #1d4ed8;
  --tbb-blue-600:  #2563eb;
  --tbb-blue-500:  #3b82f6;
  --tbb-blue-400:  #60a5fa;
  --tbb-blue-300:  #93c5fd;
  --tbb-blue-200:  #bfdbfe;
  --tbb-blue-100:  #dbeafe;
  --tbb-blue-50:   #eff6ff;

  /* ── Accent Colors ──────────────────────────────────────── */
  --tbb-orange:        #f97316;
  --tbb-orange-dark:   #ea580c;
  --tbb-orange-light:  #fff7ed;

  --tbb-purple:        #7c3aed;
  --tbb-purple-dark:   #6d28d9;
  --tbb-purple-light:  #f5f3ff;

  --tbb-teal:          #0d9488;
  --tbb-teal-dark:     #0f766e;
  --tbb-teal-light:    #f0fdfa;

  --tbb-green:         #16a34a;
  --tbb-green-light:   #f0fdf4;

  /* ── Neutrals ───────────────────────────────────────────── */
  --tbb-white:    #ffffff;
  --tbb-gray-50:  #f8fafc;
  --tbb-gray-100: #f1f5f9;
  --tbb-gray-200: #e2e8f0;
  --tbb-gray-300: #cbd5e1;
  --tbb-gray-400: #94a3b8;
  --tbb-gray-500: #64748b;
  --tbb-gray-600: #475569;
  --tbb-gray-700: #334155;
  --tbb-gray-800: #1e293b;
  --tbb-gray-900: #0f172a;

  /* ── Typography ─────────────────────────────────────────── */
  --tbb-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale using clamp() for smooth desktop↔mobile scaling */
  --tbb-text-xs:   0.75rem;                        /* 12px */
  --tbb-text-sm:   0.875rem;                       /* 14px */
  --tbb-text-base: 1rem;                           /* 16px */
  --tbb-text-lg:   1.125rem;                       /* 18px */
  --tbb-text-xl:   1.25rem;                        /* 20px */
  --tbb-text-2xl:  clamp(1.25rem, 2.5vw, 1.5rem);   /* 20→24px */
  --tbb-text-3xl:  clamp(1.5rem,  3vw,   1.875rem); /* 24→30px */
  --tbb-text-4xl:  clamp(1.75rem, 3.5vw, 2.25rem);  /* 28→36px */
  --tbb-text-5xl:  clamp(2rem,    4.5vw, 3rem);      /* 32→48px */
  --tbb-text-6xl:  clamp(2.25rem, 5.5vw, 3.75rem);  /* 36→60px */

  --tbb-weight-normal:    400;
  --tbb-weight-medium:    500;
  --tbb-weight-semibold:  600;
  --tbb-weight-bold:      700;
  --tbb-weight-extrabold: 800;

  --tbb-leading-tight:   1.2;
  --tbb-leading-snug:    1.375;
  --tbb-leading-normal:  1.5;
  --tbb-leading-relaxed: 1.7;

  /* ── Spacing (4px base grid) ────────────────────────────── */
  --tbb-s-1:   0.25rem;   /* 4px  */
  --tbb-s-2:   0.5rem;    /* 8px  */
  --tbb-s-3:   0.75rem;   /* 12px */
  --tbb-s-4:   1rem;      /* 16px */
  --tbb-s-5:   1.25rem;   /* 20px */
  --tbb-s-6:   1.5rem;    /* 24px */
  --tbb-s-8:   2rem;      /* 32px */
  --tbb-s-10:  2.5rem;    /* 40px */
  --tbb-s-12:  3rem;      /* 48px */
  --tbb-s-16:  4rem;      /* 64px */
  --tbb-s-20:  5rem;      /* 80px */
  --tbb-s-24:  6rem;      /* 96px */
  --tbb-s-32:  8rem;      /* 128px */

  /* ── Radius ─────────────────────────────────────────────── */
  --tbb-r-sm:   0.25rem;
  --tbb-r-md:   0.5rem;
  --tbb-r-lg:   0.75rem;
  --tbb-r-xl:   1rem;
  --tbb-r-2xl:  1.5rem;
  --tbb-r-3xl:  2rem;
  --tbb-r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --tbb-shadow-xs:   0 1px 2px 0 rgb(0 0 0 / .05);
  --tbb-shadow-sm:   0 2px 4px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .06);
  --tbb-shadow-md:   0 4px 8px -2px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .06);
  --tbb-shadow-lg:   0 12px 24px -4px rgb(0 0 0 / .12), 0 4px 8px -2px rgb(0 0 0 / .06);
  --tbb-shadow-xl:   0 24px 48px -8px rgb(0 0 0 / .15);
  --tbb-shadow-blue: 0 4px 14px 0 rgb(37 99 235 / .35);
  --tbb-shadow-blue-lg: 0 8px 28px 0 rgb(37 99 235 / .4);

  /* ── Transitions ────────────────────────────────────────── */
  --tbb-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --tbb-t-fast:     150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tbb-t-base:     250ms cubic-bezier(0.4, 0, 0.2, 1);
  --tbb-t-slow:     400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --tbb-container:     1280px;
  --tbb-container-px:  1.5rem;

  /* Section vertical rhythm — shrinks on mobile */
  --tbb-section-py:    5rem;
}

/* Responsive token overrides */
@media (max-width: 1024px) {
  :root { --tbb-section-py: 4rem; }
}

@media (max-width: 768px) {
  :root {
    --tbb-container-px: 1rem;
    --tbb-section-py:   3rem;
  }
}

@media (max-width: 480px) {
  :root { --tbb-section-py: 2.5rem; }
}