/* ===== CSS Variables - Measy Brand ===== */
:root {
  /* Colors */
  --color-primary: #6366F1;
  --color-primary-dark: #4F46E5;
  --color-primary-light: #818CF8;
  --color-orange: #F04E23;
  --color-sky: #6BC5E8;
  --color-green: #2DD881;
  --color-yellow: #E8E81C;
  --color-purple: #A855F7;
  --color-pink: #EC4899;

  --color-bg-light: #F8F7F4;
  --color-bg-cream: #FDF9F3;
  --color-text: #1F2937;
  --color-text-light: #6B7280;
  --color-white: #FFFFFF;

  /* Fonts */
  --font-logo: 'Righteous', cursive;
  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Easings */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* ===== Responsive Scale System ===== */
  /* Base scale factor - adjusts based on viewport */
  --scale: 1;
  --scale-sm: 0.85;
  --scale-xs: 0.7;

  /* Spacing scale */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2rem, 5vw, 4rem);
  --space-2xl: clamp(3rem, 8vw, 6rem);

  /* Typography scale */
  --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.8vw, 1rem);
  --text-base: clamp(1rem, 2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 2.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 3vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 4vw, 2rem);
  --text-3xl: clamp(2rem, 5vw, 3rem);
  --text-4xl: clamp(2.5rem, 6vw, 4rem);
  --text-5xl: clamp(3rem, 8vw, 5rem);
  --text-6xl: clamp(4rem, 12vw, 8rem);
  --text-hero: clamp(5rem, 18vw, 14rem);

  /* Element sizes */
  --size-btn: clamp(44px, 5vw, 56px);
  --size-icon: clamp(20px, 3vw, 28px);
  --size-card-padding: clamp(1.5rem, 4vw, 3rem);
  --size-container: min(1400px, 95vw);
  --size-rive-hero: clamp(300px, 50vw, 672px);
  --size-rive-section: clamp(300px, 45vw, 600px);
  --size-rive-final: clamp(350px, 50vw, 700px);
}

/* ===== Breakpoint-specific scale adjustments ===== */
/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  :root {
    --scale: 0.65;
    --size-rive-hero: clamp(200px, 70vw, 300px);
    --size-rive-section: clamp(200px, 80vw, 350px);
    --size-rive-final: clamp(250px, 85vw, 400px);
  }
}

/* Small devices (phones in landscape, small tablets) */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --scale: 0.75;
    --size-rive-hero: clamp(250px, 60vw, 400px);
    --size-rive-section: clamp(280px, 70vw, 450px);
    --size-rive-final: clamp(300px, 75vw, 500px);
  }
}

/* Medium devices (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --scale: 0.85;
    --size-rive-hero: clamp(350px, 45vw, 500px);
    --size-rive-section: clamp(350px, 50vw, 500px);
    --size-rive-final: clamp(400px, 55vw, 550px);
  }
}

/* Large devices (desktops) */
@media (min-width: 1025px) and (max-width: 1440px) {
  :root {
    --scale: 0.95;
  }
}

/* Extra large devices (large desktops, TVs) */
@media (min-width: 1441px) {
  :root {
    --scale: 1;
  }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
  :root {
    --scale: 1.1;
    --size-rive-hero: clamp(600px, 40vw, 800px);
    --size-rive-section: clamp(500px, 35vw, 700px);
    --size-rive-final: clamp(600px, 40vw, 850px);
  }
}

/* ===== Utility Classes ===== */
.brand-color {
  color: var(--color-primary);
}

.measy-logo-text {
  font-family: var(--font-logo);
  color: var(--color-primary);
  font-size: 110%;
}

.highlight-text {
  color: var(--color-primary);
  font-size: 110%;
  font-weight: bold;
}

.highlight-bg {
  color: var(--color-primary);
}

.nowrap {
  white-space: nowrap;
}

/* ===== Reset ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-primary);
  color: var(--color-text);
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===== Scroll Progress ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--color-green);
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
}

/* ===== Hand-drawn SVG line styles ===== */
.hand-drawn-line {
  stroke: var(--color-primary);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}