/* ============================================================
   Revi — Colors & Typography
   Dark-mode-first CRM for e-commerces (WhatsApp + Email + SMS)
   ============================================================ */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ——————————————————————————————————————————————
     BRAND — NAVY GRADIENT SYSTEM
     Revi's identity lives on a deep navy base with a
     soft vertical gradient. Always pair with high-contrast
     text and a vibrant accent (lime or sky-blue).
     —————————————————————————————————————————————— */
  --navy-950: #05091F;   /* deepest — backdrop */
  --navy-900: #0A1030;   /* primary bg */
  --navy-800: #121A46;   /* elevated surface */
  --navy-700: #1B2566;   /* card/hover */
  --navy-600: #2A3687;   /* borders, dividers on navy */
  --navy-500: #3E4BB0;   /* mid accents */

  /* ——————————————————————————————————————————————
     ACCENTS — Azul claro + Verde vibrante
     —————————————————————————————————————————————— */
  --sky-400:  #7CC6FF;   /* azul claro — hover / highlight */
  --sky-500:  #56BBEE;   /* azul claro oficial Revi (logo) */
  --sky-600:  #1E86E6;

  --brand-blue: #0A40C6; /* azul navy oficial Revi (logo + wordmark) */
  --brand-green: #32C700; /* verde oficial Revi (logo) */

  --lime-300: #CFFF6B;   /* verde vibrante (brighter) */
  --lime-400: #32C700;   /* verde oficial Revi — primary CTA */
  --lime-500: #2AA800;   /* verde oficial — pressed */

  /* ——————————————————————————————————————————————
     NEUTRALS
     —————————————————————————————————————————————— */
  --white:   #FFFFFF;
  --ink-50:  #F5F7FB;
  --ink-100: #E6EAF3;
  --ink-200: #C5CCE0;
  --ink-300: #9AA3BE;
  --ink-400: #6E779A;
  --ink-500: #4A537A;

  /* ——————————————————————————————————————————————
     SEMANTIC — SURFACES & TEXT
     —————————————————————————————————————————————— */
  --bg:            var(--navy-900);
  --bg-deep:       var(--navy-950);
  --bg-elevated:   var(--navy-800);
  --bg-card:       var(--navy-700);
  --bg-overlay:    rgba(5, 9, 31, 0.72);

  --fg:            var(--white);
  --fg-1:          var(--white);
  --fg-2:          var(--ink-100);
  --fg-3:          var(--ink-300);
  --fg-4:          var(--ink-400);
  --fg-inverse:    var(--navy-900);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: var(--sky-500);

  --accent:        var(--lime-400);   /* primary CTA */
  --accent-ink:    var(--navy-950);   /* text on accent */
  --accent-2:      var(--sky-500);    /* secondary accent */

  /* ——————————————————————————————————————————————
     SIGNATURE GRADIENTS
     —————————————————————————————————————————————— */
  --bg-gradient:       radial-gradient(120% 80% at 50% 0%, #1A2A7A 0%, #0A1030 55%, #05091F 100%);
  --bg-gradient-soft:  linear-gradient(180deg, #121A46 0%, #0A1030 100%);
  --brand-gradient:    linear-gradient(135deg, #3FA8FF 0%, #65F24B 100%);
  --halo-gradient:     radial-gradient(60% 60% at 50% 50%, rgba(63,168,255,0.35) 0%, rgba(10,16,48,0) 70%);

  /* ——————————————————————————————————————————————
     SEMANTIC — FEEDBACK
     —————————————————————————————————————————————— */
  --success: var(--lime-400);
  --warning: #FFC857;
  --danger:  #FF6B6B;
  --info:    var(--sky-500);

  /* ——————————————————————————————————————————————
     TYPOGRAPHY
     DM Sans — rounded geometric sans. Variable weight.
     —————————————————————————————————————————————— */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", monospace;

  /* Type scale — display-forward, tight leading on big, relaxed on body */
  --fs-display: clamp(3rem, 6vw, 5.5rem);   /* 48–88 */
  --fs-h1:      clamp(2.25rem, 4vw, 3.5rem);/* 36–56 */
  --fs-h2:      clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-overline:0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-body:     0;
  --ls-overline: 0.12em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ——————————————————————————————————————————————
     SHAPE — cantos bem arredondados (very rounded)
     —————————————————————————————————————————————— */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;   /* cards */
  --r-2xl:  36px;   /* hero cards */
  --r-pill: 999px;

  /* ——————————————————————————————————————————————
     SPACING (4px base)
     —————————————————————————————————————————————— */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ——————————————————————————————————————————————
     ELEVATION — soft shadows + glow (dark-mode aware)
     —————————————————————————————————————————————— */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.45);
  --shadow-glow-sky:  0 0 0 1px rgba(63,168,255,0.35), 0 12px 40px -6px rgba(63,168,255,0.45);
  --shadow-glow-lime: 0 0 0 1px rgba(101,242,75,0.30), 0 12px 40px -8px rgba(101,242,75,0.45);
  --shadow-inset-card: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ——————————————————————————————————————————————
     MOTION
     —————————————————————————————————————————————— */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
.revi-root, body.revi {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.revi h1, .revi-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}
.revi-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: 0.95;
  text-wrap: balance;
}
.revi h2, .revi-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0;
}
.revi h3, .revi-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0;
}
.revi h4, .revi-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}
.revi p, .revi-body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}
.revi-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.revi-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
.revi-overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}
.revi-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}