/* ===================================================================
   iCookMagic -- Base Styles (v1)
   ===================================================================
   Global defaults for raw HTML elements. Built entirely on tokens.css.

   What this file does:
   1. Modern CSS reset -- kills browser inconsistencies
   2. Sets typographic defaults (every <h1>, <p>, <a> works out of the box)
   3. Form element baseline (inputs, buttons, selects look right by default)
   4. Accessibility primitives (focus rings, motion preferences, screen readers)
   5. Utility primitives (.container, .sr-only, .stack)

   What this file does NOT do:
   -- Component styles (cards, modals, header, hero) -- those live elsewhere
   -- Page-specific styles -- those live in page CSS files

   Load order: tokens.css -> base.css -> components -> page styles
   Location:   /assets/css/base.css
   =================================================================== */


/* -----------------------------------------------------------------
   1. RESET -- modern, minimal, opinionated
   -----------------------------------------------------------------
   We don't use a heavy reset like Normalize. We do exactly what we
   need and nothing more.
   ----------------------------------------------------------------- */

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

html {
  /* Smooth in-page anchor scrolling */
  scroll-behavior: smooth;
  /* Prevent iOS font size adjust on rotate */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Reserve space for scrollbar so layouts don't shift */
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  min-height: 100dvh;   /* dynamic viewport -- better on mobile */
  line-height: var(--leading-normal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink-900);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Media defaults -- never overflow, never stretch */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements should inherit typography by default */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Lists used for navigation lose default styling */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Honor user's motion preference -- accessibility critical */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* -----------------------------------------------------------------
   2. TYPOGRAPHY -- set headings, paragraphs, and inline text once
   -----------------------------------------------------------------
   These styles apply to raw HTML so a page with just <h1>Hello</h1>
   already looks like iCookMagic.
   ----------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
  text-wrap: balance;   /* prevents orphans on supporting browsers */
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

h5 {
  font-size: var(--text-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
}

h6 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* The iCM signature: italic emphasis in display headings turns magenta */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--color-magenta);
  font-weight: inherit;
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-900);
  text-wrap: pretty;   /* better paragraph wrapping */
}

/* Lead paragraph -- apply with class="lead" */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-700);
}

small {
  font-size: var(--text-sm);
  color: var(--color-ink-500);
}

strong, b {
  font-weight: var(--weight-bold);
  color: inherit;
}

em, i {
  font-style: italic;
}

/* Selection -- picks up brand color */
::selection {
  background: var(--color-neon);
  color: var(--color-black);
}


/* -----------------------------------------------------------------
   3. LINKS
   -----------------------------------------------------------------
   Default link: magenta, no underline, underline on hover.
   Use .link-plain to opt-out (e.g., logo, card wrappers).
   ----------------------------------------------------------------- */

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

a:hover {
  color: var(--color-magenta-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

a:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Opt-out: for links that are wrappers (logo, card, image) */
a.link-plain,
a.link-plain:hover {
  color: inherit;
  text-decoration: none;
}


/* -----------------------------------------------------------------
   4. FORM ELEMENTS
   -----------------------------------------------------------------
   Sensible defaults. Components can override but these set the floor.
   ----------------------------------------------------------------- */

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input,
textarea,
select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-ink-900);
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-ink-100);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-ink-300);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 3px rgba(255, 61, 127, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-ink-300);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* Search input -- strip browser styling */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Labels */
label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-700);
  margin-bottom: var(--space-2);
}

/* Fieldsets -- used semantically, not visually */
fieldset {
  border: none;
}


/* -----------------------------------------------------------------
   5. LISTS
   ----------------------------------------------------------------- */

ul, ol {
  padding-left: var(--space-6);
}

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


/* -----------------------------------------------------------------
   6. CODE & PRE
   ----------------------------------------------------------------- */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--color-ink-50);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-magenta-dark);
}

pre {
  background: var(--color-ink-50);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

pre code {
  background: none;
  padding: 0;
  color: var(--color-ink-900);
}


/* -----------------------------------------------------------------
   7. TABLES
   ----------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-thin) solid var(--color-ink-100);
}

th {
  font-weight: var(--weight-semibold);
  color: var(--color-ink-700);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}


/* -----------------------------------------------------------------
   8. QUOTES & RULES
   ----------------------------------------------------------------- */

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-900);
  border-left: var(--border-thick) solid var(--color-magenta);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}

hr {
  border: none;
  height: var(--border-thin);
  background: var(--color-ink-100);
  margin: var(--space-12) 0;
}


/* -----------------------------------------------------------------
   9. ACCESSIBILITY UTILITIES
   -----------------------------------------------------------------
   Critical for world-class UX -- keyboard users, screen readers,
   users with vision impairments.
   ----------------------------------------------------------------- */

/* Visually hide but keep available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link -- visible only when focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  z-index: var(--z-tooltip);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--color-white);
  text-decoration: none;
}

/* Global focus ring -- applied to anything interactive */
:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users, keep for keyboard users */
:focus:not(:focus-visible) {
  outline: none;
}


/* -----------------------------------------------------------------
   10. LAYOUT PRIMITIVES
   -----------------------------------------------------------------
   Small set of layout helpers used everywhere.
   ----------------------------------------------------------------- */

/* Standard content container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-wide {
  max-width: var(--container-2xl);
}

.container-narrow {
  max-width: var(--container-md);
}

@media (max-width: 768px) {
  .container,
  .container-wide,
  .container-narrow {
    padding-inline: var(--container-pad-mobile);
  }
}

/* Vertical stack -- adds consistent spacing between children */
.stack > * + * {
  margin-top: var(--space-4);
}

.stack-sm > * + * { margin-top: var(--space-2); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.stack-xl > * + * { margin-top: var(--space-12); }

/* Section wrapper -- standard vertical rhythm */
.section {
  padding-block: var(--space-16);
}

.section-sm { padding-block: var(--space-10); }
.section-lg { padding-block: var(--space-20); }

@media (max-width: 768px) {
  .section    { padding-block: var(--space-12); }
  .section-sm { padding-block: var(--space-8); }
  .section-lg { padding-block: var(--space-16); }
}


/* -----------------------------------------------------------------
   11. RESPONSIVE TYPE SCALING
   -----------------------------------------------------------------
   Headings auto-shrink on small screens -- no per-page tweaking.
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  .lead { font-size: var(--text-base); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-2xl); }
}


/* -----------------------------------------------------------------
   12. PRINT STYLES
   -----------------------------------------------------------------
   When someone prints a recipe -- make it readable.
   ----------------------------------------------------------------- */

@media print {
  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  /* Hide things that don't make sense on paper */
  header,
  footer,
  nav,
  .no-print {
    display: none !important;
  }
}