/* ==========================================================================
   Velozz Digital — Colors & Type Tokens
   --------------------------------------------------------------------------
   The system is built around three ideas:
     1. A near-black "midnight" surface for hero/dark blocks (brand-forward)
     2. A clean off-white surface for product UI (legible, calm)
     3. Electric cyan as the velocity accent + magenta as energy spark
   ========================================================================== */

/* Cachos Brasil uses Lato throughout the product interface. */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  /* Velozz brand: navy base, cyan→violet→magenta gradient spectrum */
  --vz-midnight:      #282828;
  --vz-midnight-2:    #313131;
  --vz-midnight-3:    #4A4A4A;

  --vz-cyan:          #489CB4;
  --vz-violet:        #849078;
  --vz-magenta:       #D82424;
  --vz-cyan-ink:      #225766;
  --vz-cyan-soft:     #A8E4F0;
  --vz-violet-soft:   #E8ECE6;
  --vz-magenta-soft:  #FDF2F2;

  --vz-lime:          #C6FF3D;

  /* ============================================================
     COLOR — Neutrals (light mode default)
     ============================================================ */
  --vz-bg:            #FDF2F2;   /* page bg */
  --vz-surface:       #FFFFFF;   /* card */
  --vz-surface-2:     #F4F5F8;   /* sunken */
  --vz-line:          #E6E8EE;   /* hairline */
  --vz-line-strong:   #D4D7DF;

  --vz-fg:            #282828;   /* text strong */
  --vz-fg-2:          #313131;   /* text secondary */
  --vz-fg-3:          #717171;   /* text tertiary / meta */
  --vz-fg-4:          #999999;   /* placeholder / disabled */

  /* ============================================================
     COLOR — Channel marks (omnichannel)
     Used as small dots / left-borders on conversation cards.
     ============================================================ */
  --vz-ch-whatsapp:   #25D366;
  --vz-ch-instagram:  #E1306C;
  --vz-ch-messenger:  #0084FF;
  --vz-ch-tiktok:     #111111;
  --vz-ch-meta:       #1877F2;

  /* ============================================================
     COLOR — Semantic (status)
     ============================================================ */
  --vz-success:       #16A75C;
  --vz-success-soft:  #DDF5E7;
  --vz-warning:       #E89B12;
  --vz-warning-soft:  #FFEFCD;
  --vz-danger:        #E5364C;
  --vz-danger-soft:   #FCE0E4;
  --vz-info:          #0073E6;
  --vz-info-soft:     #DBEBFE;

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --vz-font-display:  "Lato", ui-sans-serif, system-ui, sans-serif;
  --vz-font-body:     "Lato", ui-sans-serif, system-ui, sans-serif;
  --vz-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE — Scale (modular, optimized for SaaS UI + marketing) */
  --vz-text-2xs:  11px;
  --vz-text-xs:   12px;
  --vz-text-sm:   13px;
  --vz-text-base: 15px;
  --vz-text-md:   17px;
  --vz-text-lg:   20px;
  --vz-text-xl:   24px;
  --vz-text-2xl:  32px;
  --vz-text-3xl:  44px;
  --vz-text-4xl:  60px;
  --vz-text-5xl:  84px;

  /* Line heights */
  --vz-lh-tight:  1.05;
  --vz-lh-snug:   1.2;
  --vz-lh-normal: 1.45;
  --vz-lh-loose:  1.65;

  /* Letter spacing */
  --vz-tracking-tight:  0;
  --vz-tracking-snug:   0;
  --vz-tracking-normal: 0;
  --vz-tracking-wide:   0.04em;
  --vz-tracking-caps:   0.12em;

  /* ============================================================
     SPACE — 4px base
     ============================================================ */
  --vz-s-0:  0;
  --vz-s-1:  4px;
  --vz-s-2:  8px;
  --vz-s-3:  12px;
  --vz-s-4:  16px;
  --vz-s-5:  20px;
  --vz-s-6:  24px;
  --vz-s-8:  32px;
  --vz-s-10: 40px;
  --vz-s-12: 48px;
  --vz-s-16: 64px;
  --vz-s-20: 80px;
  --vz-s-24: 96px;

  /* ============================================================
     RADII — moderate/sharp blend
     ============================================================ */
  --vz-r-xs:   4px;   /* chips, pills inside dense UI */
  --vz-r-sm:   6px;   /* inputs */
  --vz-r-md:   10px;  /* default cards / buttons */
  --vz-r-lg:   14px;  /* panels */
  --vz-r-xl:   20px;  /* hero modules */
  --vz-r-full: 999px;

  /* ============================================================
     SHADOWS — soft, low-contrast (light-mode)
     Avoid colored glow except on hover for primary CTA.
     ============================================================ */
  --vz-shadow-xs: 0 1px 0 rgba(11,16,32,0.04);
  --vz-shadow-sm: 0 1px 2px rgba(11,16,32,0.06), 0 1px 1px rgba(11,16,32,0.04);
  --vz-shadow-md: 0 4px 12px rgba(11,16,32,0.06), 0 2px 4px rgba(11,16,32,0.04);
  --vz-shadow-lg: 0 12px 32px rgba(11,16,32,0.08), 0 4px 12px rgba(11,16,32,0.05);
  --vz-shadow-xl: 0 24px 60px rgba(11,16,32,0.12), 0 8px 24px rgba(11,16,32,0.06);
  --vz-shadow-glow: 0 0 0 4px rgba(139,92,246,0.20), 0 8px 28px rgba(233,75,214,0.30);

  /* Inner / focus */
  --vz-ring: 0 0 0 3px rgba(139,92,246,0.40);

  /* ============================================================
     MOTION
     ============================================================ */
  --vz-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);    /* default */
  --vz-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* exits */
  --vz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful */
  --vz-dur-fast:    140ms;
  --vz-dur-base:    220ms;
  --vz-dur-slow:    420ms;

  /* ============================================================
     GRADIENTS — used sparingly for hero / data viz
     ============================================================ */
  --vz-grad-hero: radial-gradient(120% 80% at 85% 10%, rgba(233,75,214,0.35) 0%, rgba(20,20,50,0) 55%),
                  radial-gradient(80% 60% at 5% 100%, rgba(77,208,255,0.25) 0%, rgba(20,20,50,0) 55%),
                  linear-gradient(180deg, #141432 0%, #141432 100%);
  --vz-grad-brand: linear-gradient(95deg, #4DD0FF 0%, #8B5CF6 50%, #E94BD6 100%);
  --vz-grad-cyan: linear-gradient(135deg, #4DD0FF 0%, #8B5CF6 100%);
  --vz-grad-magenta: linear-gradient(135deg, #8B5CF6 0%, #E94BD6 100%);
}

/* ============================================================
   Dark theme override
   Apply via [data-theme="dark"] on <html> or a region.
   ============================================================ */
[data-theme="dark"] {
  --vz-bg:          #141432;
  --vz-surface:     #1B1B40;
  --vz-surface-2:   #11112A;
  --vz-line:        #252556;
  --vz-line-strong: #32326A;

  --vz-fg:          #F4F6FB;
  --vz-fg-2:        #B6BED4;
  --vz-fg-3:        #7E879F;
  --vz-fg-4:        #5A6280;

  --vz-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --vz-shadow-md:   0 6px 16px rgba(0,0,0,0.45);
  --vz-shadow-lg:   0 16px 40px rgba(0,0,0,0.55);
}

/* ============================================================
   Semantic element styling — use as base, override per surface
   ============================================================ */
.vz-display-hero {
  font-family: var(--vz-font-display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, var(--vz-text-5xl));
  line-height: var(--vz-lh-tight);
  letter-spacing: var(--vz-tracking-tight);
}

.vz-h1 {
  font-family: var(--vz-font-display);
  font-weight: 600;
  font-size: var(--vz-text-3xl);
  line-height: var(--vz-lh-tight);
  letter-spacing: var(--vz-tracking-tight);
  color: var(--vz-fg);
}
.vz-h2 {
  font-family: var(--vz-font-display);
  font-weight: 600;
  font-size: var(--vz-text-2xl);
  line-height: var(--vz-lh-snug);
  letter-spacing: var(--vz-tracking-snug);
  color: var(--vz-fg);
}
.vz-h3 {
  font-family: var(--vz-font-display);
  font-weight: 500;
  font-size: var(--vz-text-xl);
  line-height: var(--vz-lh-snug);
  color: var(--vz-fg);
}
.vz-h4 {
  font-family: var(--vz-font-body);
  font-weight: 600;
  font-size: var(--vz-text-md);
  line-height: var(--vz-lh-snug);
  color: var(--vz-fg);
}

.vz-body {
  font-family: var(--vz-font-body);
  font-weight: 400;
  font-size: var(--vz-text-base);
  line-height: var(--vz-lh-normal);
  color: var(--vz-fg-2);
}
.vz-body-sm {
  font-family: var(--vz-font-body);
  font-weight: 400;
  font-size: var(--vz-text-sm);
  line-height: var(--vz-lh-normal);
  color: var(--vz-fg-2);
}
.vz-meta {
  font-family: var(--vz-font-body);
  font-weight: 500;
  font-size: var(--vz-text-xs);
  line-height: var(--vz-lh-normal);
  color: var(--vz-fg-3);
}

.vz-eyebrow {
  font-family: var(--vz-font-body);
  font-weight: 600;
  font-size: var(--vz-text-xs);
  letter-spacing: var(--vz-tracking-caps);
  text-transform: uppercase;
  color: var(--vz-fg-3);
}

.vz-mono {
  font-family: var(--vz-font-mono);
  font-size: var(--vz-text-sm);
  letter-spacing: 0;
}

.vz-num {
  font-family: var(--vz-font-display);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}