/* ============================================================
   ReviewsGauge — Design Tokens (REAL brand system)
   Colors extracted from the official brand SVG assets.
   Primary = blue, accent = red #D95062, font = Inter.
   ============================================================ */

:root {
  /* ---- Brand color ---- */
  --rg-blue:        #004AA7; /* PRIMARY — CTAs, links, active states */
  --rg-blue-hover:  #003D8C; /* darkened for hover/active */
  --rg-blue-bright: #2A84FC; /* secondary/bright blue, highlights */
  --rg-blue-soft:   #E8F0FB; /* tint for backgrounds, icon tiles, badges */
  --rg-navy:        #23252E; /* dark sections — a dark SHADE of brand Dark #444655 */
  --rg-navy-2:      #1b1d24; /* darker stop for dark-band gradients */

  --rg-red:         #D95062; /* ACCENT — eyebrows, key numbers, the star */
  --rg-red-soft:    #FBEAEC;

  --rg-ink:         #444655; /* BRAND Dark — headings, body */
  --rg-ink-soft:    #6E7180; /* lighter shade of brand Dark — secondary text */
  --rg-ink-faint:   #71747F; /* faint tint of brand Dark — marquee, fine print */
  --rg-on-dark:     #DDE0E8; /* primary text tint for dark bands */
  --rg-on-dark-muted:#B2B5C0; /* muted text tint for dark bands */
  --rg-red-deep:    #B0394A; /* darker shade of Secondary — error text */
  --rg-bg:          #F8F8FF; /* BRAND Light — page background */
  --rg-lavender:    #F4F8FD; /* section contrast (blue-cool light) */

  --rg-gold:        #FACC15; /* star ratings */
  --rg-success:     #00AC47; /* positive sentiment, success */
  --rg-success-soft:#E3F6EC;
  --rg-warning:     #F39035; /* alerts, risk */
  --rg-warning-soft:#FDEEDD;
  --rg-border:      #E5E7EB; /* cards, tables, dividers */
  --rg-white:       #FFFFFF;

  /* ---- Semantic aliases ---- */
  --rg-text:        var(--rg-ink);
  --rg-text-muted:  var(--rg-ink-soft);
  --rg-surface:     var(--rg-white);
  --rg-surface-alt: var(--rg-lavender);
  --rg-cta:         var(--rg-blue);
  --rg-cta-hover:   var(--rg-blue-hover);
  --rg-focus-ring:  #2A84FC;

  /* ---- Typography (Inter throughout — matches the product) ---- */
  --rg-font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rg-fs-display: clamp(2.8rem, 2rem + 4vw, 4.6rem);   /* matches homepage hero H1 */
  --rg-fs-h1:      clamp(2rem, 1.4rem + 2vw, 3rem);       /* matches homepage section H2 */
  --rg-fs-h2:      clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --rg-fs-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  --rg-fs-lead:    clamp(1.1rem, 1rem + 0.4vw, 1.3rem);   /* matches homepage lead */
  --rg-fs-body:    1rem;
  --rg-fs-small:   0.875rem;
  --rg-fs-eyebrow: 0.8125rem;

  --rg-lh-tight:   1.05;
  --rg-lh-snug:    1.3;
  --rg-lh-body:    1.6;

  --rg-fw-reg:  400;
  --rg-fw-med:  500;
  --rg-fw-semi: 600;
  --rg-fw-bold: 700;
  --rg-fw-x:    800;

  --rg-ls-eyebrow: 0.08em;
  --rg-ls-head:   -0.03em; /* matches homepage headings */

  /* ---- Spacing ---- */
  --rg-space-1:.25rem; --rg-space-2:.5rem; --rg-space-3:.75rem; --rg-space-4:1rem;
  --rg-space-5:1.5rem; --rg-space-6:2rem; --rg-space-7:3rem; --rg-space-8:4rem; --rg-space-9:6rem;
  --rg-section-y-desktop: clamp(64px, 8vw, 120px);   /* matches homepage section rhythm */
  --rg-section-y-tablet:  clamp(48px, 6vw, 64px);
  --rg-section-y-mobile:  clamp(32px, 8vw, 48px);

  /* ---- Layout ---- */
  --rg-container: 1200px;   /* matches homepage */
  --rg-container-pad: clamp(1rem, 4vw, 2rem);

  /* ---- Radius ---- */
  --rg-radius-sm: 8px;
  --rg-radius:    16px;   /* matches homepage --r */
  --rg-radius-lg: 20px;   /* matches homepage cards */
  --rg-radius-pill: 999px;

  /* ---- Shadow ---- */
  --rg-shadow-sm: 0 1px 2px rgba(14,17,38,.06);
  --rg-shadow:    0 6px 20px rgba(14,17,38,.08);
  --rg-shadow-lg: 0 22px 54px rgba(14,17,38,.16);

  /* ---- Motion ---- */
  --rg-ease: cubic-bezier(.22,1,.36,1);
  --rg-dur-fast: 150ms; --rg-dur: 240ms; --rg-dur-slow: 420ms;
}

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