/*
  REVALYTICS — DESIGN TOKENS
  Single source of truth for all CSS custom properties.
  Import this file first in every page.

  NOTE: Legacy aliases (--blue, --navy, etc.) are kept because
  some CSS rules still reference them. Canonical tokens use --rev-* prefix.
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {

  /* ─── Brand Blues ─────────────────────────────────── */
  --rev-blue:       #0056eb;
  --rev-blue-600:   #0055ec;
  --rev-blue-500:   #4b85ea;
  --rev-blue-400:   #6281da;
  --rev-blue-300:   #a1b3e9;
  --rev-blue-200:   #c0cdf0;
  --rev-blue-100:   #e0e6f8;
  --rev-blue-50:    #e4edfc;
  --rev-blue-25:    #f6f9fe;

  /* ─── Navy / Dark ─────────────────────────────────── */
  --rev-navy-900:   #04122d;
  --rev-navy-800:   #040b25;
  --rev-navy-700:   #051430;
  --rev-navy-600:   #0d244f;
  --rev-navy-500:   #13192d;
  --rev-navy-400:   #181739;
  --rev-navy-gradient: linear-gradient(90deg, #0055ec 0%, #181739 100%);

  /* ─── Legacy aliases (still referenced in some rules) ─ */
  --blue:      #0056eb;
  --navy:      #04122d;
  --navy-2:    #040b25;
  --navy-3:    #181739;
  --navy-4:    #13192d;
  --pos:       #5c9767;
  --pos-bg:    #e1fae2;
  --neg:       #d08181;
  --neg-bg:    #fae9e9;
  --muted:     #8a8a8a;
  --text-body: #001230;
  --page:      #f2f3f7;
  --tint:      rgba(0, 86, 235, 0.05);
  --blue-50:   #e4edfc;
  --blue-25:   #f6f9fe;
  --cta-grad:  linear-gradient(90deg, #0055ec 0%, #181739 100%);
  --hero-grad: radial-gradient(ellipse at 50% 70%, #4b85ea 0%, #0d244f 55%, #04122d 100%);
  --card-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.15);
  --tile-shadow: -4px 8px 20px rgba(38, 35, 67, 0.06), -15px 33px 37px rgba(38, 35, 67, 0.05), -34px 75px 49px rgba(38, 35, 67, 0.03);
  --dur: 0.3s;

  /* ─── Surfaces & Neutrals ─────────────────────────── */
  --rev-white:        #ffffff;
  --rev-page:         #f2f3f7;
  --rev-surface-alt:  #fafbff;
  --rev-border:       #e4edfc;
  --rev-border-strong:#d9d9d9;
  --rev-divider:      rgba(4, 18, 45, 0.35);
  --rev-dark-border:  rgba(255, 255, 255, 0.09);
  --rev-nav-bg:       #ffffff;

  /* ─── Text ────────────────────────────────────────── */
  --rev-text:              #04122d;
  --rev-text-body:         #001230;
  --rev-text-muted:        #8a8a8a;
  --rev-text-light:        rgba(4, 18, 45, 0.6);
  --rev-text-on-dark:      #ffffff;
  --rev-text-on-dark-muted:rgba(255, 255, 255, 0.65);

  /* ─── Semantic ────────────────────────────────────── */
  --rev-pos:    #5c9767;
  --rev-pos-bg: #e1fae2;
  --rev-neg:    #e05555;
  --rev-neg-bg: #fae9e9;
  --rev-warn:   #c88a3a;
  --rev-warn-bg:#fbefd9;

  /* ─── Alpha fills ─────────────────────────────────── */
  --rev-glass-white:    rgba(255, 255, 255, 0.15);
  --rev-glass-white-2:  rgba(255, 255, 255, 0.75);
  --rev-blue-tint-5:    rgba(0, 86, 235, 0.05);
  --rev-blue-tint-50:   rgba(0, 86, 235, 0.5);
  --rev-blue-orb-30:    rgba(75, 133, 234, 0.3);
  --rev-blue-orb-15:    rgba(75, 133, 234, 0.15);

  /* ─── Gradients ───────────────────────────────────── */
  --rev-hero-gradient:      radial-gradient(ellipse at 50% 60%, #4b85ea 0%, #0d244f 55%, #04122d 100%);
  --rev-cta-gradient:       linear-gradient(90deg, #0055ec 0%, #181739 100%);
  --rev-tile-gradient:      radial-gradient(ellipse at center, #e4edfc 0%, #f2f3f6 100%);
  --rev-dark-tile-gradient: linear-gradient(180deg, #011d4e 0%, rgba(0, 86, 235, 0.8) 100%);
  --rev-faq-bg:             linear-gradient(180deg, #ffffff 0%, #f2f6fe 100%);

  /* ─── Shadows ─────────────────────────────────────── */
  --rev-shadow-card:       0 0 50px 0 rgba(0, 0, 0, 0.15);
  --rev-shadow-tile:       -4px 8px 20px 0 rgba(38, 35, 67, 0.06),
                           -15px 33px 37px 0 rgba(38, 35, 67, 0.05),
                           -34px 75px 49px 0 rgba(38, 35, 67, 0.03),
                           -60px 134px 59px 0 rgba(38, 35, 67, 0.01);
  --rev-shadow-pill:       0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --rev-shadow-inset-blue: inset -3px -2px 9px 0 rgba(74, 131, 230, 0.17);

  /* ─── Border Radii ────────────────────────────────── */
  --rev-radius-sm:   10px;
  --rev-radius-md:   20px;
  --rev-radius-lg:   25px;
  --rev-radius-xl:   30px;
  --rev-radius-pill: 100px;
  --rev-radius-nav:  60px;

  /* ─── Spacing ─────────────────────────────────────── */
  --rev-space-1:  4px;
  --rev-space-2:  8px;
  --rev-space-3:  12px;
  --rev-space-4:  16px;
  --rev-space-5:  20px;
  --rev-space-6:  25px;
  --rev-space-8:  35px;
  --rev-space-10: 50px;
  --rev-space-12: 73px;
  --rev-space-card-gutter: 30px;

  /* ─── Motion ──────────────────────────────────────── */
  --rev-dur:  0.3s;
  --rev-ease: ease;

  /* ─── Typography Families ─────────────────────────── */
  --rev-font-sans: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --rev-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── Type Scale ──────────────────────────────────── */
  --rev-text-xs:  12px;
  --rev-text-sm:  14px;
  --rev-text-base:16px;
  --rev-text-md:  18px;
  --rev-text-lg:  20px;
  --rev-text-xl:  22px;
  --rev-text-2xl: 24px;
  --rev-text-3xl: 28px;
  --rev-text-4xl: 36px;
  --rev-text-5xl: 40px;
  --rev-text-6xl: 50px;
  --rev-text-7xl: 70px;
  --rev-text-8xl: 110px;

  /* ─── Line Heights ────────────────────────────────── */
  --rev-leading-tight:  1.0;
  --rev-leading-snug:   1.2;
  --rev-leading-normal: 1.5;

  /* ─── Font Weights ────────────────────────────────── */
  --rev-weight-light:   300;
  --rev-weight-regular: 400;
  --rev-weight-medium:  500;
  --rev-weight-bold:    700;
  --rev-weight-black:   900;
}