/* tokens/fonts.css */
/* FONTS ──────────────────────────────────────────────
   Brand face: "PBS Sans" — the custom, trademarked humanist
   geometric sans, now self-hosted from licensed .woff2 files
   in /fonts. Arial is the sanctioned system fallback per PBS
   guidelines. "PBS Sans Cond" is the condensed cut, exposed
   via --font-cond for tight display lockups.
   IBM Plex Mono (CDN) covers code/data specimens. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* PBS Sans — upright */
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Black.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* PBS Sans — italic */
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Light-It.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-It.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Medium-It.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Bold-It.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"PBS Sans";src:url("fonts/PBSSans-Black-It.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}

/* PBS Sans Cond — condensed display cut */
@font-face{font-family:"PBS Sans Cond";src:url("fonts/PBSSans-Cond.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PBS Sans Cond";src:url("fonts/PBSSans-Cond-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PBS Sans Cond";src:url("fonts/PBSSans-Cond-It.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PBS Sans Cond";src:url("fonts/PBSSans-Cond-Bold-It.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

/* tokens/colors.css */
/* COLORS ─────────────────────────────────────────────
   Primary palette + accents are the official PBS values
   (Color Use Guidelines, Aug 2025). Neutrals are a cool,
   navy-tinted ramp added for UI surfaces/text (not in the
   brand book — see readme "Intentional additions"). */
:root{
  /* ── Primary palette (official) ── */
  --pbs-blue:#2638C4;      /* signature — primary CTAs, links, brand */
  --navy-blue:#0A145A;     /* serious tone, dark surfaces */
  --medium-blue:#0F1E8C;   /* depth alongside PBS Blue */
  --light-blue:#486CD8;    /* lighter blue, hover/focus, tints */
  --white:#FFFFFF;

  /* ── Primary accents (official — use MINIMALLY, one at a time) ── */
  --teal:#48D3CD;
  --yellow:#FFCF00;
  --coral:#FE704E;

  /* ── Cool neutral ramp (added for UI) ── */
  --neutral-950:#070C2E;
  --neutral-900:#10173A;
  --neutral-800:#232a52;
  --neutral-700:#3A4166;
  --neutral-500:#6B7191;
  --neutral-400:#9297b3;
  --neutral-300:#C3C7D9;
  --neutral-200:#E4E6F0;
  --neutral-100:#F2F3F8;
  --neutral-50:#F8F9FC;

  /* ── Semantic aliases ── */
  --brand-primary:var(--pbs-blue);
  --brand-primary-hover:var(--medium-blue);
  --brand-primary-active:var(--navy-blue);
  --brand-on-primary:var(--white);

  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-subtle:var(--neutral-100);
  --surface-sunken:var(--neutral-50);
  --surface-inverse:var(--navy-blue);
  --surface-brand:var(--pbs-blue);

  --text-heading:var(--navy-blue);
  --text-body:var(--neutral-900);
  --text-muted:var(--neutral-500);
  --text-on-dark:var(--white);
  --text-on-dark-muted:rgba(255,255,255,.72);
  --text-link:var(--pbs-blue);
  --text-link-hover:var(--medium-blue);

  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-brand:var(--pbs-blue);

  --focus-ring:var(--light-blue);

  --accent-teal:var(--teal);
  --accent-yellow:var(--yellow);
  --accent-coral:var(--coral);

  /* Primary gradient (used on darker imagery overlays) */
  --gradient-brand:linear-gradient(135deg,var(--pbs-blue),var(--medium-blue));
  --gradient-deep:linear-gradient(160deg,var(--medium-blue),var(--navy-blue));
}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}

/* tokens/typography.css */
/* TYPOGRAPHY ─────────────────────────────────────────
   One family (PBS Sans, self-hosted) across the whole
   system, per PBS "single typeface" guidance. --font-cond
   exposes the condensed cut for tight display lockups.
   Display/headings run bold-to-black and tight; body is
   regular and airy. */
:root{
  --font-sans:"PBS Sans",Arial,-apple-system,system-ui,sans-serif;
  --font-body:var(--font-sans);
  --font-display:var(--font-sans);
  --font-cond:"PBS Sans Cond","PBS Sans",Arial,sans-serif;
  /* monospace only for code/data specimens */
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Weights */
  --fw-light:300; /* @kind other */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-black:800; /* @kind other */

  /* Type scale (1.250 major-third-ish, tuned) */
  --fs-display-2xl:5rem;    /* 80 — hero / cover */
  --fs-display-xl:3.75rem;  /* 60 */
  --fs-display-lg:3rem;     /* 48 */
  --fs-h1:2.25rem;          /* 36 */
  --fs-h2:1.75rem;          /* 28 */
  --fs-h3:1.375rem;         /* 22 */
  --fs-h4:1.125rem;         /* 18 */
  --fs-body-lg:1.125rem;    /* 18 */
  --fs-body:1rem;           /* 16 */
  --fs-body-sm:0.875rem;    /* 14 */
  --fs-caption:0.75rem;     /* 12 */
  --fs-overline:0.6875rem;  /* 11 — uppercase labels */

  /* Line heights */
  --lh-tight:1.05; /* @kind other */
  --lh-heading:1.15; /* @kind other */
  --lh-snug:1.3; /* @kind other */
  --lh-body:1.55; /* @kind other */

  /* Letter spacing */
  --ls-display:-0.02em; /* @kind other */
  --ls-heading:-0.01em; /* @kind other */
  --ls-normal:0; /* @kind other */
  --ls-overline:0.08em; /* @kind other */
}

/* tokens/spacing.css */
/* SPACING ── 4px base scale ── */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Semantic layout */
  --gutter:24px;
  --page-margin:clamp(20px,5vw,64px);
  --content-max:1200px;
  --stack-tight:8px;
  --stack:16px;
  --stack-loose:32px;
}

/* tokens/radius.css */
/* RADIUS ─────────────────────────────────────────────
   PBS CTAs are pill-shaped ("Start Watching" / "My List").
   Cards + media use a small, quiet radius. */
:root{
  --radius-none:0;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --radius-button:999px;  /* pill by default */
  --radius-card:12px;
  --radius-media:8px;
}

/* tokens/shadows.css */
/* SHADOWS ────────────────────────────────────────────
   Cool, navy-tinted, restrained. The brand is largely flat;
   elevation is used sparingly for cards, menus, dialogs. */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(10,20,90,.06);
  --shadow-sm:0 1px 3px rgba(10,20,90,.08),0 1px 2px rgba(10,20,90,.06);
  --shadow-md:0 4px 12px rgba(10,20,90,.10),0 2px 4px rgba(10,20,90,.06);
  --shadow-lg:0 12px 28px rgba(10,20,90,.14),0 4px 8px rgba(10,20,90,.08);
  --shadow-xl:0 24px 48px rgba(10,20,90,.18);
  --shadow-focus:0 0 0 3px rgba(72,108,216,.45);  /* light-blue focus ring */
  --ring-focus:0 0 0 3px rgba(72,108,216,.45);
}