/* ============================================================
   iKardia — Brand Variables & CSS Reset
   Edit this file to update brand colors, fonts, and spacing
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-navy:        #1A2144;   /* Primary dark navy  */
  --color-navy-dark:   #111829;   /* Darker navy (hero bg, footer) */
  --color-navy-mid:    #1E2C55;   /* Mid navy (cards, sections) */
  --color-blue:        #3B5FD4;   /* Brand blue (accents, links) */
  --color-blue-mid:    #4A7FD5;   /* Lighter blue */
  --color-teal:        #3DD9B3;   /* Brand teal (primary accent) */
  --color-teal-dark:   #2BB89A;   /* Darker teal (hover states) */
  --color-white:       #FFFFFF;
  --color-black:       #0C1020;   /* Footer bg */

  /* ── Neutral Grays ── */
  --color-gray-100:    #F5F6FA;   /* Light section backgrounds */
  --color-gray-200:    #E8EBF5;   /* Light blue-gray */
  --color-gray-300:    #D0D5E8;   /* Borders, dividers */
  --color-gray-500:    #6B7A99;   /* Body text muted */
  --color-gray-700:    #3A4260;   /* Darker text */

  /* ── Typography ── */
  --font-display:      'Montserrat', sans-serif;   /* Headings, nav, labels */
  --font-body:         'Inter', sans-serif;         /* Body text, descriptions */

  /* ── Font Sizes ── */
  --text-xs:    10px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    20px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-hero:  clamp(44px, 6vw, 80px);

  /* ── Spacing ── */
  --space-xs:    8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl: 100px;

  /* ── Layout ── */
  --container-max:  1280px;
  --section-pad-x:  80px;
  --section-pad-y:  100px;
  --nav-height:     72px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── Shadows ── */
  --shadow-sm:  0 4px 12px rgba(26, 33, 68, 0.08);
  --shadow-md:  0 8px 28px rgba(26, 33, 68, 0.12);
  --shadow-lg:  0 20px 56px rgba(26, 33, 68, 0.14);
  --shadow-teal: 0 8px 28px rgba(61, 217, 179, 0.28);

  /* ── Transitions ── */
  --transition-fast:   0.18s ease;
  --transition-base:   0.26s ease;
  --transition-slow:   0.42s ease;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-navy);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul, ol {
  list-style: none;
}

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

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}