/**
 * TicketBox Design Tokens
 * Source of truth: ticketbox-design-tokens.md (2026-07-03)
 * Do NOT edit values without updating spec.
 */

:root {
  /* === FONT — single family === */
  --tb-font: 'Montserrat', sans-serif;

  /* === TYPE SCALE — restrained, max 4rem except hero === */
  --tb-text-xs:   0.75rem;    /* 12px */
  --tb-text-sm:   0.875rem;   /* 14px */
  --tb-text-base: 1rem;       /* 16px */
  --tb-text-md:   1.125rem;   /* 18px */
  --tb-text-lg:   1.375rem;   /* 22px */
  --tb-text-xl:   1.625rem;   /* 26px */
  --tb-text-2xl:  2.25rem;    /* 36px */
  --tb-text-3xl:  2.5rem;     /* 40px */
  --tb-text-hero: 4rem;       /* 64px — homepage hero only */

  /* Mobile variants */
  --tb-text-2xl-mobile:  1.5rem;    /* 24px */
  --tb-text-3xl-mobile:  1.875rem;  /* 30px */
  --tb-text-hero-mobile: 2.25rem;   /* 36px */

  /* Line heights */
  --tb-leading-tight:   1.2;
  --tb-leading-snug:    1.3;
  --tb-leading-normal:  1.5;
  --tb-leading-relaxed: 1.7;

  /* === COLORS — teal palette === */
  --tb-cream-50:  #FFFFFF;
  --tb-cream-100: #F5F9F9;
  --tb-cream-200: #E8F0F0;
  --tb-cream-300: #C5D8D8;

  --tb-card-bg:      #FFFFFF;
  --tb-card-bg-tint: #FFFFFF;
  --tb-card-bg-dark: #1A1818;

  /* Primary teal — matches ticketbox.bg exactly (extracted via computed styles) */
  --tb-red-50:  #EBF3F5;
  --tb-red-100: #C7DEE3;
  --tb-red-500: #00677F;
  --tb-red-600: #004355;
  --tb-red-700: #004355;

  /* Hero gradient */
  --tb-hero-from:       #0D4A4A;
  --tb-hero-mid:        #1A7A7A;
  --tb-newsletter-bg:   #F5F9F9;

  --tb-black:       #1A1818;
  --tb-text:        #1A1818;
  --tb-text-muted:  #666666;
  --tb-text-subtle: #999999;
  --tb-text-on-dark:#FFFFFF;

  --tb-success: #2D8B4D;
  --tb-warning: #B8761E;
  --tb-error:   #C8342A;

  /* === SPACING === */
  --tb-space-1:  0.25rem;  /* 4px  */
  --tb-space-2:  0.5rem;   /* 8px  */
  --tb-space-3:  0.75rem;  /* 12px */
  --tb-space-4:  1rem;     /* 16px */
  --tb-space-5:  1.5rem;   /* 24px */
  --tb-space-6:  2rem;     /* 32px */
  --tb-space-7:  3rem;     /* 48px */
  --tb-space-8:  4rem;     /* 64px */
  --tb-space-9:  5rem;     /* 80px */
  --tb-space-10: 6.5rem;   /* 104px */

  /* === RADIUS === */
  --tb-radius-sm:   4px;
  --tb-radius:      6px;
  --tb-radius-md:   8px;
  --tb-radius-lg:   12px;
  --tb-radius-full: 9999px;

  /* === SHADOWS === */
  --tb-shadow-xs: 0 1px 2px rgba(26, 24, 24, 0.04);
  --tb-shadow-sm: 0 2px 4px rgba(26, 24, 24, 0.05),
                  0 1px 2px rgba(26, 24, 24, 0.04);
  --tb-shadow-md: 0 4px 8px rgba(26, 24, 24, 0.06),
                  0 2px 4px rgba(26, 24, 24, 0.04);
  --tb-shadow-lg: 0 12px 24px rgba(26, 24, 24, 0.08),
                  0 4px 8px rgba(26, 24, 24, 0.05);

  /* === TRANSITIONS === */
  --tb-transition-fast: 150ms ease-out;
  --tb-transition:      250ms ease-out;
  --tb-transition-slow: 400ms ease-out;

  /* === LAYOUT === */
  --tb-container-max:     1280px;
  --tb-container-narrow:  760px;
  --tb-container-padding: var(--tb-space-5);

  /* === LEGACY ALIASES — existing CSS uses these; keep for backward compat === */
  /* All resolve to Montserrat via --tb-font */
  --font-display: var(--tb-font);
  --font-serif:   var(--tb-font);
  --font-body:    var(--tb-font);
  --font-mono:    var(--tb-font);

  /* Spacing aliases (old CSS uses --sp-*) */
  --sp-1:  var(--tb-space-1);
  --sp-2:  var(--tb-space-2);
  --sp-3:  var(--tb-space-3);
  --sp-4:  var(--tb-space-4);
  --sp-5:  var(--tb-space-5);
  --sp-6:  var(--tb-space-6);
  --sp-7:  var(--tb-space-7);
  --sp-8:  var(--tb-space-8);
  --sp-9:  var(--tb-space-9);
  --sp-10: var(--tb-space-10);

  /* Radius aliases */
  --radius-sm:   var(--tb-radius-sm);
  --radius:      var(--tb-radius);
  --radius-md:   var(--tb-radius-md);
  --radius-lg:   var(--tb-radius-lg);
  --radius-full: var(--tb-radius-full);

  /* Shadow aliases */
  --shadow-sm: var(--tb-shadow-sm);
  --shadow-md: var(--tb-shadow-md);
  --shadow-lg: var(--tb-shadow-lg);

  /* Transition aliases */
  --t-fast: var(--tb-transition-fast);
  --t:      var(--tb-transition);
  --t-slow: var(--tb-transition-slow);
}

@media (min-width: 768px) {
  :root {
    --tb-container-padding: var(--tb-space-6);
  }
}