/* ============================================================
   IconHelp — ICON rebrand · Design Tokens (CSS custom properties)
   v0.1.0 — starter set, mirror of design-tokens/tokens.json
   Drop into the Next.js app as styles/tokens.css and import at root.
   ============================================================ */

:root {
  /* ---------- Color: brand ---------- */
  --c-midnight:    #0E1116;  /* primary ink / immersive bg */
  --c-paper:       #F7F4EF;  /* warm light bg (not pure white) */
  --c-green:       #0B6E4F;  /* heritage / hope; links on paper (AA) */
  --c-green-soft:  #138A63;  /* lighter green for large UI / hover */
  --c-clay:        #C8472B;  /* ACTION ONLY — donate CTA (AA on paper & midnight) */
  --c-clay-hover:  #A83A22;
  --c-amber:       #E0A33E;  /* highlight — LARGE/graphic use only */

  /* ---------- Color: text ---------- */
  --c-text:               #1A1E24;  /* body on paper (AA) */
  --c-text-muted:         #6B7280;  /* secondary on paper (AA) */
  --c-text-on-dark:       #F4F2EC;  /* body on midnight (AA) */
  --c-text-on-dark-muted: #A8AEB8;
  --c-text-on-clay:       #FFFFFF;

  /* ---------- Color: surface ---------- */
  --c-surface:        #F7F4EF;
  --c-surface-raised: #FFFFFF;
  --c-surface-inverse:#0E1116;
  --c-border:         #E2DCD2;

  /* ---------- Color: state ---------- */
  --c-focus:   #138A63;
  --c-error:   #B3261E;
  --c-success: #0B6E4F;

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Fluid type scale (clamp) */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem);
  --fs-3xl:  clamp(2.25rem, 1.7rem + 2.7vw, 3.5rem);
  --fs-4xl:  clamp(2.75rem, 1.9rem + 4.2vw, 5rem);
  --fs-hero: clamp(3rem, 2rem + 6vw, 6.5rem);

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;

  /* ---------- Spacing (8px base) ---------- */
  --s-0: 0;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 1.75rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ---------- Radius ---------- */
  --r-none: 0;
  --r-sm: 0.25rem;
  --r-md: 0.5rem;
  --r-lg: 1rem;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --sh-sm: 0 1px 2px rgba(14,17,22,0.06);
  --sh-md: 0 4px 16px rgba(14,17,22,0.10);
  --sh-lg: 0 12px 40px rgba(14,17,22,0.16);

  /* ---------- Layout ---------- */
  --max-w: 1200px;
  --max-w-prose: 68ch;
  --gutter: clamp(1rem, 5vw, 4rem);

  /* ---------- Motion ---------- */
  --d-fast: 150ms;
  --d-base: 300ms;
  --d-slow: 600ms;
  --d-reveal: 800ms;

  --e-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --e-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --e-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* Lenis smoothing (seconds) — JS reads this; never active under reduced-motion */
  --lenis-duration: 1.1;
}

/* ============================================================
   Reduced-motion: single source of truth.
   When the user prefers reduced motion, neutralize all motion
   tokens. JS (LenisProvider) ALSO checks this and never
   instantiates Lenis. Content must never depend on motion to
   become visible.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
    --d-reveal: 0ms;
    --lenis-duration: 0;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Optional dark/immersive section helper.
   Apply .section--immersive to swap surface + text for the
   midnight scroll-story sections.
   ============================================================ */
.section--immersive {
  --c-surface: var(--c-midnight);
  --c-text: var(--c-text-on-dark);
  --c-text-muted: var(--c-text-on-dark-muted);
  background: var(--c-midnight);
  color: var(--c-text-on-dark);
}

/* Visible focus for keyboard users — accessibility baseline */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}