/* ==========================================================================
   Vaguinho Design System — Tokens
   Always dark theme. Deep forest green + bright lime accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND CORE ----------------------------------------------- */
  --vg-green-900: #0B201A;     /* deepest, near-black green */
  --vg-green-800: #123328;     /* primary surface — the hero green */
  --vg-green-700: #1A4534;     /* raised surface */
  --vg-green-600: #235742;     /* hover surface */
  --vg-green-500: #2F6E54;     /* mid */
  --vg-green-400: #4A8F73;     /* muted accent */

  --vg-lime-500: #C7FF6E;      /* primary brand accent (logo) */
  --vg-lime-400: #D4FF85;      /* hover */
  --vg-lime-600: #A8E04A;      /* press */
  --vg-lime-200: #E8FFC2;      /* tint backgrounds */

  --vg-cream: #F5F1E8;         /* warm off-white for character pairing */
  --vg-leather: #8B5A3C;       /* apron brown — used sparingly for warmth */
  --vg-leather-dark: #5C3A24;

  /* ---------- WHATSAPP CONTEXT (semantic, our chat lives here) -------- */
  --vg-wa-bubble-out: #144D37;     /* user bubble (sent) */
  --vg-wa-bubble-in: #1F2C2A;      /* incoming bubble */
  --vg-wa-tick: #53D2A3;

  /* ---------- SEMANTIC COLOR ------------------------------------------- */
  --bg-base: var(--vg-green-900);
  --bg-surface: var(--vg-green-800);
  --bg-raised: var(--vg-green-700);
  --bg-hover: var(--vg-green-600);
  --bg-inverted: var(--vg-cream);

  --fg-1: #F4FBE9;             /* primary text on dark */
  --fg-2: #C9D6C0;             /* secondary text */
  --fg-3: #8FA597;             /* tertiary / placeholder */
  --fg-4: #5C7268;             /* disabled */
  --fg-on-lime: #0B201A;       /* text on lime */
  --fg-link: var(--vg-lime-500);

  --accent: var(--vg-lime-500);
  --accent-hover: var(--vg-lime-400);
  --accent-press: var(--vg-lime-600);

  --border-1: rgba(244, 251, 233, 0.08);
  --border-2: rgba(244, 251, 233, 0.14);
  --border-3: rgba(244, 251, 233, 0.22);
  --border-accent: var(--vg-lime-500);

  --success: #5BD994;
  --warning: #FFC857;
  --danger: #FF6B6B;
  --info: #6EC1FF;

  /* ---------- TYPE FAMILIES -------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE ----------------------------------------------- */
  --fs-display-xl: clamp(48px, 7vw, 96px);
  --fs-display-lg: clamp(40px, 5.5vw, 72px);
  --fs-display: clamp(32px, 4.5vw, 56px);
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-overline: 0.12em;

  /* ---------- SPACING -------------------------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADII ---------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  /* Bubbles asymmetric (chat references) */
  --r-bubble-in: 18px 18px 18px 4px;
  --r-bubble-out: 18px 18px 4px 18px;

  /* ---------- ELEVATION ------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.45);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 4px rgba(199, 255, 110, 0.18), 0 8px 28px rgba(199,255,110,0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- MOTION --------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-stage: 600ms;
}

/* ==========================================================================
   Semantic element styles — reset-y, low specificity, ready to use
   ========================================================================== */

html, body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vg-display-xl, .vg-display-lg, .vg-display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.vg-display-xl { font-size: var(--fs-display-xl); font-weight: 800; letter-spacing: -0.04em; }
.vg-display-lg { font-size: var(--fs-display-lg); font-weight: 800; letter-spacing: -0.035em; }
.vg-display    { font-size: var(--fs-display);    font-weight: 700; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-snug); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p, .vg-body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); }
.vg-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.vg-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.vg-caption { font-size: var(--fs-caption); color: var(--fg-3); }
.vg-overline {
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--fg-3);
  font-weight: 600;
}

code, kbd, pre, .vg-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a, .vg-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover, .vg-link:hover { border-bottom-color: var(--fg-link); }

::selection { background: var(--vg-lime-500); color: var(--fg-on-lime); }