/* ─────────────────────────────────────────
   BASE — The unchanging architecture
   This file is IDENTICAL across all client sites.
   Never change this per client. Change theme.css instead.

   What's here:  Reset, CSS variable framework, responsive
                 breakpoints, animation system, dark mode detection
   What's NOT:   Colors, fonts, component styles, layout opinions
───────────────────────────────────────── */

/* ─── RESET ─── */

/* Element-level resets wrapped in :where() to keep specificity at 0,0,0
   so theme layers can override with any selector (including :where(.btn))
   via source-order tie-break. Without :where(), base.css button at 0,0,1
   would beat theme-aton.css :where(.btn) at 0,0,0. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:where(html) { scroll-behavior: smooth; }
:where(img) { display: block; max-width: 100%; height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(ul) { list-style: none; }
:where(button) { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─── VARIABLE FRAMEWORK ─── */

/* Override these in theme.css per client */
:root {
  /* Brand — MUST override in theme.css */
  --font-heading: sans-serif;
  --font-body: sans-serif;
  --accent: #333;
  --accent-hover: #111;

  /* Neutrals — override if needed */
  --bg: #fff;
  --bg-alt: #f8f8f8;
  --text: #333;
  --text-light: #777;
  --border: #e8e8e8;

  /* Spacing scale (em-based, scales with font-size) */
  --space-xs: 0.5em;
  --space-sm: 1em;
  --space-md: 2em;
  --space-lg: 4em;
  --space-xl: 6em;

  /* Shapes */
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgb(0 0 0 / 6%);
  --shadow-lg: 0 12px 48px rgb(0 0 0 / 10%);
}

/* ─── RESPONSIVE FONT SCALING (em-based, mobile-first) ─── */
body { font-size: 0.9375rem; } /* 15px mobile */

@media (width >= 640px)  { body { font-size: 1rem; } }       /* 16px */

@media (width >= 768px)  { body { font-size: 1.0625rem; } }  /* 17px */

@media (width >= 1024px) { body { font-size: 1.125rem; } }   /* 18px */

@media (width >= 1280px) { body { font-size: 1.25rem; } }    /* 20px */

/* ─── DARK MODE AUTO-DETECTION ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --bg-alt: #1a1a1a;
    --text: #e0e0e0;
    --text-light: #999;
    --border: #333;
  }
}

body.dark-mode {
  --bg: #111;
  --bg-alt: #1a1a1a;
  --text: #e0e0e0;
  --text-light: #999;
  --border: #333;
}

/* ─── LAYOUT PRIMITIVES ─── */
.container { max-width: 1200px; margin-inline: auto; padding-inline: 1.25em; }

/* ─── SCROLL ANIMATIONS (GPU-only: opacity + transform) ─── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.visible { opacity: 1; }

.slide-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays for groups */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ─── ACCESSIBILITY ─── */
@media (prefers-reduced-motion: reduce) {
  /* Snap all animated elements to visible for users with reduced-motion.
     Without this, IntersectionObserver-driven animations leave content hidden. */
  .fade-up, .fade-in, .slide-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── FORM BASE ─── */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  padding: 0.75em 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ─── TOUCH TARGET MINIMUMS (WCAG 2.5.5, Apple HIG, Material) ─── */

/* All interactive elements must be reachable by a thumb on mobile.      */

/* 44x44px is the WCAG Level AAA minimum and matches iOS HIG.             */

/* Input fields get 44px min-height too — typing-sized fields get bigger */

/* automatically via the 0.75em padding above.                            */
button,
a[role="button"],
.btn,
.nav__toggle,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 44px;
  min-width: 44px;
}
input, textarea, select { min-height: 44px; }