/* ==========================================================================
   SHELTER BLOG — DESIGN TOKENS
   Single source of truth. In the future WP theme this mirrors theme.json.
   Palette: minimalist black/white/grey + ONE accent (lime #CAEB35) reserved
   exclusively for CTAs (Von Restorff isolation effect).
   ========================================================================== */

:root {
  /* ---- COLOR · neutrals ---------------------------------------------- */
  --c-ink:        #0A0A0A;   /* near-black — large fills, display headings */
  --c-ink-soft:   #333333;   /* strong text, secondary button, CTA text   */
  --c-paper:      #FFFFFF;   /* base surface                              */
  --c-paper-2:    #FAFAFA;   /* alternate section band                    */
  --c-line:       #EAEAEA;   /* hairlines, borders                        */
  --c-mute:       #6B6B6B;   /* meta, captions                            */
  --c-body:       #333333;   /* running text                             */
  --c-on-dark:    #FAFAFA;   /* text on ink surfaces                      */
  --c-on-dark-mute: rgba(250,250,250,.62);

  /* ---- COLOR · the ONLY accent (CTAs) -------------------------------- */
  --cta:          #CAEB35;   /* lime / chartreuse                         */
  --cta-text:     #333333;   /* 9.3:1 on lime — AAA                       */
  --cta-hover:    #B9DA20;   /* darker lime on hover                      */

  /* ---- TYPE · family ------------------------------------------------- */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --fw-body: 400;
  --fw-bold: 600;

  /* ---- TYPE · scale (perfect fourth 1.333, base 18px) ---------------- */
  --fs-micro:   11px;   /* legal, tags, placeholder label */
  --fs-caption: 14px;   /* meta, byline, captions         */
  --fs-body:    18px;   /* running text                   */
  --fs-lead:    20px;   /* answer-first lead / large intro */
  --fs-h4:      20px;
  --fs-h3:      22px;
  --fs-h2:      26px;
  --fs-h1:      34px;   /* article/post title (desktop)   */
  --fs-display: 30px;   /* hero headline (desktop)        */

  --lh-tight: 1.05;     /* display */
  --lh-head:  1.18;     /* h1–h3   */
  --lh-body:  1.65;     /* running text (within 1.6–1.75) */
  --lh-lead:  1.45;
  --tracking-eyebrow: .16em;
  --tracking-nav:     .09em;
  --tracking-wordmark:.30em;
  --measure: 65ch;      /* article column ideal width */

  /* ---- SPACING · 8pt grid -------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;
  --section-y:   var(--sp-8);
  --section-y-m: var(--sp-6);

  /* ---- RADIUS · sharp / editorial ------------------------------------ */
  --radius:       2px;
  --radius-modal: 4px;
  --radius-pill:  100px;

  /* ---- SHADOW · minimal / flat --------------------------------------- */
  --shadow-sm:  0 1px 2px  rgba(10,10,10,.06);
  --shadow-md:  0 6px 24px rgba(10,10,10,.09);
  --shadow-lg:  0 12px 40px rgba(10,10,10,.18);
  --shadow-hair:0 1px 0    rgba(10,10,10,.08);

  /* ---- CONTAINERS ---------------------------------------------------- */
  --container: 1360px;
  --content:   690px;    /* coluna de leitura (~63 caracteres) */
  --content-narrow: 560px;
  --gutter:  24px;

  /* ---- MOTION -------------------------------------------------------- */
  --t-fast: 120ms;
  --t:      200ms;
  --t-slow: 400ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- Z-INDEX ------------------------------------------------------- */
  --z-header: 100;
  --z-sticky-cta: 90;
  --z-progress: 110;
  --z-modal: 1000;
  --z-lightbox: 1100;

  /* ---- placeholder gradient (image fallback) ------------------------- */
  --ph-grad: linear-gradient(135deg, #0A0A0A 0%, #1c1c1c 45%, #333 100%);
}

/* ---- Responsive type down-scale --------------------------------------- */
@media (max-width: 900px) {
  :root {
    --fs-display: 28px;
    --fs-h1: 30px;
    --fs-h2: 24px;
  }
}
@media (max-width: 560px) {
  :root {
    --fs-display: 25px;   /* hero headline (mobile) */
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-h3: 20px;
    --fs-lead: 18px;
    --gutter: 18px;
    --section-y: var(--sp-6);
  }
}