/* ============================================================
   YIZZOO - Design Tokens
   Source of truth: Yizzoo Visual Blueprint sections 3-11, 77-78.
   Change a value here, not in a component.
   ============================================================ */

:root{
  /* --- Primary colors (blueprint 3) --- */
  --color-midnight:   #17313A;  /* nav, major headings, footer, dark panels  */
  --color-teal:       #245E63;  /* category accents, hover, icons, links     */
  --color-parchment:  #F4ECD9;  /* primary warm page background              */
  --color-paper:      #FFFDF7;  /* reading surfaces, cards, forms            */

  /* --- Accent colors (blueprint 4) --- */
  --color-gold:       #D3A446;  /* premium indicators, small rules, selected */
  --color-coral:      #E87356;  /* primary CTA: buy, download, explore       */
  --color-sage:       #76886A;  /* outdoor/nature categories, success        */
  --color-red:        #A54F43;  /* stamps, notices, mystery - sparingly      */

  /* --- Neutrals (blueprint 5) --- */
  --color-ink:        #26343A;  /* body text            */
  --color-soft-ink:   #56646A;  /* secondary text       */
  --color-border:     #DDD4C1;  /* warm neutral border  */

  /* Tints, derived. Kept here so components never invent their own. */
  --color-midnight-90: #1E3C46;
  --color-teal-08:    rgba(36,94,99,0.08);
  --color-teal-14:    rgba(36,94,99,0.14);
  --color-gold-12:    rgba(211,164,70,0.12);
  --color-gold-30:    rgba(211,164,70,0.30);
  --color-coral-dark: #D4604A;   /* primary button hover */
  --color-coral-12:   rgba(232,115,86,0.12);
  --color-parchment-96: rgba(244,236,217,0.96); /* sticky header */
  --color-parchment-deep: #EADFC4;  /* section banding */

  /* --- Shadow (blueprint 5, 11): translucent navy, never pure black --- */
  --shadow-tint:      rgba(23,49,58,0.12);
  --shadow-card:      0 8px 24px rgba(23,49,58,0.10);
  --shadow-card-hover:0 14px 35px rgba(23,49,58,0.16);
  --shadow-header:    0 2px 14px rgba(23,49,58,0.10);
  --shadow-panel:     0 18px 48px rgba(23,49,58,0.18);
  /* Questboard paper sits tight to the board so it reads as attached. */
  --shadow-pinned:      0 3px 10px rgba(23,49,58,0.34);
  --shadow-pinned-hover:0 12px 26px rgba(23,49,58,0.42);

  /* --- Typography families (blueprint 6) --- */
  --font-display: "Fraunces", "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Type scale, desktop (blueprint 7) --- */
  --fs-hero:     68px;  --lh-hero:     72px;
  --fs-page:     52px;  --lh-page:     58px;
  --fs-h2:       38px;  --lh-h2:       44px;
  --fs-h3:       26px;  --lh-h3:       32px;
  --fs-h4:       20px;  --lh-h4:       26px;
  --fs-intro:    20px;  --lh-intro:    32px;
  --fs-body:     17px;  --lh-body:     29px;
  --fs-small:    14px;  --lh-small:    21px;
  --fs-meta:     12px;  --lh-meta:     18px;

  /* --- Spacing, 8px based (blueprint 8) --- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  24px;  --sp-6:  32px;  --sp-7:  40px;  --sp-8:  48px;
  --sp-9:  64px;  --sp-10: 80px;  --sp-11: 96px;  --sp-12: 128px;

  --section-y: var(--sp-11);      /* 96px desktop */
  --page-pad:  var(--sp-6);       /* 32px desktop */

  /* --- Widths (blueprint 9) --- */
  --content-max: 1280px;
  --wide-max:    1120px;
  --reading-max: 720px;
  --header-max:  900px;   /* article header */

  /* --- Radius (blueprint 10): not overly rounded --- */
  --radius-control: 6px;
  --radius-button:  8px;
  --radius-card:    10px;
  --radius-panel:   14px;

  /* --- Chrome --- */
  --header-h:          76px;
  --header-h-compact:  68px;

  /* --- Motion (blueprint 23, 73): subtle, never delays content --- */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:        120ms;
  --t-base:        180ms;
  --t-enter:       220ms;

  /* --- Paper grain (blueprint 74): 2-4% and consciously invisible --- */
  --grain-opacity: 0.035;
}

/* Type scale, mobile (blueprint 7). Only the sizes change. */
@media (max-width: 639px){
  :root{
    --fs-hero: 42px;  --lh-hero: 46px;
    --fs-page: 36px;  --lh-page: 41px;
    --fs-h2:   30px;  --lh-h2:   35px;
    --fs-h3:   23px;  --lh-h3:   29px;
    --fs-body: 16px;  --lh-body: 27px;
    --fs-intro:18px;  --lh-intro:29px;

    --section-y: var(--sp-9);   /* 64px mobile */
    --page-pad:  18px;
  }
}

/* Tablet side padding (blueprint 9) */
@media (min-width: 640px) and (max-width: 1023px){
  :root{ --page-pad: var(--sp-5); }  /* 24px */
}