/*
 * Design tokens — extracted from:
 *   inputs/Blog homepage.jpg
 *   inputs/Blog single version 1.jpg (canonical blog-detail layout)
 *   inputs/Blog single version 2.jpg (reference only; v2 layout is deferred)
 *
 * Tokens are the single source of truth. Components in Sprint 1 should
 * reference these variables — never hardcode a colour, font, or spacing value
 * in a template or component stylesheet. That way, tuning the palette means
 * editing this file, not chasing usages across the codebase.
 */

:root {

  /* ---------- Colour ---------------------------------------------------- */
  /*
   * Palette observed in the references:
   *   - white paper, with a very faint warm-neutral "surface" for cards
   *     and section bands;
   *   - deep teal as the brand/accent (feature band, dark footer, CTA on hover);
   *   - near-black for the primary CTA button and text;
   *   - a muted grey for meta text (author / read time / date);
   *   - three tag-badge colours that rotate across cards.
   */
  --color-paper:        #ffffff;
  --color-surface:      #f6f5f2;   /* card/section alt bg */
  --color-ink:          #1a1a1a;   /* body text, primary headings */
  --color-ink-muted:    #6b7280;   /* meta text, subtitles in lists */
  --color-border:       #e7e5e0;   /* card dividers, hairline rules */

  --color-brand:        #0f4c4a;   /* deep teal — feature band, footer */
  --color-brand-ink:    #ffffff;   /* text on --color-brand */
  --color-cta:          #111111;   /* the near-black header CTA */
  --color-cta-ink:      #ffffff;

  /* Tag badges — kept as named slots so designers/owner can remap later. */
  --color-tag-1:        #0f4c4a;   /* teal */
  --color-tag-2:        #b85042;   /* coral/brick */
  --color-tag-3:        #c79a3a;   /* amber */
  --color-tag-4:        #4a5a6b;   /* slate */
  --color-tag-ink:      #ffffff;

  /* Hero overlay — black gradient at low opacity keeps photo legibility. */
  --color-hero-overlay: rgba(0, 0, 0, 0.35);

  /* ---------- Typography ----------------------------------------------- */
  /*
   * Stacks fall back to system fonts if the webfonts fail to load, so the
   * site still renders in a readable shape offline or under CSP lockdown.
   * Google Fonts / self-hosted loading is decided in Sprint 1.
   */
  --font-serif: "Playfair Display", "Source Serif Pro", Georgia,
                "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Modular scale, ratio ~1.25. Named by purpose, not by absolute pixel size,
     so we can re-tune the ramp without renaming tokens. */
  --type-xs:    0.75rem;     /* 12px — tag badges, meta */
  --type-sm:    0.875rem;    /* 14px — captions, small UI */
  --type-base:  1rem;        /* 16px — body */
  --type-lg:    1.125rem;    /* 18px — lead paragraphs */
  --type-xl:    1.375rem;    /* 22px — card titles */
  --type-2xl:   1.75rem;     /* 28px — section headings */
  --type-3xl:   2.25rem;     /* 36px — page titles */
  --type-4xl:   3rem;        /* 48px — blog hero title (mobile) */
  --type-5xl:   4rem;        /* 64px — blog hero title (desktop) */

  --leading-tight: 1.15;     /* headlines */
  --leading-snug:  1.35;     /* subheads */
  --leading-body:  1.65;     /* long-form reading */

  --tracking-wide: 0.08em;   /* uppercase tag / nav labels */

  /* ---------- Spacing scale -------------------------------------------- */
  /*
   * 4 px base unit; named by step rather than pixel value, matching common
   * utility frameworks so it's familiar to anyone joining later.
   */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;

  /* ---------- Layout --------------------------------------------------- */
  --content-max:    1200px;   /* main container cap */
  --reading-max:    680px;    /* comfortable line-length for blog body */
  --gutter:         var(--space-5);
  --radius-sm:      2px;      /* tag badges — nearly-square in the reference */
  --radius-md:      4px;      /* buttons, inputs */
  --radius-lg:      8px;      /* large cards — rarely used, kept for options */

  /* ---------- Elevation ------------------------------------------------ */
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.04),
                  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-pop:   0 4px 16px rgba(0, 0, 0, 0.10);

  /* ---------- Motion --------------------------------------------------- */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;

  /* ---------- Breakpoints (documentation only) ------------------------- */
  /* CSS custom properties do not work inside @media queries, so these are
     here as a reference; the actual numbers are duplicated inline in the
     component stylesheets that use them.
        --bp-sm: 640px    — stack to single column
        --bp-md: 900px    — 2-column grids
        --bp-lg: 1200px   — 3-column grids, full hero
  */
}

/* ---------- Global baseline (optional, safe reset) --------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
}