/**
 * Quickbox Express - Design Tokens & Variables
 * Extracted directly from Figma design
 */
:root {
  /* Brand Colors */
  --primary-color: #eb4102;
  --primary-color-hover: #d33800;
  --secondary-color: #181919;
  --accent-gold: #fdac15;
  --accent-gold-hover: #e59b0f;

  /* Neutral Colors */
  --neutral-1: #181919;
  --neutral-2: #2e2f30;
  --neutral-3: #5c5d5e;
  --neutral-4: #a9a9a9;
  --neutral-5: #c7cbcd;
  --neutral-6: #e1e3e4;
  --neutral-7: #f3f3f3;
  --neutral-8: #ffffff;
  --cards-bg: #f5f7f9;

  /* Typography Families */
  --font-heading: 'Archivo Black', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-text: 'Lato', sans-serif;
  --font-cta: 'Manrope', sans-serif;

  /* Display Typography */
  --font-size-display-large: 72px;
  --line-height-display-large: 80px;
  --letter-spacing-display-large: -2px;

  --font-size-display-medium: 56px;
  --line-height-display-medium: 64px;
  --letter-spacing-display-medium: -1.5px;

  --font-size-display-small: 44px;
  --line-height-display-small: 52px;
  --letter-spacing-display-small: -1px;

  /* Heading Typography */
  --font-size-heading-h2: 32px;
  --line-height-heading-h2: 40px;
  --letter-spacing-heading-h2: -0.5px;

  --font-size-heading-h3: 28px;
  --line-height-heading-h3: 36px;
  --letter-spacing-heading-h3: 0px;

  --font-size-heading-h5: 20px;
  --line-height-heading-h5: 28px;
  --letter-spacing-heading-h5: 0px;

  /* Body Typography */
  --font-size-body-large: 18px;
  --line-height-body-large: 28px;
  --letter-spacing-body-large: 0px;

  --font-size-body-medium: 16px;
  /* 16px Regular */
  --font-weight-body-medium: 400;
  --font-size-body-regular: 16px;
  --font-weight-regular: 400;
  --line-height-body-regular: 24px;
  --line-height-body-medium: 24px;
  --letter-spacing-body-medium: 0px;

  --font-size-body-small: 14px;
  --line-height-body-small: 20px;
  --letter-spacing-body-small: 0px;

  /* Button Typography */
  --font-size-button-large: 16px;
  --line-height-button-large: 24px;
  --letter-spacing-button-large: 0.5px;

  --font-size-button-medium: 14px;
  --line-height-button-medium: 20px;
  --letter-spacing-button-medium: 0.5px;

  /* Gradients */
  --gradient-orange: linear-gradient(-54.6deg, #fdac15 13.87%, #eb4102 104.79%);

  /* Border Radii */
  --radius-pill: 89.686px;
  --radius-circle: 50%;
  --radius-card-sm: 8px;
  --radius-card-lg: 32px;
  --radius-input: 70px;

  /* Layout */
  --header-height: 106.4px;
  --container-max-width: 1608px;
  --page-max-width: 1728px;

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}