/* ============================================================
   Niarika — base.css
   Design tokens, reset, theme variables
   ============================================================ */

:root {
  /* Brand palette */
  --niarika-black: #0B0B0C;
  --bone: #F5F1EA;
  --bone-mist: #EDEAE2;   /* slightly darker bone for the creator panel + highlight */
  --off-white: #FFFFFF;
  --deep-tide: #1F4E5F;
  --deep-tide-hover: #18404e;
  --slate: #5C6066;
  --mist: #E6E3DC;

  /* v3.8.2 warmth pass — light-mode atmosphere (boosted for visibility) */
  --warm-edge: #ECDDB8;     /* warmer peach-cream tint for radial wash edges (was #F2E9D6) */
  --cool-oat: #EBE5D2;      /* cooler oat for the alternating creator panel (deeper) */
  --cursor-warm: #DDA94B;   /* the warm pool that follows the cursor — saturated honey (was #E8C58A) */

  /* Fonts */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-hero: clamp(3rem, 9vw, 7rem);          /* hero — display scale, takes real estate */
  --text-h2: clamp(1.9rem, 3.6vw, 3rem);
  --text-h3: 1.25rem;
  --text-body-l: 1.125rem;  /* 18 */
  --text-body: 1rem;        /* 16 */
  --text-small: 0.875rem;   /* 14 */
  --text-caption: 0.75rem;  /* 12 */

  /* Spacing */
  --section-pad: clamp(80px, 10vw, 168px);
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-golden: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light theme (default) */
:root,
[data-theme="light"] {
  --bg: var(--bone);
  --bg-mist: var(--cool-oat);  /* v3.8: shifted cooler so alternating panels read tonally distinct */
  --surface: var(--off-white);
  --text: var(--niarika-black);
  --text-muted: var(--slate);
  --accent: var(--deep-tide);
  --accent-hover: var(--deep-tide-hover);
  --hairline: var(--mist);
  --header-bg: rgba(245, 241, 234, 0.78);
  --field-bg: var(--off-white);
  --field-border: var(--mist);
  --highlight-flash: rgba(31, 78, 95, 0.07);
}

/* Dark theme */
[data-theme="dark"] {
  --bg: var(--niarika-black);
  --bg-mist: #141416;
  --surface: #141416;
  --text: var(--bone);
  --text-muted: #9a9da3;
  --accent: #6fb3c6;        /* lightened Deep Tide for AA contrast on black */
  --accent-hover: #8ec6d6;
  --hairline: #2a2a2e;
  --header-bg: rgba(11, 11, 12, 0.78);
  --field-bg: #1a1a1d;
  --field-border: #2f2f34;
  --highlight-flash: rgba(111, 179, 198, 0.10);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* Balance display headings so no single word is widowed on its own line */
  text-wrap: balance;
  /* Source Serif 4 supports optical sizing: large display sizes read correctly weighted */
  font-optical-sizing: auto;
}

/* Better orphan/widow control on body copy */
p { text-wrap: pretty; }

/* Hanging punctuation globally (verified) */
html { hanging-punctuation: first last; }

/* Selection colour: a quiet Deep-Tide tint */
::selection {
  background: oklch(from var(--accent) l c h / 0.25);
  color: var(--text);
}

/* Anchor targets land cleanly under the sticky header */
:target,
[id] { scroll-margin-top: 96px; }

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

.section { padding-block: var(--section-pad); }
.section--alt { background: var(--surface); }

/* ---------- Accessibility helpers ---------- */
.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-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 0.75em 1.25em;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--text-small);
}
.skip-link:focus {
  left: var(--container-pad);
  top: 0.75rem;
}

/* ---------- Focus (brand-matched) ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- Anchor highlight flash ---------- */
.anchor-flash {
  animation: anchorFlash 600ms var(--ease-out);
}
@keyframes anchorFlash {
  0%   { background-color: var(--highlight-flash); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .anchor-flash { animation: none; }
}

/* ---------- prefers-contrast: more ----------
   When the visitor asks for more contrast, drop the muted Slate body
   text to full Niarika Black and firm up Mist hairlines to Slate. */
@media (prefers-contrast: more) {
  :root, [data-theme="light"] {
    --text-muted: var(--niarika-black);
    --hairline: var(--slate);
    --field-border: var(--slate);
  }
  [data-theme="dark"] {
    --text-muted: var(--bone);
    --hairline: #6b6f76;
    --field-border: #6b6f76;
  }
}

/* ---------- Print stylesheet ----------
   A sensible black-on-white fallback. The pitch PDF is the canonical
   print artefact, but a clean print of the site is craft. */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .site-header, .site-footer, .theme-toggle, .menu-toggle,
  .mobile-nav, .hero-actions, .header-cta, .skip-link,
  .both-hinge, .work-card__media { display: none !important; }
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  a { color: #000 !important; text-decoration: underline; }
  .reveal, .hero-word, .hero-headline { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 1.5rem !important; }
  .both-panel { padding-block: 1rem !important; }
}