/* ==========================================================================
   VWS Eletrônica — colors_and_type.css
   Single source of truth for color + type + spacing tokens.
   Loaded alongside: <link rel="stylesheet" href="https://use.typekit.net/lra8bkc.css">
   ========================================================================== */

:root {
  /* -------- Brand colors (strict) -------- */
  --vws-red: #F20034;          /* primary brand — CTAs, links, accents, logo mark */
  --vws-red-hover: #C50028;    /* darken for hover only */
  --vws-red-press: #A30022;    /* darken for :active */
  --vws-black: #000000;        /* body text, icons, structure */
  --vws-white: #FFFFFF;        /* canvas */
  --vws-whatsapp: #35AC1D;     /* EXCLUSIVE — WhatsApp CTAs only */
  --vws-whatsapp-hover: #2C9118;

  /* -------- Neutrals (derived from black) -------- */
  --vws-ink-1: #000000;        /* primary text */
  --vws-ink-2: #4A4A4A;        /* secondary text */
  --vws-ink-3: #8A8A8A;        /* tertiary / meta */
  --vws-ink-4: #B8B8B8;        /* disabled / placeholder */
  --vws-line: #E5E5E5;         /* default hairline */
  --vws-line-strong: #000000;  /* heavy separator (used sparingly) */
  --vws-surface-0: #FFFFFF;    /* canvas */
  --vws-surface-1: #FAFAFA;    /* alt section */
  --vws-surface-2: #F2F2F2;    /* chip / tag fill */
  --vws-surface-inverse: #000000;

  /* -------- Typography -------- */
  --vws-font-sans: "tt-commons-pro", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --vws-font-display: "tt-commons-pro-thin", "tt-commons-pro", ui-sans-serif, system-ui, sans-serif;

  /* Type scale — desktop-first; reduce at breakpoint in components */
  --vws-fs-xs: 12px;    /* eyebrow / caption */
  --vws-fs-sm: 14px;    /* meta, helper */
  --vws-fs-base: 16px;  /* body default */
  --vws-fs-md: 18px;    /* emphasized body */
  --vws-fs-lg: 20px;    /* small heading / lead */
  --vws-fs-xl: 24px;    /* h4 */
  --vws-fs-2xl: 32px;   /* h3 */
  --vws-fs-3xl: 40px;   /* h2 */
  --vws-fs-4xl: 56px;   /* h1 desktop */
  --vws-fs-5xl: 80px;   /* display numeral */

  --vws-lh-tight: 1.1;
  --vws-lh-snug: 1.25;
  --vws-lh-normal: 1.45;
  --vws-lh-relaxed: 1.6;   /* preferred for technical body */
  --vws-lh-loose: 1.75;

  --vws-tracking-tight: -0.02em;
  --vws-tracking-normal: 0;
  --vws-tracking-wide: 0.08em;  /* eyebrow uppercase */

  /* -------- Spacing (8-pt grid, 4 for precision) -------- */
  --vws-sp-1: 4px;
  --vws-sp-2: 8px;
  --vws-sp-3: 12px;
  --vws-sp-4: 16px;
  --vws-sp-5: 24px;
  --vws-sp-6: 32px;
  --vws-sp-7: 48px;
  --vws-sp-8: 64px;
  --vws-sp-9: 96px;
  --vws-sp-10: 128px;

  /* -------- Radii -------- */
  --vws-radius-sm: 4px;     /* default — buttons, inputs, cards */
  --vws-radius-md: 8px;     /* modals / dialogs */
  --vws-radius-lg: 12px;    /* larger surfaces */
  --vws-radius-pill: 9999px; /* FAB */

  /* -------- Borders -------- */
  --vws-border-hair: 1px solid var(--vws-line);
  --vws-border-strong: 2px solid var(--vws-black);
  --vws-border-stamp: 3px solid var(--vws-red); /* the "carimbo" red top-border */

  /* -------- Shadows (use sparingly) -------- */
  --vws-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --vws-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --vws-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* -------- Motion -------- */
  --vws-dur-fast: 120ms;
  --vws-dur: 200ms;
  --vws-dur-slow: 320ms;
  --vws-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* -------- Layout -------- */
  --vws-container: 1200px;
  --vws-container-narrow: 960px;
}

