/**
 * Design Tokens
 *
 * Centralized design values using CSS custom properties
 * Uses relative units (rem, em, %, vw) instead of fixed pixels
 */

:root {
  /* ========================================
     SPACING SCALE (based on 8px grid)
     Using rem for scalability
     ======================================== */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */
  --space-5xl: 12rem;    /* 192px */

  /* ========================================
     TYPOGRAPHY SCALE
     Base: 16px, using rem for accessibility
     ======================================== */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.5rem;    /* 40px */
  --text-5xl: 3rem;      /* 48px */

  /* Line Heights */
  --leading-tight: 1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.15em;

  /* ========================================
     LAYOUT CONSTRAINTS
     ======================================== */
  --container-max: 90rem;      /* 1440px max */
  --container-narrow: 71.25rem; /* 1140px */
  --container-wide: 100%;

  --content-max: 81.625rem;    /* 1306px */
  --content-narrow: 54.375rem; /* 870px */

  /* ========================================
     RESPONSIVE PADDING
     Mobile-first approach
     ======================================== */
  --padding-page-x: 1rem;      /* Default mobile */
  --padding-section-y: 3rem;
  --padding-component: 1.5rem;

  /* Desktop overrides (applied via media queries) */
  @media (min-width: 768px) {
    --padding-page-x: 4rem;    /* 64px on tablet+ */
    --padding-section-y: 6rem;
  }

  @media (min-width: 1024px) {
    --padding-page-x: 8.5rem;  /* 136px on desktop */
  }

  /* ========================================
     ASPECT RATIOS
     ======================================== */
  --aspect-hero: 16 / 9;
  --aspect-card: 4 / 3;
  --aspect-news-banner: 1440 / 465;
  --aspect-news-image: 922 / 519.09;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-navbar: 9999;
}

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

/* Container */
.container-responsive {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-page-x);
  padding-right: var(--padding-page-x);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-page-x);
  padding-right: var(--padding-page-x);
}

/* Content width constraints */
.content-max {
  max-width: var(--content-max);
}

.content-narrow {
  max-width: var(--content-narrow);
}

/* Responsive text sizes */
.text-responsive-xs { font-size: clamp(0.75rem, 1vw, 0.875rem); }
.text-responsive-sm { font-size: clamp(0.875rem, 1.2vw, 1rem); }
.text-responsive-base { font-size: clamp(1rem, 1.5vw, 1.125rem); }
.text-responsive-lg { font-size: clamp(1.125rem, 2vw, 1.25rem); }
.text-responsive-xl { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.text-responsive-2xl { font-size: clamp(1.5rem, 3vw, 2rem); }
.text-responsive-3xl { font-size: clamp(1.875rem, 4vw, 2.5rem); }
.text-responsive-4xl { font-size: clamp(2.5rem, 5vw, 3rem); }
.text-responsive-5xl { font-size: clamp(3rem, 6vw, 4rem); }

/* Responsive spacing helpers */
.section-spacing-y {
  padding-top: var(--padding-section-y);
  padding-bottom: var(--padding-section-y);
}

.component-padding {
  padding: var(--padding-component);
}

/* ========================================
   RESPONSIVE BREAKPOINTS (Tailwind-style)
   ======================================== */
/*
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px
*/