/* =========================================================================
   DealRadar design tokens — the single source of truth for the visual system.

   Loaded before every other DealRadar stylesheet. The legacy :root blocks in
   site.css, v2.css and brand-system.css now alias these values instead of
   declaring three competing palettes, so one change here moves the whole site.

   Palette is the DealRadar brand palette recorded in CLAUDE.md. Bright signal
   colours are reserved for state and emphasis; they are not surface colours.
   ========================================================================= */

:root {
    /* ---- Surfaces (darkest to lightest) ---------------------------------- */
    --dr-midnight-950: #050713;
    --dr-midnight-900: #080B18;
    --dr-navy-850: #0C1120;
    --dr-navy-800: #11182A;
    --dr-navy-700: #1A2438;

    /* ---- Signals — used sparingly, never as decoration -------------------- */
    --dr-green: #2CF76B;
    --dr-green-600: #18D95A;
    --dr-teal: #00D6B2;
    --dr-indigo: #5A4DEC;
    --dr-cyan: #38D9FF;
    --dr-warning: #FFB84D;
    --dr-danger: #FF5C72;

    /* ---- Text — all pass WCAG AA on --dr-midnight-900 --------------------- */
    --dr-text: #F8FAFC;
    --dr-text-soft: #C6D0E0;
    --dr-text-muted: #94A3B8;

    /* ---- Lines: borders carry structure, not shadows ---------------------- */
    --dr-line: rgba(248, 250, 252, 0.10);
    --dr-line-strong: rgba(248, 250, 252, 0.17);
    --dr-line-signal: rgba(44, 247, 107, 0.34);

    /* ---- Tinted signal washes -------------------------------------------- */
    --dr-green-wash: rgba(44, 247, 107, 0.09);
    --dr-green-wash-soft: rgba(44, 247, 107, 0.05);
    --dr-indigo-wash: rgba(90, 77, 236, 0.14);
    --dr-danger-wash: rgba(255, 92, 114, 0.12);
    --dr-warning-wash: rgba(255, 184, 77, 0.12);

    /* ---- Radii — restrained -------------------------------------------- */
    --dr-radius-sm: 6px;
    --dr-radius-md: 10px;
    --dr-radius-lg: 14px;
    --dr-radius-pill: 999px;

    /* ---- Spacing scale --------------------------------------------------- */
    --dr-space-1: 4px;
    --dr-space-2: 8px;
    --dr-space-3: 12px;
    --dr-space-4: 16px;
    --dr-space-5: 20px;
    --dr-space-6: 24px;
    --dr-space-8: 32px;
    --dr-space-10: 40px;
    --dr-space-14: 56px;
    --dr-space-18: 72px;

    /* ---- Type scale.
       --dr-text-xs is the legibility floor for any UI text. Nothing in the
       product may render smaller; the old 0.6rem (9.6px) nav labels and
       0.7rem chrome were below a readable size. ---------------------------- */
    --dr-text-xs: 0.75rem;    /* 12px — overlines, badges, table meta        */
    --dr-text-sm: 0.8125rem;  /* 13px — nav, labels, dense table cells       */
    --dr-text-base: 0.9375rem;/* 15px — body copy inside the product          */
    --dr-text-md: 1.0625rem;  /* 17px — marketing body copy                   */

    /* ---- Minimum interactive target -------------------------------------- */
    --dr-touch-min: 44px;

    /* ---- Layout ---------------------------------------------------------- */
    --dr-container: 1180px;
    /* The sidebar is fixed, so the content offset must be derived from its
       geometry rather than declared separately. They disagreed before:
       brand-system.css widened the sidebar to 232px while the offset stayed at
       236px against an 18px inset, so the sidebar covered the left edge of the
       content. */
    --dr-sidebar-gap: 18px;
    --dr-sidebar-w: 232px;
    --dr-sidebar-w-compact: 200px;
    --dr-sidebar-offset: calc(var(--dr-sidebar-gap) + var(--dr-sidebar-w) + var(--dr-space-4));
    --dr-sidebar-offset-compact: calc(var(--dr-sidebar-gap) + var(--dr-sidebar-w-compact) + var(--dr-space-3));
    --dr-header-h: 74px;
    /* The authenticated header is deliberately shorter than the marketing one.
       The sidebar's top offset derives from it so the two cannot drift. */
    --dr-app-header-h: 56px;

    /* ---- Motion.
       Three speeds only. Feedback is near-instant, UI transitions are calm,
       storytelling is slower. One easing curve keeps the product coherent. -- */
    --dr-motion-fast: 120ms;
    --dr-motion-base: 180ms;
    --dr-motion-slow: 300ms;
    --dr-motion-story: 560ms;
    --dr-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
    --dr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- Elevation — subtle; borders do the structural work -------------- */
    --dr-shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.30);
    --dr-shadow-overlay: 0 28px 70px rgba(0, 0, 0, 0.46);

    /* ---- Compatibility aliases.
       Names previously declared by brand-assets.css and dealradar-motion.css.
       Those two files already used the correct DealRadar palette, but were
       injected by JavaScript after first paint. Their tokens live here now so
       the values are declared exactly once. ------------------------------- */
    --dr-bg: var(--dr-midnight-950);
    --dr-bg-app: var(--dr-midnight-900);
    --dr-surface: var(--dr-navy-850);
    --dr-surface-raised: var(--dr-navy-800);
    --dr-border: var(--dr-navy-700);
    --dr-text-secondary: var(--dr-text-soft);
    --dr-green-hover: var(--dr-green-600);
    --dr-green-active: #10B94C;
    --dr-indigo-light: #807FE8;
    --dr-icons: url("/images/v2/icons.webp");
}

/* Breakpoint scale used across every DealRadar stylesheet. Custom properties
   cannot be used inside media queries, so the scale is documented here and
   applied literally. New CSS must use only these five values.

     480px   small mobile        (design target: 390px)
     640px   large mobile
     860px   tablet / sidebar collapse
     1100px  small desktop
     1400px  large desktop       (design target: 1440px)
*/

/* Reduced motion: neutralise the durations at the token level so every
   component that uses them becomes still without needing its own override. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dr-motion-fast: 1ms;
        --dr-motion-base: 1ms;
        --dr-motion-slow: 1ms;
        --dr-motion-story: 1ms;
    }
}