/* The --vd-* design tokens, the single source of truth for every component that
   styles itself from them: the media card (video grids), the mini product card,
   the byline, the transcript, the table of contents, the accordion.

   Extracted from `.vd` in videos/css/video.css when the home started rendering
   the shared media card (#529). An unresolved var() does not fall back — it
   kills the whole declaration — so a component rendered outside `.vd` lost its
   border, its radius and its ink colour outright. That trap had already been hit
   on the blog, which answered it by copying the values; a third copy on the home
   would have made drift a matter of time.

   Declared on :root rather than on `.vd`, so loading this file is the only thing
   a page has to do — no wrapper class to remember. `.vd` in video.css keeps what
   is genuinely page-level (color, font-size, smoothing). */
:root {
    --vd-ink: #15181c;
    --vd-body: #2b3038;
    --vd-muted: #515862;
    --vd-icon: #5b6470;
    --vd-line: #e4e7ea;
    --vd-bg-soft: #f3f6f4;
    --vd-chip-bg: #eef1f3;
    --vd-chip-ink: #2b3038;
    /* The card's own surface and its hover border. Tokens rather than the
       literals they used to be, so a dark band can re-theme the card by
       redeclaring them in its own scope — see .home-video-grid. */
    --vd-surface: #ffffff;
    --vd-line-strong: #cfd4d9;
    --vd-primary: #ec7330;
    --vd-primary-dark: #d9601f;
    --vd-primary-tint: #fff3ec;
    --vd-radius: 14px;
    --vd-shadow: 0 6px 24px rgba(20, 30, 25, 0.10);
    /* single reading-size token — applied to every prose block (description,
       L'essentiel, FAQ, transcript) so the editorial voice has ONE body size.
       17px is the prudent end of the 17–18px reading range (never 19px). */
    --vd-read: 17px;
}