/* VENDORED from design-system/theme.css by scripts/build_design_system_css.py — do not edit. */
/* ============================================================
   Velmo Design System — theme.css  (v1.0.0 · calm competence)
   Generated from tokens.json. Edit tokens.json, regenerate this.
   Doctrine: the chrome is pure monochrome — warm ink on warm
   paper. There is NO brand accent color. Color belongs to the
   client's data (the ramp, inside charts only) and to functional
   truth (petróleo action, amber attention, rare red error).
   Light-only: the dark theme was retired in the 2026-07 rebrand.
   Two layers:
     1. PRIMITIVES  (--vl-*)        raw ink ramp + data ramp
     2. SEMANTIC    (--vl-color-*)  role-based
   Surfaces should consume the SEMANTIC layer, not primitives.
   ============================================================ */

/* Hanken Grotesk variable (latin), self-hosted: private/signed pages never
   call a third-party font CDN (#318). Served same-origin at /fonts/ by the
   hosted endpoint and by the static landing; offline readers fall back to
   the system sans stack. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-var-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- primitive: warm ink ramp (all chrome hierarchy lives here) ---- */
  --vl-neutral-0:#ffffff;
  --vl-neutral-50:#fafaf8;   /* canvas — paper in good gallery light */
  --vl-neutral-100:#f4f3ef;
  --vl-neutral-200:#e9e7e2;
  --vl-neutral-300:#d8d6cf;
  --vl-neutral-400:#b4b1a8;
  --vl-neutral-500:#8e8b81;
  --vl-neutral-600:#6b6960;
  --vl-neutral-700:#48463f;
  --vl-neutral-800:#2e2d28;
  --vl-neutral-900:#1c1c1e;  /* ink */

  /* ---- primitive: hairline (1px borders everywhere) ---- */
  --vl-hairline:rgba(28,28,30,.08);
  --vl-hairline-strong:rgba(28,28,30,.16);

  /* ---- primitive: semantic status (the ONLY hues in chrome) ---- */
  --vl-action:#10635c;  --vl-action-soft:#e7efee;  /* petróleo: invites action on pending items */
  --vl-warning:#9a6e1b; --vl-warning-soft:#f5eddd; /* quiet amber: passive attention (Estimado/Hipótese) */
  --vl-danger:#8e3b30;  --vl-danger-soft:#f6e7e4;  /* calm rare red: true errors only */

  /* ---- primitive: data ramp — the only polychromy in the product.
          Flat and matte, never gradients. Inside charts only, never chrome. ---- */
  --vl-data-1:#3e4a5c; /* ardósia  */
  --vl-data-2:#4e5c44; /* musgo    */
  --vl-data-3:#6e2a3c; /* bordeaux */
  --vl-data-4:#8a6d3f; /* bronze   */
  --vl-data-5:#10635c; /* petróleo */
  --vl-data-6:#5f5e5a; /* grafite — reserved for "outros" */

  /* ---- DEPRECATED primitives (pre-rebrand aliases) ----
     Kept so existing surfaces keep rendering until each screen is redone
     (wealth-green → ink, mint → warm gray, teal hero → ink, pink dot → ink).
     Do not use in new code; each screen PR removes its usages. */
  --vl-primary-50:var(--vl-neutral-100);  --vl-primary-100:var(--vl-neutral-100);
  --vl-primary-200:var(--vl-neutral-200); --vl-primary-300:var(--vl-neutral-300);
  --vl-primary-400:var(--vl-neutral-500); --vl-primary-500:var(--vl-neutral-600);
  --vl-primary-600:var(--vl-neutral-700); --vl-primary-700:var(--vl-neutral-900);
  --vl-primary-800:#000000;               --vl-primary-900:var(--vl-neutral-900);
  --vl-mint-300:var(--vl-neutral-300); --vl-mint-400:var(--vl-neutral-400);
  --vl-mint-500:var(--vl-neutral-500);
  --vl-hero-1:var(--vl-neutral-900); --vl-hero-2:var(--vl-neutral-800);
  --vl-lockup-pink:var(--vl-neutral-900);
  --vl-success:var(--vl-neutral-900); --vl-success-soft:var(--vl-neutral-100);
  --vl-info:var(--vl-neutral-700);    --vl-info-soft:var(--vl-neutral-100);
  --vl-gain:var(--vl-neutral-900); --vl-loss:var(--vl-neutral-900); --vl-flat:var(--vl-neutral-500);

  /* ---- primitive: type — ONE family, hierarchy by size/weight only ---- */
  --vl-font-sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --vl-font-serif:var(--vl-font-sans); /* deprecated alias — no serif in the system */
  --vl-font-mono:var(--vl-font-sans);  /* deprecated alias — money is sans + tabular-nums */
  --vl-text-xs:12px; --vl-text-sm:13px; --vl-text-base:15px; --vl-text-md:17px;
  --vl-text-lg:19px; --vl-text-xl:22px; --vl-text-2xl:26px; --vl-text-3xl:34px;
  --vl-text-4xl:44px; --vl-text-5xl:56px;
  --vl-fw-regular:400; --vl-fw-medium:500; --vl-fw-semibold:600; --vl-fw-bold:700; --vl-fw-heavy:800;
  --vl-lh-tight:1.08; --vl-lh-snug:1.25; --vl-lh-normal:1.5; --vl-lh-relaxed:1.65;
  --vl-ls-tighter:-0.025em; --vl-ls-tight:-0.015em; --vl-ls-normal:0;
  --vl-ls-wide:0.05em; --vl-ls-wider:0.08em;

  /* ---- primitive: space / containers / radius / border ---- */
  --vl-space-0:0; --vl-space-1:4px; --vl-space-2:8px; --vl-space-3:12px;
  --vl-space-4:16px; --vl-space-5:20px; --vl-space-6:24px; --vl-space-8:32px;
  --vl-space-10:40px; --vl-space-12:48px; --vl-space-16:64px; --vl-space-20:80px;
  --vl-space-24:96px;
  --vl-container-wide:1140px;   /* dashboards */
  --vl-container-narrow:920px;  /* flows & lists */
  --vl-measure:68ch;            /* max line length for running prose */
  --vl-radius-sm:8px; --vl-radius-md:12px; --vl-radius-lg:14px; --vl-radius-xl:20px;
  --vl-radius-pill:999px;
  --vl-border-hairline:1px; --vl-border-thick:2px;

  /* ---- primitive: shadow (soft ink, never colored) ---- */
  --vl-shadow-sm:0 1px 2px rgba(28,28,30,.05);
  --vl-shadow-md:0 4px 16px rgba(28,28,30,.06);
  --vl-shadow-lg:0 24px 48px rgba(28,28,30,.10);
  --vl-shadow-focus:0 0 0 3px rgba(28,28,30,.16);

  /* ---- primitive: motion / z-index ---- */
  --vl-dur-fast:120ms; --vl-dur-base:220ms; --vl-dur-slow:300ms; --vl-dur-reveal:280ms;
  --vl-ease:cubic-bezier(.22,1,.36,1);
  --vl-ease-settle:cubic-bezier(.3,.9,.3,1.02);
  --vl-z-base:0; --vl-z-sticky:100; --vl-z-overlay:800; --vl-z-modal:1000; --vl-z-toast:1100;

  /* ============ SEMANTIC (light — the only theme) ============ */
  --vl-color-bg:           var(--vl-neutral-50);
  --vl-color-surface:      var(--vl-neutral-0);
  --vl-color-surface-alt:  var(--vl-neutral-100);
  --vl-color-border:       var(--vl-hairline);
  --vl-color-border-strong:var(--vl-hairline-strong);
  --vl-color-text:         var(--vl-neutral-900);
  --vl-color-text-soft:    var(--vl-neutral-700);
  --vl-color-text-muted:   var(--vl-neutral-500);
  --vl-color-text-on-brand:#ffffff;

  /* "brand" = ink. Primary actions are ink pills; there is no accent hue.
     Names kept for surface compatibility. */
  --vl-color-brand:        var(--vl-neutral-900);
  --vl-color-brand-hover:  #000000;
  --vl-color-brand-soft:   var(--vl-neutral-100);
  --vl-color-accent:       var(--vl-neutral-900);

  /* Confirmed/complete is INK, not green — order is perceived, not celebrated. */
  --vl-color-success:      var(--vl-neutral-900);
  --vl-color-success-soft: var(--vl-neutral-100);
  --vl-color-info:         var(--vl-neutral-700);
  --vl-color-info-soft:    var(--vl-neutral-100);
  --vl-color-action: var(--vl-action);  --vl-color-action-soft: var(--vl-action-soft);
  --vl-color-warning:var(--vl-warning); --vl-color-warning-soft:var(--vl-warning-soft);
  --vl-color-danger: var(--vl-danger);  --vl-color-danger-soft: var(--vl-danger-soft);

  /* Money deltas: direction is typography (sign + glyph), never hue.
     Negative values are neutral with a minus sign, never red. */
  --vl-color-gain:var(--vl-neutral-900);
  --vl-color-loss:var(--vl-neutral-900);
  --vl-color-flat:var(--vl-neutral-500);
}