/* ============================================================
   The Bundle Club — Design System Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Capriola&family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap');

:root {
  /* ---- Brand colours ---- */
  --tbc-inbox:     #fff4f0;  /* lightest — backgrounds */
  --tbc-gold-rush: #f9dca0;  /* warm accent */
  --tbc-sunset:    #efa0a0;  /* soft pink accent */
  --tbc-flash:     #de5739;  /* PRIMARY — orange */
  --tbc-blue-hour: #395e79;  /* cool secondary */
  --tbc-evergreen: #144229;  /* deep green */
  --tbc-cursor:    #231f20;  /* near-black — ink */

  /* ---- Semantic aliases ---- */
  --tbc-bg:        var(--tbc-inbox);
  --tbc-surface:   #ffffff;
  --tbc-ink:       var(--tbc-cursor);
  --tbc-primary:   var(--tbc-flash);
  --tbc-on-primary:#ffffff;

  /* ---- Type families ---- */
  --tbc-font-head: "Dela Gothic One", system-ui, sans-serif;
  --tbc-font-sub:  "Capriola", system-ui, sans-serif;
  --tbc-font-body: "Inclusive Sans", system-ui, sans-serif;

  /* ---- Type scale ---- */
  --tbc-text-xs:   0.75rem;
  --tbc-text-sm:   0.875rem;
  --tbc-text-base: 1rem;
  --tbc-text-lg:   1.25rem;
  --tbc-text-xl:   1.5rem;
  --tbc-text-2xl:  2rem;
  --tbc-text-3xl:  2.75rem;
  --tbc-text-4xl:  3.75rem;

  /* ---- Spacing ---- */
  --tbc-space-1: 4px;
  --tbc-space-2: 8px;
  --tbc-space-3: 12px;
  --tbc-space-4: 16px;
  --tbc-space-5: 24px;
  --tbc-space-6: 32px;
  --tbc-space-7: 40px;
  --tbc-space-8: 48px;

  /* ---- Radii & shadow ---- */
  --tbc-radius-sm: 8px;
  --tbc-radius-md: 14px;
  --tbc-radius-lg: 24px;
  --tbc-radius-pill: 999px;
  --tbc-shadow: 0 4px 0 var(--tbc-cursor);
  --tbc-shadow-soft: 0 6px 20px rgba(35,31,32,0.12);
}

/* ---- Convenience helpers ---- */
.tbc-h1 { font-family: var(--tbc-font-head); font-size: var(--tbc-text-4xl); line-height: 1.02; color: var(--tbc-ink); }
.tbc-h2 { font-family: var(--tbc-font-head); font-size: var(--tbc-text-3xl); line-height: 1.05; color: var(--tbc-ink); }
.tbc-sub { font-family: var(--tbc-font-sub); text-transform: uppercase; letter-spacing: 0.04em; color: var(--tbc-ink); }
.tbc-body { font-family: var(--tbc-font-body); font-size: var(--tbc-text-base); line-height: 1.55; color: var(--tbc-ink); }