/**
 * SPS Media — design tokens, ported from the headless frontend.
 *
 * Source: ../spsmedia/frontend/src/tokens.json and
 * frontend/src/styles/tokens.css — Figma "SPS-website" file, node 120:15
 * (Home / Latest Stories). No Figma variables existed there either; these
 * are the same values extracted from actual computed node styles, carried
 * over unchanged. See specs/002-rebuild-native-theme-ui/contracts/design-tokens.md
 * for the full mapping table and rationale.
 *
 * This file defines values only — @font-face declarations live in fonts.css.
 */

:root {
  /* ── Fonts — local, self-hosted (see fonts.css); Devanagari fallback ──── */
  --font-serif: 'Source Serif 4', 'Noto Serif Devanagari', ui-serif, Georgia, serif;
  --font-sans: 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif;
  --font-nav: 'Roboto', 'Noto Sans Devanagari', ui-sans-serif, sans-serif;

  /* ── Brand colors ───────────────────────────────────────────────────── */
  --color-brand: #c9251e; /* primary red — CTAs, links, section heading, divider */
  --color-brand-gold: #f6ac00; /* "Support SPS Media" pill */
  --color-brand-gold-ink: #4a1c00; /* text on gold pill */
  --color-category: #450344; /* category pill background (purple) */
  --color-whatsapp: #0b7a3d; /* WhatsApp CTA button — official #25D366 fails 4.5:1 with white text (1.98:1) */
  --color-whatsapp-tint: #e7f8ec; /* WhatsApp CTA band background */
  --color-whatsapp-ink: #0b4228; /* text on whatsapp-tint background */

  /* ── Neutrals ───────────────────────────────────────────────────────── */
  --color-ink: #000000; /* headings / nav / card titles */
  --color-muted: #5d5d5d; /* byline on light background */
  --color-on-dark: #e8e8e8; /* byline over hero image */
  --color-white: #ffffff;

  /* ── Type scale (font-size / line-height) ───────────────────────────── */
  --text-hero: 40px;
  --text-hero--line-height: 1.2;
  --text-section: 32px;
  --text-section--line-height: 1.2;
  --text-card-title: 26px;
  --text-card-title--line-height: 1.2;
  --text-deck: 22px; /* article sub-headline/excerpt, between title and body */
  --text-deck--line-height: 1.4;
  --text-cta: 21.444px;
  --text-cta--line-height: 1.2;
  --text-nav: 20px;
  --text-nav--line-height: 1.2;
  --text-support-pill: 20px;
  --text-body: 14px;
  --text-body--line-height: 26px;
  --text-read-more-link: 14px;
  --text-read-more-link--letter-spacing: 0.028em;
  --text-badge: 12.632px;
  --text-badge--line-height: 20.526px;
  --text-hero-cta: 12px;
  --text-hero-cta--line-height: 1.2;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --radius-card: 8px; /* hero + card images */
  --radius-pill: 9999px; /* category pills, all CTA buttons */

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --spacing-header-logo-nav-gap: 143px;
  --spacing-nav-cluster-gap: 24px;
  --spacing-nav-item-gap: 10px;
  --spacing-nav-item-padding: 10px;
  --spacing-support-pill-padding-x: 24px;
  --spacing-support-pill-padding-y: 16px;
  --spacing-icon-gap: 26px;
  --spacing-icon-size: 28px;
  --spacing-hero-image-width: 1200px;
  --spacing-hero-image-height: 428px;
  --spacing-card-image-width: 384px;
  --spacing-card-image-height: 253px;
  --spacing-card-content-gap: 16px;
  --spacing-card-title-byline-gap: 4px;
  --spacing-pill-gap: 11px;
  --spacing-pill-height: 25px;
}