/* ============================================================
   CASAVIVA — Design Tokens
   Source of truth: marketing repo (logos, palette, grafismos)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Brand Core ─────────────────────────────────────────── */
  --cv-vermelho:        #9e1327;   /* signature red — CTA, brand mark */
  --cv-vermelho-deep:   #7a0e1d;
  --cv-vermelho-soft:   #c45266;
  --cv-vermelho-tint:   #f4dde1;

  --cv-petroleo:        #004359;   /* primary product blue */
  --cv-petroleo-deep:   #002f3f;
  --cv-petroleo-soft:   #2a6679;
  --cv-petroleo-tint:   #d4e1e6;

  --cv-escuro:          #001624;   /* near-black brand blue */
  --cv-bege:            #f2efe3;   /* warm cream — surface */
  --cv-bege-deep:       #e8e3d2;
  --cv-branco:          #ffffff;
  --cv-preto:           #0a0f14;

  /* ── Neutrals ───────────────────────────────────────────── */
  --cv-ink-900:         #001624;
  --cv-ink-800:         #11242e;
  --cv-ink-700:         #2a3a44;
  --cv-ink-600:         #4a5862;
  --cv-ink-500:         #6b7680;
  --cv-ink-400:         #97a0a8;
  --cv-ink-300:         #c0c6cc;
  --cv-ink-200:         #dfe3e7;
  --cv-ink-100:         #eceef1;
  --cv-ink-50:          #f6f7f8;

  /* ── Semantic ───────────────────────────────────────────── */
  --cv-success:         #1f7a4d;
  --cv-success-tint:    #dceee5;
  --cv-warning:         #b06a00;
  --cv-warning-tint:    #f8e6c4;
  --cv-danger:          var(--cv-vermelho);
  --cv-danger-tint:     var(--cv-vermelho-tint);
  --cv-info:            var(--cv-petroleo);
  --cv-info-tint:       var(--cv-petroleo-tint);

  /* ── Surfaces (configurable via Tweaks) ─────────────────── */
  --cv-bg:              var(--cv-bege);
  --cv-surface:         var(--cv-branco);
  --cv-surface-2:       #fbfaf4;
  --cv-border:          #d9d4c1;
  --cv-border-strong:   #b9b29a;
  --cv-text:            var(--cv-escuro);
  --cv-text-muted:      var(--cv-ink-600);
  --cv-text-subtle:     var(--cv-ink-500);

  --cv-primary:         var(--cv-petroleo);
  --cv-primary-fg:      var(--cv-branco);
  --cv-accent:          var(--cv-vermelho);
  --cv-accent-fg:       var(--cv-branco);

  /* ── Type ───────────────────────────────────────────────── */
  --cv-font-sans:       'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cv-font-display:    'Montserrat', system-ui, sans-serif;

  --cv-fs-display-2xl: clamp(48px, 6vw, 88px);
  --cv-fs-display-xl:  clamp(36px, 4.5vw, 64px);
  --cv-fs-display-lg:  clamp(28px, 3.2vw, 44px);
  --cv-fs-h1:          32px;
  --cv-fs-h2:          26px;
  --cv-fs-h3:          20px;
  --cv-fs-h4:          17px;
  --cv-fs-body-lg:     17px;
  --cv-fs-body:        15px;
  --cv-fs-body-sm:     13px;
  --cv-fs-caption:     12px;
  --cv-fs-overline:    11px;

  --cv-lh-tight:       1.1;
  --cv-lh-snug:        1.25;
  --cv-lh-normal:      1.5;
  --cv-lh-relaxed:     1.65;

  --cv-tracking-tight: -0.02em;
  --cv-tracking-normal: 0;
  --cv-tracking-wide:   0.04em;
  --cv-tracking-overline: 0.14em;

  /* ── Spacing (4-px base) ────────────────────────────────── */
  --cv-s-1: 4px;
  --cv-s-2: 8px;
  --cv-s-3: 12px;
  --cv-s-4: 16px;
  --cv-s-5: 20px;
  --cv-s-6: 24px;
  --cv-s-7: 32px;
  --cv-s-8: 40px;
  --cv-s-9: 56px;
  --cv-s-10: 80px;
  --cv-s-11: 120px;

  /* ── Radius ─────────────────────────────────────────────── */
  --cv-r-sm: 4px;
  --cv-r-md: 8px;
  --cv-r-lg: 12px;
  --cv-r-xl: 18px;
  --cv-r-2xl: 24px;
  --cv-r-pill: 999px;
  --cv-r-default: var(--cv-r-md);

  /* ── Shadows ────────────────────────────────────────────── */
  --cv-shadow-xs: 0 1px 2px rgba(0, 22, 36, 0.05);
  --cv-shadow-sm: 0 1px 3px rgba(0, 22, 36, 0.07), 0 1px 2px rgba(0, 22, 36, 0.04);
  --cv-shadow-md: 0 6px 16px -4px rgba(0, 22, 36, 0.10), 0 2px 4px rgba(0, 22, 36, 0.05);
  --cv-shadow-lg: 0 20px 40px -12px rgba(0, 22, 36, 0.18), 0 4px 8px rgba(0, 22, 36, 0.05);
  --cv-shadow-focus: 0 0 0 3px rgba(0, 67, 89, 0.18);
  --cv-shadow-focus-danger: 0 0 0 3px rgba(158, 19, 39, 0.22);

  /* ── Motion ─────────────────────────────────────────────── */
  --cv-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cv-dur-fast: 120ms;
  --cv-dur-normal: 200ms;
  --cv-dur-slow: 320ms;

  /* ── Density ────────────────────────────────────────────── */
  --cv-control-h: 40px;
  --cv-control-h-sm: 32px;
  --cv-control-h-lg: 48px;
  --cv-control-px: 16px;
}