/* ==========================================================================
   Base / semantic typography
   ========================================================================== */

html, body {
  font-family: var(--vws-font-sans);
  font-size: var(--vws-fs-base);
  line-height: var(--vws-lh-relaxed);
  color: var(--vws-ink-1);
  background: var(--vws-surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — default display stack.
   In product code, use the semantic classes or override at the component level. */

.vws-eyebrow,
.h-eyebrow {
  font-family: var(--vws-font-sans);
  font-size: var(--vws-fs-xs);
  font-weight: 600;
  line-height: var(--vws-lh-snug);
  letter-spacing: var(--vws-tracking-wide);
  text-transform: uppercase;
  color: var(--vws-red);
}

.vws-h1,
.h-1 {
  font-family: var(--vws-font-sans);
  font-size: var(--vws-fs-4xl);
  font-weight: 700;
  line-height: var(--vws-lh-tight);
  letter-spacing: var(--vws-tracking-tight);
  color: var(--vws-ink-1);
}

.vws-h2,
.h-2 {
  font-size: var(--vws-fs-3xl);
  font-weight: 700;
  line-height: var(--vws-lh-snug);
  letter-spacing: var(--vws-tracking-tight);
  color: var(--vws-ink-1);
}

.vws-h3,
.h-3 {
  font-size: var(--vws-fs-2xl);
  font-weight: 600;
  line-height: var(--vws-lh-snug);
  color: var(--vws-ink-1);
}

.vws-h4,
.h-4 {
  font-size: var(--vws-fs-xl);
  font-weight: 600;
  line-height: var(--vws-lh-snug);
  color: var(--vws-ink-1);
}

.vws-lead,
.p-lead {
  font-size: var(--vws-fs-lg);
  line-height: var(--vws-lh-normal);
  color: var(--vws-ink-2);
}

.vws-body,
.p-body {
  font-size: var(--vws-fs-base);
  line-height: var(--vws-lh-relaxed);
  color: var(--vws-ink-1);
}

.vws-meta,
.p-meta {
  font-size: var(--vws-fs-sm);
  line-height: var(--vws-lh-normal);
  color: var(--vws-ink-3);
}

.vws-display-stat,
.h-stat {
  font-family: var(--vws-font-display);
  font-weight: 400;
  font-size: var(--vws-fs-5xl);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vws-red);
}

/* Links
   IMPORTANT: bare <a> tags inherit color and have no underline by default.
   This keeps buttons (.btn, .db-btn, .pkg-cta, .nav-cta, brand etc.) free of
   the red-hover bleed-through. Use .vws-link for content links that should
   look like classic hyperlinks (red, underline on hover). */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--vws-dur) var(--vws-ease);
}

.vws-link {
  color: var(--vws-red);
  text-decoration: none;
  transition: color var(--vws-dur) var(--vws-ease);
}
.vws-link:hover { color: var(--vws-red-hover); text-decoration: underline; }
.vws-link:active { color: var(--vws-red-press); }

/* ==========================================================================
   Utility surfaces
   ========================================================================== */

.vws-container { max-width: var(--vws-container); margin-inline: auto; padding-inline: var(--vws-sp-5); }
.vws-container-narrow { max-width: var(--vws-container-narrow); margin-inline: auto; padding-inline: var(--vws-sp-5); }
.vws-section { padding-block: var(--vws-sp-9); }
.vws-section--alt { background: var(--vws-surface-1); }
.vws-section--inverse { background: var(--vws-black); color: var(--vws-white); }

@media (max-width: 768px) {
  .vws-section { padding-block: var(--vws-sp-8); }
  :root {
    --vws-fs-4xl: 40px;
    --vws-fs-3xl: 32px;
    --vws-fs-2xl: 26px;
    --vws-fs-5xl: 64px;
  }
}