/* OlaMat Base Styles
   Layer declarations + reset + element defaults.
   Loaded by all surfaces. */

@layer reset, base, components, surfaces, utilities;

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

  * {
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface);
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-4);
    color: var(--color-text);
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  p {
    margin-bottom: var(--space-4);
  }

  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
  }

  a:hover {
    color: var(--color-primary-dark);
  }

  ul, ol {
    margin-left: var(--space-6);
    margin-bottom: var(--space-4);
  }

  li {
    margin-bottom: var(--space-2);
  }
}