/* ============================================================================
   mdx-tokens.css — THE single source of the MarketDX warm-neutral design tokens.
   ----------------------------------------------------------------------------
   :root custom properties ONLY — no reset, no base type, no components. Imported by
   BOTH sides of the site so every brand page resolves the same tokens from ONE place:
     · /css/taste-core.css   → the APP island (feed/portfolio/playlist/asset/explore/countries)
     · /css/site-nav.css     → the MARKETING island (blog, for-*, impact, privacy, terms, …)

   Page/app-specific tokens (finance --gain/--loss, marketing --pos/--neg/--line, or a
   deliberately-drifted --shadow/--radius) are layered ON TOP next to their surface — a page
   just redefines the one token it needs after this file loads.
   Extracted from taste-core.css 2026-08-01 (values byte-identical) to collapse the token islands.
   ============================================================================ */
:root{
  /* ---- warm-neutral canvas + ink (every neutral is warm-tinted; pure #000 only for black blocks) */
  --bg:#F7F6F2;          /* warm ivory canvas */
  --ivory:#F0EEE9;       /* secondary surface / light-on-dark */
  --black:#000;          /* full-bleed black blocks, pills, buttons */
  --dark-warm:#2A2521;   /* dark warm surface variant */
  --muted:#76726C;       /* secondary text */
  --dim:#ABA298;         /* dim text on dark */
  --border-medium:#cbc6bb; /* warm hairline border */
  --success:#10B981;     /* status dot "on" */
  --error:#EF4444;       /* destructive action (sign out) */

  /* ---- form: pill + tile radii, the single shadow, base spacing unit ---- */
  --radius:28px;         /* media tiles / large cards */
  --radius-sm:18px;      /* small cards */
  --pill:9999px;         /* nav, buttons, inputs, tags */
  --shadow:0 25px 50px -12px rgba(0,0,0,.25);  /* spent ONCE — on floating/overlay layers only */
  --shadow-std:0 16px 12px -12px rgba(0,0,0,.2);  /* STANDARD subtle drop shadow — reuse across floating chrome (nav, chips, …) */
  --unit:12px;
  --nav-clear:9rem;      /* top-space a full-bleed black hero needs so the fixed pill nav never covers its text.
                            SINGLE SOURCE — both .hub-hero and .mt-hero read var(--nav-clear); change here = both move. */

  /* ---- CARD SURFACE — the shared standard for every content card (feed · note · related · peer).
     White surface on the warm canvas + a hairline that darkens + a soft lift on hover. Radius scales
     with the card's size (compact rail = 12, content feed/note = --radius-sm). Owning them here means
     one edit re-skins every card type. ---- */
     Values match the already-liked related-asset card (.rl-card) exactly, so every card reads the same:
     white, faint hairline, NO rest shadow, and on hover the hairline darkens + a soft shadow (no bounce). */
  --card-bg:#fff;                                   /* white surface — reads as a distinct plane on --bg */
  --card-border-color:rgba(0,0,0,.08);              /* hairline at rest — = .rl-card */
  --card-border-hover:rgba(0,0,0,.22);              /* hairline darkens on hover — = .rl-card */
  --card-shadow-hover:0 2px 10px rgba(0,0,0,.05);   /* soft shadow on hover, NO transform/lift — = .rl-card */

  /* ---- type families: --font / --font-serif / --font-mono now live in mdx-fonts.css (the single
         font source, linked on every page). Don't redefine them here. ---- */
}