/* ==========================================================================
   RankVex design tokens
   Reuse these on every page. Components reference tokens, never raw values.
   ========================================================================== */
:root {
  /* ---- Brand ------------------------------------------------------------ */
  --rv-plum: #483A72;          /* legacy brand purple, used for deep tones */
  --rv-violet-25: #FBFAFF;
  --rv-violet-50: #F5F3FF;
  --rv-violet-100: #ECE8FD;
  --rv-violet-200: #D9D2FA;
  --rv-violet-300: #BCB0F4;
  --rv-violet-500: #6A55E3;
  --rv-violet-600: #5440C9;    /* primary action */
  --rv-violet-700: #4533AB;
  --rv-violet-800: #36298A;
  --rv-violet-900: #241C5C;

  /* ---- Accents (icons, chips, data) — pair *-500 icon with *-50 tile ---- */
  --rv-teal-50: #E7F7F4;  --rv-teal-500: #0F9C8C;  --rv-teal-700: #0A7066;
  --rv-sky-50: #E8F1FE;   --rv-sky-500: #2D7FF9;   --rv-sky-700: #1A5FC7;
  --rv-coral-50: #FEEEEA; --rv-coral-500: #EE6247; --rv-coral-700: #B8402A;
  --rv-amber-50: #FDF4E1; --rv-amber-500: #E39A0E; --rv-amber-700: #94600A;
  --rv-rose-50: #FDEBF2;  --rv-rose-500: #DD457E;  --rv-rose-700: #A82D5C;
  --rv-green-50: #E6F6EC; --rv-green-500: #1F9D55; --rv-green-700: #15703C;

  /* ---- Neutrals / text -------------------------------------------------- */
  --rv-ink: #17132B;           /* headings */
  --rv-text: #3B3753;          /* body */
  --rv-muted: #67637F;         /* secondary text (AA on white & tints) */
  --rv-subtle: #8F8AA8;        /* captions on white only, large/aux text */

  /* ---- Surfaces --------------------------------------------------------- */
  --rv-bg: #FCFBFF;
  --rv-surface: #FFFFFF;
  --rv-surface-2: #F7F5FD;     /* soft tint section */
  --rv-surface-warm: #FFF8F4;  /* warm tint section */
  --rv-surface-sunk: #F2F0FA;  /* inputs, wells */

  /* ---- Borders ---------------------------------------------------------- */
  --rv-border: #E8E5F3;
  --rv-border-strong: #D5D0EA;
  --rv-border-focus: var(--rv-violet-500);

  /* ---- Shadows (violet-tinted, layered) --------------------------------- */
  --rv-shadow-xs: 0 1px 2px rgba(36, 28, 92, .06);
  --rv-shadow-sm: 0 1px 2px rgba(36, 28, 92, .05), 0 2px 6px rgba(36, 28, 92, .05);
  --rv-shadow-md: 0 2px 4px rgba(36, 28, 92, .04), 0 8px 24px -6px rgba(36, 28, 92, .10);
  --rv-shadow-lg: 0 4px 8px rgba(36, 28, 92, .04), 0 24px 48px -12px rgba(36, 28, 92, .18);
  --rv-shadow-focus: 0 0 0 3px #fff, 0 0 0 5px var(--rv-violet-500);

  /* ---- Typography ------------------------------------------------------- */
  --rv-font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  --rv-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rv-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale (360px → 1440px) */
  --rv-step--2: clamp(.75rem, .73rem + .08vw, .8rem);
  --rv-step--1: clamp(.84rem, .82rem + .1vw, .9rem);
  --rv-step-0: clamp(1rem, .97rem + .14vw, 1.0625rem);
  --rv-step-1: clamp(1.125rem, 1.07rem + .26vw, 1.25rem);
  --rv-step-2: clamp(1.3rem, 1.2rem + .48vw, 1.6rem);
  --rv-step-3: clamp(1.6rem, 1.38rem + 1vw, 2.25rem);
  --rv-step-4: clamp(1.95rem, 1.6rem + 1.6vw, 3rem);
  --rv-step-5: clamp(2.25rem, 1.7rem + 2.45vw, 3.75rem);

  --rv-leading-tight: 1.08;
  --rv-leading-snug: 1.3;
  --rv-leading-body: 1.65;
  --rv-tracking-tight: -.025em;
  --rv-tracking-caps: .08em;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --rv-space-1: .25rem;  --rv-space-2: .5rem;  --rv-space-3: .75rem;
  --rv-space-4: 1rem;    --rv-space-5: 1.25rem; --rv-space-6: 1.5rem;
  --rv-space-8: 2rem;    --rv-space-10: 2.5rem; --rv-space-12: 3rem;
  --rv-space-16: 4rem;   --rv-space-20: 5rem;
  --rv-section-y: clamp(4rem, 2.6rem + 5.5vw, 7rem);
  --rv-gutter: clamp(1rem, .5rem + 2.4vw, 2rem);
  --rv-container: 1200px;
  --rv-container-wide: 1320px;
  --rv-header-h: 72px;

  /* ---- Radii ------------------------------------------------------------ */
  --rv-radius-xs: 6px;
  --rv-radius-sm: 10px;
  --rv-radius-md: 14px;
  --rv-radius-lg: 20px;
  --rv-radius-xl: 28px;
  --rv-radius-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --rv-ease-out: cubic-bezier(.22, 1, .36, 1);
  --rv-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --rv-dur-fast: 160ms;
  --rv-dur-base: 280ms;
  --rv-dur-slow: 650ms;
  --rv-dur-reveal: 900ms;

  /* ---- Buttons ---------------------------------------------------------- */
  --rv-btn-h-sm: 38px;
  --rv-btn-h: 46px;
  --rv-btn-h-lg: 52px;
  --rv-btn-px-sm: 14px;
  --rv-btn-px: 20px;
  --rv-btn-px-lg: 26px;
  --rv-btn-radius: 12px;

  /* ---- Z-index ---------------------------------------------------------- */
  --rv-z-header: 100;
  --rv-z-overlay: 200;
}

@media (max-width: 760px) {
  :root { --rv-header-h: 64px; }
}