/**
 * BASE.CSS - Reset, typography, and global styles
 * 
 * This file provides:
 * - CSS reset (box-sizing, margins)
 * - Typography defaults (headings, paragraphs, links)
 * - Form element normalization
 * - Utility classes (.hidden)
 * - Reduced motion support
 */

/* ========================================
   Reset
   ======================================== */

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

html {
  /* Prevent horizontal overflow on all devices including foldables */
  overflow-x: hidden;
}

html, body {
  height: 100%;
  /* Ensure content doesn't overflow viewport width */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* ========================================
   Typography
   ======================================== */

h1, h2, h3, h4 {
  margin: 0 0 10px;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--w-black);
  font-family: var(--font-display);
}

h1 { font-size: clamp(26px, 6vw, 44px); }
h2 { font-size: clamp(20px, 4vw, 30px); }
h3 { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
h4 { font-size: 15px; }

p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-weight: var(--w-medium);
}

small {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: var(--w-bold);
}

strong { font-weight: var(--w-black); }
em { font-style: italic; }

a {
  color: color-mix(in srgb, var(--p-capri) 80%, var(--p-cloud-dancer) 20%);
  text-decoration: none;
  font-weight: var(--w-bold);
}

a:hover { text-decoration: underline; }

a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-capri) 28%, transparent);
  border-radius: 6px;
}

ul, ol {
  margin: 0;
  padding-left: 18px;
}

li { margin: 6px 0; }

::selection {
  background: color-mix(in srgb, var(--p-capri) 35%, transparent);
}

/* ========================================
   Form Elements
   ======================================== */

input, textarea, select, button {
  font: inherit;
}

::placeholder {
  color: var(--ink-mute);
}

/* ========================================
   Utilities - MUST BE LAST for specificity
   ======================================== */

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ========================================
   Mobile Text Boost
   ======================================== */

@media (max-width: 480px) {
  body { font-size: 18px; }
}

/* ========================================
   Reduced Motion
   ======================================== */

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