/* ==========================================================================
   Yonge St Daily - design tokens
   One edit here propagates sitewide. Do not hardcode colours elsewhere.
   ========================================================================== */

:root {
  /* Ink and paper */
  --ysd-ink:      #101215;
  --ysd-graphite: #2B2F35;
  --ysd-slate:    #5D6470;  /* muted. 5.9:1 on paper, 5.3:1 on bone */
  --ysd-paper:    #FFFFFF;
  --ysd-bone:     #F7F5F1;
  --ysd-line:     #E4E0D8;

  /* Accents. Red is an accent, never a wash: under 15% of any viewport.
     Amber is for Deals and Free labels only. Never body text. */
  --ysd-red:      #D6352B;
  --ysd-red-dark: #B22A22;
  --ysd-red-text: #B02A21;   /* small text on light: 6.1:1. Fills use --ysd-red */
  --ysd-amber:    #F5B301;

  /* Derived */
  --ysd-ink-80:   rgba(16, 18, 21, 0.80);
  --ysd-ink-60:   rgba(16, 18, 21, 0.60);
  --ysd-paper-70: rgba(255, 255, 255, 0.70);
  --ysd-line-dark: rgba(255, 255, 255, 0.16);

  /* Type */
  --ysd-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ysd-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ysd-text:      17px;
  --ysd-leading:   1.7;
  --ysd-tight:     -0.01em;
  --ysd-track-up:  0.08em;

  /* Fluid display sizes */
  --ysd-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --ysd-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --ysd-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --ysd-lead-title: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --ysd-card-title: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

  /* Space */
  --ysd-s1: 4px;
  --ysd-s2: 8px;
  --ysd-s3: 12px;
  --ysd-s4: 16px;
  --ysd-s5: 24px;
  --ysd-s6: 32px;
  --ysd-s7: 48px;
  --ysd-s8: 64px;
  --ysd-s9: 88px;

  /* Structure. Hairlines, not shadows. Radius 6px max. */
  --ysd-wrap: 1200px;
  --ysd-measure: 46rem;
  --ysd-gutter: 20px;
  --ysd-radius: 6px;
  --ysd-radius-sm: 3px;
  --ysd-hair: 1px solid var(--ysd-line);
  --ysd-hair-dark: 1px solid var(--ysd-line-dark);
  --ysd-header-h: 68px;
}

@media (min-width: 768px) {
  :root { --ysd-gutter: 32px; }
}