/* Kosavi Industries — Design System Tokens & Base Styles */

/* ==========================================================================
   SECTION 1 — CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
  /* --- Colour Palette: Primary (Red) --- */
  --red-900: #7B0000;
  --red-700: #B91C1C;
  --red-600: #DC2626;
  --red-500: #EF4444;
  --red-100: #FEE2E2;
  --red-50:  #FFF5F5;

  /* --- Colour Palette: Neutral (Grey) --- */
  --grey-950: #0A0A0A;
  --grey-900: #111111;
  --grey-800: #1F1F1F;
  --grey-600: #4B4B4B;
  --grey-400: #9CA3AF;
  --grey-200: #E5E7EB;
  --grey-100: #F3F4F6;
  --grey-50:  #F9FAFB;
  --white:    #FFFFFF;

  /* --- Typography --- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (rem) */
  --text-display:      3.5rem;    /* 56px — Hero headline */
  --text-h1:           2.75rem;   /* 44px — Page titles */
  --text-h2:           2.25rem;   /* 36px — Section headings */
  --text-h3:           1.75rem;   /* 28px — Card headings, sub-sections */
  --text-h4:           1.375rem;  /* 22px — Minor section labels */
  --text-lead:         1.125rem;  /* 18px — Hero subheadline, intro paragraphs */
  --text-body:         1rem;      /* 16px — General body copy */
  --text-small:        0.875rem;  /* 14px — Captions, labels, secondary text */
  --text-xs:           0.75rem;   /* 12px — Tags, badges, eyebrow labels */
  --text-metric:       3.25rem;   /* 52px — Statistics / trust numbers */
  --text-metric-label: 0.9375rem; /* 15px — Label below metric numbers */

  /* --- Spacing (8px base grid) --- */
  --space-1: 8px;    /* Micro gap — icon-to-text, inline elements */
  --space-2: 16px;   /* Small — button padding Y, form field gaps */
  --space-3: 24px;   /* Medium — card internal padding, list item gaps */
  --space-4: 32px;   /* Standard — card gap, column gutter */
  --space-5: 48px;   /* Section sub-spacing */
  --space-6: 64px;   /* Section top/bottom padding (desktop) */
  --space-7: 96px;   /* Large section padding (hero, major breaks) */
  --space-8: 128px;  /* Extra-large — hero section vertical padding */

  /* --- Layout --- */
  --container-max:         1280px;
  --container-pad-mobile:  24px;
  --container-pad-tablet:  48px;
  --container-pad-desktop: 80px;

  /* --- Header --- */
  --header-height:        72px;
  --header-height-mobile: 64px;
  --utility-bar-height:   40px;
}


/* ==========================================================================
   SECTION 2 — CSS RESET
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  color: var(--grey-600);
  background-color: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  display: block;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}


/* ==========================================================================
   SECTION 3 — BASE TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  color: var(--grey-950);
}

h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.35;
}

p {
  line-height: 1.65;
}


/* ==========================================================================
   SECTION 4 — LAYOUT UTILITIES
   ========================================================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad-desktop);
  padding-right: var(--container-pad-desktop);
}

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Flex helpers */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ==========================================================================
   SECTION 5 — SECTION TEMPLATES
   ========================================================================== */

.section {
  padding: var(--space-7) 0; /* 96px top and bottom */
}

.section--dark {
  background: var(--grey-950);
}

.section--light {
  background: var(--grey-50);
}

.section--red-tint {
  background: var(--red-50);
  border-top: 4px solid var(--red-600);
}

/* Section header block */
.section__header {
  margin-bottom: var(--space-5);
}

.section__header--center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-5);
}

.section__heading {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--grey-950);
  line-height: 1.2;
}

.section--dark .section__heading {
  color: var(--white);
}

.section__intro {
  font-size: var(--text-lead);
  color: var(--grey-600);
  line-height: 1.6;
  margin-top: 16px;
}

.section--dark .section__intro {
  color: var(--grey-400);
}


/* ==========================================================================
   SECTION 6 — RESPONSIVE MEDIA QUERIES (DESKTOP-FIRST)
   ========================================================================== */

/* lg: 1280px — Max-width container active (lg → xl transition) */
@media (max-width: 1280px) {
  /* Contained by --container-max; no additional overrides needed at this level */
}

/* md: 1024px — Switch to tablet layout, collapse multi-column grids */
@media (max-width: 1024px) {
  .container {
    padding-left: var(--container-pad-tablet);
    padding-right: var(--container-pad-tablet);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* sm: 768px — Stacked single-column layouts */
@media (max-width: 768px) {
  .container {
    padding-left: var(--container-pad-mobile);
    padding-right: var(--container-pad-mobile);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .section {
    padding: var(--space-6) 0; /* 64px on tablet */
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }
}

/* xs: 480px — Single column, tight spacing */
@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}

/* Accessibility: Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}