@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

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

:root {
  /* Brand gradient — teal (matches eoslightmedia.com site) */
  --gradient:        linear-gradient(135deg, #6ecdc4 0%, #00b8d8 100%);
  --gradient-start:  #6ecdc4;
  --gradient-end:    #00b8d8;

  /* Surfaces */
  --color-bg:        #ffffff;
  --color-surface:   #f4f4f4;
  --color-border:    #e0e0e0;

  /* Text */
  --color-text:      #1c1c1c;
  --color-muted:     #666666;
  --color-on-brand:  #ffffff;

  /* Type */
  --font-family:     'Karla', sans-serif;
  --font-light:      300;
  --font-regular:    400;
  --font-medium:     500;
  --font-bold:       700;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;

  --max-width:    1280px;
  --page-padding: 48px;
}

html {
  font-family: var(--font-family);
  font-weight: var(--font-light);
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  width: 100%;
}

h1, h2, h3, h4 {
  font-weight: var(--font-medium);
  line-height: 1.15;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p {
  line-height: 1.7;
  color: var(--color-muted);
}

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

hr {
  border: none;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  :root {
    --page-padding: 24px;
    --space-lg: 48px;
    --space-xl: 64px;
  }
}

@media (max-width: 480px) {
  :root {
    --page-padding: 20px;
  }
}