/* Dark surface (cv-escuro background) — for hero sections / dashboards */
.cv-on-dark {
  --cv-bg: var(--cv-escuro);
  --cv-surface: #0c2230;
  --cv-surface-2: #0f2a3b;
  --cv-border: #1d3947;
  --cv-border-strong: #2c4d5f;
  --cv-text: var(--cv-bege);
  --cv-text-muted: #98aab4;
  --cv-text-subtle: #6e818d;
}

/* Petróleo surface */
.cv-on-petroleo {
  --cv-bg: var(--cv-petroleo);
  --cv-surface: var(--cv-petroleo-deep);
  --cv-text: var(--cv-bege);
  --cv-text-muted: #b9cdd4;
  --cv-border: #1d4f63;
}

/* ============================================================
   Base
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--cv-font-sans);
  font-size: var(--cv-fs-body);
  line-height: var(--cv-lh-normal);
  color: var(--cv-text);
  background: var(--cv-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--cv-vermelho); color: white; }

/* ============================================================
   Type utilities
   ============================================================ */
.cv-display-2xl { font: 800 var(--cv-fs-display-2xl)/var(--cv-lh-tight) var(--cv-font-display); letter-spacing: var(--cv-tracking-tight); }
.cv-display-xl  { font: 700 var(--cv-fs-display-xl)/var(--cv-lh-tight) var(--cv-font-display); letter-spacing: var(--cv-tracking-tight); }
.cv-display-lg  { font: 700 var(--cv-fs-display-lg)/var(--cv-lh-snug) var(--cv-font-display); letter-spacing: var(--cv-tracking-tight); }
.cv-h1 { font: 700 var(--cv-fs-h1)/var(--cv-lh-snug) var(--cv-font-sans); letter-spacing: var(--cv-tracking-tight); margin: 0; }
.cv-h2 { font: 700 var(--cv-fs-h2)/var(--cv-lh-snug) var(--cv-font-sans); margin: 0; }
.cv-h3 { font: 600 var(--cv-fs-h3)/var(--cv-lh-snug) var(--cv-font-sans); margin: 0; }
.cv-h4 { font: 600 var(--cv-fs-h4)/var(--cv-lh-snug) var(--cv-font-sans); margin: 0; }
.cv-body-lg { font-size: var(--cv-fs-body-lg); line-height: var(--cv-lh-relaxed); }
.cv-body { font-size: var(--cv-fs-body); line-height: var(--cv-lh-normal); }
.cv-body-sm { font-size: var(--cv-fs-body-sm); line-height: var(--cv-lh-normal); }
.cv-caption { font-size: var(--cv-fs-caption); line-height: var(--cv-lh-normal); color: var(--cv-text-muted); }
.cv-overline { font-size: var(--cv-fs-overline); letter-spacing: var(--cv-tracking-overline); text-transform: uppercase; font-weight: 600; color: var(--cv-text-muted); }
.cv-mono-num { font-variant-numeric: tabular-nums; }

.cv-text-muted   { color: var(--cv-text-muted); }
.cv-text-subtle  { color: var(--cv-text-subtle); }
.cv-text-vermelho { color: var(--cv-vermelho); }
.cv-text-petroleo { color: var(--cv-petroleo); }