/* ===================================
   Notebody Landing Page - Main Styles
   =================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

/* ===================================
   CSS Variables
   =================================== */
:root {
  --line-color: #e2e8f0;
  --notebook-bg: #fffef8;

  /* Professional Spacing Tokens */
  --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: 5rem;     /* 80px */
  --space-4xl: 6rem;     /* 96px */

  /* Container Widths */
  --container-mobile: min(90%, 480px);
  --container-tablet: min(85%, 720px);
  --container-desktop: 1280px;

  /* Section Padding */
  --section-padding-mobile: var(--space-3xl) var(--space-md);
  --section-padding-desktop: var(--space-4xl) var(--space-2xl);
}

/* ===================================
   Base Styles
   =================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
}

/* ===================================
   Typography
   =================================== */
.notebook-font {
  font-family: 'Caveat', cursive;
}

/* ===================================
   Utility Classes
   =================================== */
.notebook-lines {
  background-image: linear-gradient(transparent 95%, var(--line-color) 95%);
  background-size: 100% 24px;
  line-height: 24px;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* ===================================
   Modern CSS Features
   =================================== */

/* Improve text rendering and line breaks */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
}

/* Prevent horizontal scroll on mobile */
body {
  overflow-x: hidden;
}