/*
 * WFP Tokens Module
 * Supplements :root tokens already defined in style.css.
 * Add site-specific or component-scoped token overrides here.
 */

:root {
  /* Masthead / header specific */
  --wfp-header-bg: var(--contrast);
  --wfp-header-text: var(--base-3);
  --wfp-header-height: 64px;

  /* Navigation */
  --wfp-nav-link-color: var(--base-2);
  --wfp-nav-link-hover: var(--accent);
  --wfp-nav-dropdown-bg: var(--contrast);

  /* Story card */
  --wfp-card-gap: var(--space-m);
  --wfp-card-img-ratio: 16 / 9;

  /* Byline */
  --wfp-byline-color: var(--contrast-3);
  --wfp-byline-size: var(--step--1);

  /* Section label / kicker */
  --wfp-kicker-color: var(--accent);
  --wfp-kicker-size: var(--step--2);
  --wfp-kicker-weight: 700;
  --wfp-kicker-spacing: 0.08em;

  /* Article reading width */
  --wfp-prose-width: 720px;

  /* Sidebar */
  --wfp-sidebar-width: 300px;

  /* Homepage grid */
  --wfp-grid-cols: 12;
  --wfp-grid-gap: var(--space-m);

  /* Footer */
  --wfp-footer-bg: var(--contrast);
  --wfp-footer-text: var(--base-2);
  --wfp-footer-link: var(--base);
  --wfp-footer-border: hsl(0 0% 100% / 0.1);
}