/* ══════════════════════════════════════════════════════════
   dr.ps — Unified design tokens
   ─────────────────────────────────
   Single source of truth for spacing, radius, elevation,
   typography. Loaded BEFORE feed.css so all UI components
   pick the same values.
   Color palette stays in feed.css (--fd-*).
══════════════════════════════════════════════════════════ */
:root {

    /* ─────────────── Spacing (4px base scale) ─────────────── */
    --ds-space-1:  4px;
    --ds-space-2:  8px;
    --ds-space-3:  12px;
    --ds-space-4:  16px;
    --ds-space-5:  20px;
    --ds-space-6:  24px;
    --ds-space-7:  28px;
    --ds-space-8:  32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* ─────────────── Border radius ─────────────── */
    --ds-r-xs:   4px;
    --ds-r-sm:   6px;
    --ds-r-md:   10px;
    --ds-r-lg:   14px;
    --ds-r-xl:   20px;
    --ds-r-pill: 100px;

    /* ─────────────── Elevation (medical: subtle) ─────────────── */
    --ds-sh-0:  none;
    --ds-sh-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --ds-sh-md: 0 2px 8px rgba(15, 23, 42, .07);
    --ds-sh-lg: 0 8px 24px rgba(15, 23, 42, .10);

    /* Focused/hover micro-elevation */
    --ds-sh-focus: 0 0 0 3px rgba(30, 64, 175, .15);

    /* ─────────────── Typography ─────────────── */
    --ds-fs-xs:   11px;
    --ds-fs-sm:   12.5px;
    --ds-fs-base: 14px;
    --ds-fs-md:   15px;
    --ds-fs-lg:   17px;
    --ds-fs-xl:   20px;
    --ds-fs-2xl:  24px;
    --ds-fs-h:    30px;

    --ds-lh-tight: 1.3;
    --ds-lh-base:  1.6;
    --ds-lh-loose: 1.8;

    --ds-fw-regular: 400;
    --ds-fw-medium:  500;
    --ds-fw-bold:    700;
    --ds-fw-heavy:   800;

    /* ─────────────── Motion ─────────────── */
    --ds-t-fast: .15s ease;
    --ds-t-base: .25s ease;
    --ds-t-slow: .4s  ease;

    /* ─────────────── Z-index ─────────────── */
    --ds-z-base:    1;
    --ds-z-elev:    10;
    --ds-z-sticky:  100;
    --ds-z-fab:     900;
    --ds-z-topbar:  1000;
    --ds-z-dropdown:1100;
    --ds-z-modal:   1200;

    /* ─────────────── Layout ─────────────── */
    --ds-container-narrow: 720px;
    --ds-container-base:   1100px;
    --ds-container-wide:   1400px;
}

/* Reduced motion — accessibility */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-t-fast: 0s;
        --ds-t-base: 0s;
        --ds-t-slow: 0s;
    }
}