/* dns-tokens-ext.css
   DRAFT - pending designer sign-off. Version 1 (2026-11-02).

   Additions to tokens/dns-tokens.css, which is frozen. The mockups use about 40 one-off
   clamp() sizes and raw translucent colors that have no token. This consolidates them into
   one small scale derived from existing tokens. Promote these into tokens/ once approved.

   The frozen type classes are desktop-only (.dns-h1 is a fixed 72px). The second block
   makes them fluid so they pass the mobile rule, without forking the frozen file. */

/* Fallback fonts sized to match the web fonts, so text doesn't reflow when they load.
   Values come from measuring each pair in Chrome. Re-measure if the licensed fonts replace these. */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); font-style: normal; size-adjust: 99.8%; ascent-override: 74.2%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'); font-style: italic; size-adjust: 90.7%; ascent-override: 81.6%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: 'Albert Sans Fallback'; src: local('Arial'); size-adjust: 103.2%; ascent-override: 92.1%; descent-override: 24.2%; line-gap-override: 0%; }

:root {
  /* The frozen font stacks, with the matched fallbacks added */
  --dns-font-primary: 'Albert Sans', 'Albert Sans Fallback', 'Helvetica Neue', Arial, sans-serif;
  --dns-font-serif: 'Newsreader', 'Newsreader Fallback', Georgia, serif;

  /* Fluid type scale */
  --dns-fluid-masthead: clamp(52px, 13.6vw, 195px);
  --dns-fluid-hero: clamp(42px, 4.9vw, 68px);
  --dns-fluid-display: clamp(44px, 5.6vw, 80px);
  --dns-fluid-title: clamp(38px, 4vw, 56px);
  --dns-fluid-heading: clamp(30px, 3vw, 44px);
  --dns-fluid-label: clamp(28px, 2.6vw, 38px);
  --dns-fluid-card: clamp(22px, 1.9vw, 28px);
  --dns-fluid-card-sm: clamp(19px, 1.5vw, 22px);
  --dns-fluid-lede: clamp(17px, 1.45vw, 20px);
  --dns-fluid-body: clamp(16px, 1.3vw, 18px);
  --dns-fluid-tile: clamp(26px, 2.3vw, 34px);
  --dns-fluid-tile-lg: clamp(38px, 4.2vw, 64px);
  --dns-fluid-tile-md: clamp(30px, 3vw, 46px);

  /* Layout */
  --dns-gutter: max(16px, min(var(--dns-header-padding), 5.5vw));
  --dns-radius-panel: clamp(28px, 4vw, 56px);
  --dns-radius-footer: clamp(20px, 2.6vw, 32px);
  --dns-section-space: clamp(80px, 11vw, 160px);

  /* Motion */
  --dns-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Translucent colors, mixed from palette tokens so they follow any palette change */
  --dns-color-line: color-mix(in srgb, var(--dns-color-ink) 18%, transparent);
  --dns-color-line-strong: color-mix(in srgb, var(--dns-color-ink) 28%, transparent);
  --dns-color-line-inverse: color-mix(in srgb, var(--dns-color-white) 22%, transparent);
  --dns-color-line-inverse-strong: color-mix(in srgb, var(--dns-color-white) 35%, transparent);
  --dns-color-inverse-soft: color-mix(in srgb, var(--dns-color-white) 80%, transparent);
  --dns-color-tile: color-mix(in srgb, var(--dns-color-white) 55%, transparent);
  --dns-color-scrim: color-mix(in srgb, var(--dns-color-blue-dark) 55%, transparent);
  --dns-color-glow: color-mix(in srgb, var(--dns-color-blue-light) 80%, transparent);
  --dns-color-glow-off: color-mix(in srgb, var(--dns-color-blue-light) 0%, transparent);

  /* Shadows */
  --dns-shadow-panel: 0 30px 60px -40px color-mix(in srgb, var(--dns-color-blue-dark) 45%, transparent);
  --dns-shadow-photo: 0 30px 80px -30px color-mix(in srgb, var(--dns-color-blue-dark) 35%, transparent);
  --dns-shadow-bar: 0 18px 40px -18px color-mix(in srgb, var(--dns-color-blue-dark) 55%, transparent);
  --dns-shadow-card: 0 40px 80px -40px color-mix(in srgb, var(--dns-color-blue-dark) 50%, transparent);
}

/* Fluid sizes for the frozen type classes */
.dns-display { font-size: var(--dns-fluid-hero); }
.dns-h1 { font-size: var(--dns-fluid-display); }
.dns-h2 { font-size: var(--dns-fluid-title); }
.dns-h3 { font-size: var(--dns-fluid-card); }