/* ==========================================================================
   DriverHub.Directory — Design Tokens
   Single source of truth. Palette is fixed by brand spec — do not add hues;
   derive variations only via transparency/mixes of these values.
   ========================================================================== */

:root {
    /* ---- Color: brand palette (spec, literal) ---- */
    --dh-primary: #10B981;        /* Trust Green — primary actions, active states */
    --dh-primary-dark: #0F172A;   /* Deep Navy — headings, nav, high-emphasis text */
    --dh-primary-light: #34D399;  /* Light Green — accents, gradients, decorative icons */
    --dh-bg: #F8FAFC;             /* Page background */
    --dh-text: #475569;           /* Body text */
    --dh-success: #22C55E;
    --dh-warning: #F59E0B;
    --dh-error: #EF4444;

    /* ---- Color: derived (transparency/mix of palette only) ---- */
    --dh-primary-soft: rgba(16, 185, 129, 0.10);   /* tag/chip backgrounds */
    --dh-primary-softer: rgba(16, 185, 129, 0.06); /* hover washes */
    --dh-primary-ring: rgba(16, 185, 129, 0.25);   /* focus rings */
    --dh-primary-hover: #0EA372;                   /* primary mixed toward navy (hover) */
    --dh-navy-soft: rgba(15, 23, 42, 0.06);
    --dh-navy-muted: rgba(15, 23, 42, 0.55);
    --dh-success-soft: rgba(34, 197, 94, 0.12);
    --dh-warning-soft: rgba(245, 158, 11, 0.14);
    --dh-error-soft: rgba(239, 68, 68, 0.10);
    --dh-surface: #FFFFFF;
    --dh-border: #E2E8F0;          /* slate family of --dh-bg */
    --dh-border-strong: #CBD5E1;
    --dh-text-muted: #64748B;

    /* ---- Typography ---- */
    --dh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --dh-font-heading: "Manrope", "Inter", system-ui, sans-serif;
    --dh-fs-display: 2.5rem;   /* 40px — landing hero */
    --dh-fs-h1: 2rem;          /* 32px */
    --dh-fs-h2: 1.5rem;        /* 24px */
    --dh-fs-h3: 1.25rem;       /* 20px */
    --dh-fs-h4: 1.125rem;      /* 18px */
    --dh-fs-body: 1rem;        /* 16px — sunlight-readable floor */
    --dh-fs-small: 0.875rem;   /* 14px */
    --dh-fs-caption: 0.75rem;  /* 12px — labels/eyebrows only */
    --dh-lh-body: 1.6;
    --dh-lh-heading: 1.2;

    /* ---- Spacing (base-4 scale) ---- */
    --dh-space-1: 4px;
    --dh-space-2: 8px;
    --dh-space-3: 12px;
    --dh-space-4: 16px;
    --dh-space-6: 24px;
    --dh-space-8: 32px;
    --dh-space-12: 48px;
    --dh-space-16: 64px;

    /* ---- Radius ---- */
    --dh-radius-sm: 8px;
    --dh-radius-md: 12px;
    --dh-radius-lg: 16px;
    --dh-radius-pill: 999px;

    /* ---- Shadows (soft, layered, low-opacity) ---- */
    --dh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --dh-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.08);
    --dh-shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.05), 0 16px 40px rgba(15, 23, 42, 0.12);

    /* ---- Layout ---- */
    --dh-touch-target: 44px;
    --dh-bottomnav-height: 64px;
    --dh-z-sticky: 1020;
    --dh-z-bottomnav: 1030;
    --dh-z-toast: 1080;

    /* ---- Motion ---- */
    --dh-transition: 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dh-transition: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}