/* ========================================
   RoofRunner Design Tokens
   Monochromatic design language matching
   the mobile app and marketing site.
   ======================================== */

:root {
    /* Colors — Primary */
    --rr-primary: #000000;
    --rr-primary-hover: #1a1a1a;
    --rr-on-primary: #ffffff;

    /* Colors — Background & Surface */
    --rr-bg: #F9FAFB;
    --rr-surface: #FFFFFF;
    --rr-surface-hover: #F7F7F7;
    --rr-surface-muted: #FAFAFA;

    /* Colors — Text */
    --rr-text: rgba(0, 0, 0, 0.87);
    --rr-text-secondary: rgba(0, 0, 0, 0.54);
    --rr-text-disabled: rgba(0, 0, 0, 0.38);
    --rr-text-strong: #111111;

    /* Colors — Borders */
    --rr-border: #E5E7EB;
    --rr-border-light: rgba(0, 0, 0, 0.06);

    /* Colors — Status (monochrome: status conveyed by weight/icons, not hue) */
    --rr-error: #1A1A1A;
    /* The single intentional hue in the monochrome system: form validation only.
       Used to flag missing/invalid fields so users can spot what to fix. */
    --rr-validation: #C62828;
    --rr-error-bg: rgba(0, 0, 0, 0.05);
    --rr-error-border: rgba(0, 0, 0, 0.18);
    --rr-success: #555555;
    --rr-success-bg: rgba(0, 0, 0, 0.04);
    --rr-success-border: rgba(0, 0, 0, 0.12);
    --rr-warning: #555555;
    --rr-warning-bg: rgba(0, 0, 0, 0.04);
    --rr-warning-border: rgba(0, 0, 0, 0.12);
    --rr-info: #555555;
    --rr-info-bg: rgba(0, 0, 0, 0.04);
    --rr-info-border: rgba(0, 0, 0, 0.12);

    /* Inversion — the single highlight mechanism */
    --rr-invert-bg: #111111;
    --rr-invert-text: #FFFFFF;

    /* Radius */
    --rr-radius-sm: 8px;
    --rr-radius-md: 12px;
    --rr-radius-lg: 16px;
    --rr-radius-pill: 9999px;

    /* Shadows */
    --rr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
    --rr-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.03);
    --rr-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
    --rr-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* Spacing */
    --rr-space-xs: 4px;
    --rr-space-sm: 8px;
    --rr-space-md: 16px;
    --rr-space-lg: 24px;
    --rr-space-xl: 32px;

    /* Transitions */
    --rr-transition: 200ms ease;
    --rr-transition-slow: 300ms ease;

    /* Font */
    --rr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Drawer */
    --rr-drawer-width: 240px;
}