/*
 * Devify brand typography overlay (devify-me, page-local)
 * ------------------------------------------------------------------
 * The upstream `@devify/ui` `devify-dark` theme (tokens/themes/devify-dark.css, promoted
 * in devify-ui#399) is deliberately COLOR-ONLY — it maps every color role but ships no
 * font tokens and no @font-face wiring, so a consumer keeps its own type system.
 *
 * This small overlay restores devify.me's Saira/Inter brand type on top of the vendored
 * color theme. Load it ALONGSIDE the vendored devify-dark theme (after devify.css and the
 * vendored theme, so these font tokens win). Scoped to the same [data-theme="devify-dark"]
 * so it activates with the theme. Tokens only — no raw literals, no component patches.
 *
 *   · Inter             → body / UI (matches the upstream --dvfy-font-sans default; restated)
 *   · Saira             → all headings (--dvfy-font-brand repointed off the loud stencil)
 *   · Saira Stencil One → a single hero display accent only (--dvfy-font-display), used sparingly
 *
 * The three faces are loaded from Google Fonts by the consuming pages' <link> (display=swap).
 */

[data-theme="devify-dark"] {
  /* Body / UI sans — Inter (matches upstream default, restated for clarity). */
  --dvfy-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif,
                    'Apple Color Emoji', 'Segoe UI Emoji';

  /* Headings — Saira (NOT the stencil). All H1–H4 role families resolve through
     --dvfy-font-brand, so repointing it here restyles every heading at once. */
  --dvfy-font-brand: 'Saira', var(--dvfy-font-sans);

  /* Display accent — Saira Stencil One, for the single hero accent only. */
  --dvfy-font-display: 'Saira Stencil One', var(--dvfy-font-brand);
}