/* ============================================
   HOT DOG COMPANY — Design Tokens
   Single source of truth for colors, fonts, and spacing.
   No hardcoded values anywhere else in the project.
   ============================================ */

:root {
  /* ---- Fonts ---- */
  --font-display: 'Shrikhand', cursive;
  --font-body:    'DM Sans', sans-serif;
  --font-utility: 'Oswald', sans-serif;
  --font-accent:  'Chomsky', 'UnifrakturMaguntia', cursive;

  /* ---- Brand Colors ---- */
  --primary:      #B8312A;  /* Hot Dog Red — CTAs, headlines on dark, hero elements */
  --secondary:    #E2A916;  /* Mustard — warm accent, highlights, hover states */
  --dark:         #0F1A2E;  /* Deep Navy — nav, footer, hero sections, poster backgrounds */
  --bg:           #FFFFFF;  /* White — primary background, dominant surface */
  --surface:      #F2F2F2;  /* Light Grey — cards, alternate sections, inset areas */
  --border:       #E0E0E0;  /* Border/divider */
  --text:         #1A1A1C;  /* Charcoal — body text */
  --text-muted:   #6B6B6E;  /* Smoke — captions, metadata, secondary text */
  --accent-pop:   #B8E62E;  /* Relish — optional pop, success states, use sparingly */

  /* ---- Semantic Colors ---- */
  --btn-primary-bg:     var(--primary);
  --btn-primary-text:   #FFFFFF;
  --btn-primary-hover:  #9A2822;  /* Darker red on hover */
  --btn-secondary-bg:   transparent;
  --btn-secondary-text: var(--primary);
  --btn-secondary-border: var(--primary);
  --btn-secondary-hover-bg: var(--primary);
  --btn-secondary-hover-text: #FFFFFF;
  --link-color:         var(--primary);
  --link-hover:         #9A2822;

  /* ---- Text on Dark Backgrounds ---- */
  --text-on-dark:       #FFFFFF;
  --text-muted-on-dark: rgba(255, 255, 255, 0.7);

  /* ---- Spacing Scale ---- */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2.5rem;   /* 40px */
  --space-xl:  4rem;     /* 64px */
  --space-2xl: 6rem;     /* 96px */

  /* ---- Section Padding ---- */
  --section-padding-y: var(--space-xl);
  --section-padding-x: var(--space-sm);

  /* ---- Border Radius ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);

  /* ---- Layout ---- */
  --max-width:  1200px;
  --nav-height: 72px;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ---- Responsive Section Padding ---- */
@media (min-width: 768px) {
  :root {
    --section-padding-y: var(--space-2xl);
    --section-padding-x: var(--space-lg);
  }
}