/* ==========================================================================
   REVVO design tokens — REVVO-SYS-004
   Brand colors, type, spacing, radius, breakpoints (reference), motion.
   ========================================================================== */

:root {
  /* --- Brand violet scale (violet = Revvo, never system health) --- */
  --revvo-violet-50:  #F7F2FF;
  --revvo-violet-100: #EDE4FE;
  --revvo-violet-200: #DAC8FD;
  --revvo-violet-300: #C1A3FA;
  --revvo-violet-400: #A675F2;
  --revvo-violet-500: #8B46E9;
  --revvo-violet-600: #7433D1;
  --revvo-violet-700: #5B25B0;
  --revvo-violet-800: #441B86;
  --revvo-violet-900: #32175A;

  /* --- Neutrals --- */
  --revvo-graphite: #1F2329;
  --revvo-black:    #000000;
  --revvo-white:    #FFFFFF;
  --revvo-gray-50:  #F8F9FB;
  --revvo-gray-100: #F1F2F5;
  --revvo-gray-200: #E4E6EA;
  --revvo-gray-400: #98A2B3;
  --revvo-gray-600: #667085;
  --revvo-gray-800: #344054;

  /* --- Functional (system health / trust signaling) --- */
  --revvo-success: #15803D;
  --revvo-warning: #B45309;
  --revvo-error:   #B42318;
  --revvo-info:    #2563EB;

  /* --- Type --- */
  --revvo-font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --revvo-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --revvo-text-xs: 0.75rem;    /* 12px — eyebrows, captions */
  --revvo-text-sm: 0.875rem;   /* 14px */
  --revvo-text-md: 1rem;       /* 16px */
  --revvo-text-lg: 1.125rem;   /* 18px */
  --revvo-text-xl: 1.375rem;   /* 22px */
  --revvo-text-2xl: 1.75rem;   /* 28px */
  --revvo-text-3xl: 2.25rem;   /* 36px */
  --revvo-text-4xl: 3rem;      /* 48px */

  --revvo-leading-display: 1.05;
  --revvo-leading-tight: 1.2;
  --revvo-leading-body: 1.6;

  --revvo-tracking-display: -0.02em;
  --revvo-tracking-eyebrow: 0.14em;

  /* --- Layout --- */
  --revvo-max-width: 1280px;

  /* 4px-base spacing scale */
  --revvo-space-1: 0.25rem;   /* 4 */
  --revvo-space-2: 0.5rem;    /* 8 */
  --revvo-space-3: 0.75rem;   /* 12 */
  --revvo-space-4: 1rem;      /* 16 */
  --revvo-space-5: 1.5rem;    /* 24 */
  --revvo-space-6: 2rem;      /* 32 */
  --revvo-space-7: 3rem;      /* 48 */
  --revvo-space-8: 4rem;      /* 64 */
  --revvo-space-9: 6rem;      /* 96 */

  /* --- Radius --- */
  --revvo-radius-sm: 6px;
  --revvo-radius-md: 10px;
  --revvo-radius-lg: 16px;   /* cards */
  --revvo-radius-xl: 24px;   /* panels */
  --revvo-radius-pill: 999px; /* badges */

  /* --- Elevation (subtle; structure comes from spacing/borders/type) --- */
  --revvo-shadow-sm: 0 1px 2px rgba(31, 35, 41, 0.06);
  --revvo-shadow-md: 0 4px 12px rgba(31, 35, 41, 0.08);
  --revvo-shadow-lg: 0 12px 32px rgba(31, 35, 41, 0.10);

  /* --- Focus --- */
  --revvo-focus-ring: 3px solid var(--revvo-violet-700);
  --revvo-focus-offset: 3px;

  /* --- Motion --- */
  --revvo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --revvo-dur-fast: 150ms;
  --revvo-dur-med: 300ms;

  /* Breakpoints (reference): 640 / 768 / 1024 / 1280 */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --revvo-dur-fast: 0ms;
    --revvo-dur-med: 0ms;
  }
}