/* ============================================================
   {SITE} "How to Fish Guide" — Design Tokens v2.0
   Style: Warm paper + deep sea (light theme, competitor-ref'd)
   Single source of truth for color/type/space/shape/motion.
   ============================================================ */

:root {
  /* ---- 1. Color · surfaces ---- */
  --paper:       #fff8e8;  /* page base — warm cream */
  --paper-2:     #f2ead6;  /* alternating section tint */
  --white:       #fffdf7;  /* card face */
  --deep:        #082c3b;  /* deep-sea band: header, hero, footer */
  --deep-2:      #0c4251;  /* slightly lighter deep — hover accents */

  /* ---- 2. Color · ink & lines ---- */
  --ink:         #102630;  /* primary text on light surfaces */
  --ink-soft:    #35515a;  /* secondary text (5.7:1 on paper) */
  --on-deep:     #fffdf7;  /* text on deep-sea bands */
  --on-deep-2:   #9FBEC4;  /* muted text on deep-sea bands */
  --line:        #10263030; /* hairlines on light surfaces (30% opacity) */

  /* ---- 3. Color · semantic accents ---- */
  --coral:       #f05a38;  /* PRIMARY CTA / emphasis */
  --coral-dark:  #c63d24;  /* coral hover / active */
  --sun:         #f6c84a;  /* warm accent (badges, highlights) */
  --sea:         #36b8b2;  /* informational / links on light */
  --sea-dark:    #107d7b;  /* link hover */
  --lime:        #b4d455;  /* success / verified indicator */
  --tbc:         #51686E;  /* TBC / unverified neutral */

  /* ---- 4. Tier letter blocks ---- */
  --tier-s: var(--coral);
  --tier-a: var(--sea-dark);
  --tier-b: var(--ink-soft);
  --tier-c: var(--tbc);

  /* ---- 5. TBC hatch ---- */
  --tbc-hatch: repeating-linear-gradient(
    45deg,
    rgba(81, 104, 110, 0.16) 0 4px,
    rgba(81, 104, 110, 0.04) 4px 8px
  );

  /* ---- 6. Typography ---- */
  --font-display: "Georgia", "Times New Roman", serif;          /* H1/H2 — classic serif */
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;  /* body/UI */
  --font-mono:    "Sometype Mono", "Consolas", ui-monospace, monospace; /* data labels, verified stamps */

  --fs-body:   1rem;
  --fs-body-s: 0.875rem;
  --fs-mono:   0.75rem;
  --lh-body:   1.65;

  --fs-h1: clamp(2.8rem, 1.5rem + 4.5vw, 4.0625rem);  /* ~65px target */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem);
  --fs-h3: 1.15rem;

  /* ---- 7. Space (4px grid) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;
  --max-w:     73.75rem;   /* 1180px */
  --read-col:  46.25rem;   /* 740px */

  /* ---- 8. Shape: rounded corners ---- */
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;
  --chip-radius: 6px;

  /* ---- 9. Shadows (soft, no hard outlines) ---- */
  --shadow:    0 12px 28px #082c3b21;
  --shadow-sm: 0 4px 12px #082c3b15;
  --shadow-deep: 0 8px 20px rgba(0,0,0,0.25);

  /* ---- 10. Motion ---- */
  --t-fast: 100ms ease-out;
  --t-mid:  160ms ease-out;

  /* ---- 11. Ad slot reservations ---- */
  --ad-min-h-mobile: 100px;
  --ad-min-h-desktop-top: 90px;
  --ad-min-h-desktop-bottom: 250px;

  /* ---- 12. Touch targets ---- */
  --tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-mid: 0ms; }
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}