/*
 * Design tokens — single source of truth for colours, type, spacing, shape.
 * Values come from _mockup.css (V2 redesign mockups).
 */

:root {
    /* Brand colours */
    --rm-red:        #C62828;
    --rm-red-dark:   #8E0000;
    --rm-red-light:  #EF5350;
    --rm-black:      #121212;
    --rm-charcoal:   #1A1A2E;
    --rm-mid-gray:   #444B53;
    --rm-light-gray: #F4F5F7;
    --rm-border:     #E2E4E8;
    --rm-accent:     #F5A623;

    /* Surfaces */
    --rm-bg:         #FFFFFF;
    --rm-surface-1:  #FFFFFF;
    --rm-surface-2:  #F9FAFB;
    --rm-surface-3:  #F4F5F7;

    /* Text */
    --rm-text:       #1A1A2E;
    --rm-text-soft:  #444B53;
    --rm-text-muted: #8A8F95;
    --rm-text-on-dark: #FFFFFF;

    /* Type */
    --rm-font-h: 'Barlow Condensed', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --rm-font-b: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --rm-fs-xs:   12px;
    --rm-fs-sm:   14px;
    --rm-fs-md:   16px;
    --rm-fs-lg:   18px;
    --rm-fs-xl:   22px;
    --rm-fs-2xl:  28px;
    --rm-fs-3xl:  36px;
    --rm-fs-4xl:  48px;
    --rm-lh-tight: 1.15;
    --rm-lh-base:  1.5;
    --rm-lh-loose: 1.75;

    /* Spacing scale (8px base) */
    --rm-sp-0:  0;
    --rm-sp-1:  4px;
    --rm-sp-2:  8px;
    --rm-sp-3:  12px;
    --rm-sp-4:  16px;
    --rm-sp-5:  24px;
    --rm-sp-6:  32px;
    --rm-sp-7:  48px;
    --rm-sp-8:  64px;
    --rm-sp-9:  96px;

    /* Shape */
    --tap:        44px;    /* WCAG-friendly min touch target */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);

    /* Layout */
    --rm-container-max: 1240px;
    --rm-container-pad-mobile: 16px;
    --rm-container-pad-desktop: 32px;
    --rm-header-h-mobile: 56px;
    --rm-header-h-desktop: 72px;
    --rm-bottomnav-h: 64px;

    /* z-index scale */
    --rm-z-bottomnav: 90;
    --rm-z-header:    100;
    --rm-z-drawer:    1000;
    --rm-z-overlay:   1100;
    --rm-z-modal:     1200;
    --rm-z-toast:     1300;

    /* Motion */
    --rm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --rm-dur-fast: 120ms;
    --rm-dur-base: 220ms;
    --rm-dur-slow: 360ms;
}

/* Honour user motion preferences — disable our transitions when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --rm-dur-fast: 0ms;
        --rm-dur-base: 0ms;
        --rm-dur-slow: 0ms;
    }
}