/* Design Tokens - Color Scheme and Typography */

/* ===========================================
   COLOR PALETTE
   =========================================== */

/* Primary Colors (60%) */
:root {
  --primary-orange: #E95420;
  --secondary-red: #EAE8F8;
  
  /* Accent Colors (10%) */
  --accent-sunset-yellow: #F6C177;
  --accent-warm-beige: #FDF5ED;
  --accent-charcoal-black: #1E1E1E;
  
  /* Page Background */
  --page-white: #FFFFFF;
  
  /* ===========================================
     TYPOGRAPHY - MONTSERRAT
     =========================================== */
  
  /* Font Import - Montserrat */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
  
  /* Typography Scale */
  --font-family-primary: 'Montserrat', sans-serif;
  
  /* Font Sizes and Weights */
  --h1-size: 64px;
  --h1-weight: 700; /* Bold */
  
  --h2-size: 40px;
  --h2-weight: 600; /* SemiBold */
  
  --h3-size: 28px;
  --h3-weight: 500; /* Medium */
  
  --body-size: 16px;
  --body-weight: 400; /* Regular */
  
  --cta-size: 16px;
  --cta-weight: 600; /* SemiBold */
  --cta-transform: uppercase;
  
  /* ===========================================
     TYPOGRAPHY CLASSES
     =========================================== */
  
  .h1 {
    font-family: var(--font-family-primary);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: 1.2;
  }
  
  .h2 {
    font-family: var(--font-family-primary);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: 1.3;
  }
  
  .h3 {
    font-family: var(--font-family-primary);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: 1.4;
  }
  
  .body-text {
    font-family: var(--font-family-primary);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: 1.6;
  }
  
  .cta-button {
    font-family: var(--font-family-primary);
    font-size: var(--cta-size);
    font-weight: var(--cta-weight);
    text-transform: var(--cta-transform);
    letter-spacing: 0.5px;
  }
}

/* ===========================================
   COLOR UTILITY CLASSES
   =========================================== */

.bg-primary-orange { background-color: var(--primary-orange); }
.bg-secondary-red { background-color: var(--secondary-red); }
.bg-sunset-yellow { background-color: var(--accent-sunset-yellow); }
.bg-warm-beige { background-color: var(--accent-warm-beige); }
.bg-charcoal-black { background-color: var(--accent-charcoal-black); }
.bg-page-white { background-color: var(--page-white); }

.text-primary-orange { color: var(--primary-orange); }
.text-secondary-red { color: var(--secondary-red); }
.text-sunset-yellow { color: var(--accent-sunset-yellow); }
.text-warm-beige { color: var(--accent-warm-beige); }
.text-charcoal-black { color: var(--accent-charcoal-black); }
.text-page-white { color: var(--page-white); }