/* =========================================================================
   Vaeso Design Tokens
   Colors, type, spacing, radius, shadow, motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typography — Neue Haas Grotesk TX Pro (official Vaeso brand font).
   55 Regular, 65 Medium, 75 Bold. Half Regular is a separate display weight
   used ONLY for keyword highlights inside Bold headlines.
   Note: User-provided files are TX Pro (text-optimized). The brand brief
   originally specified the Display cut; if Display Pro files become
   available, swap the @font-face src urls.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('./fonts/NHaasGroteskTXPro-55Rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('./fonts/NHaasGroteskTXPro-65Md.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('./fonts/NHaasGroteskTXPro-75Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vaeso Half Regular';
  src: url('./fonts/Half-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color ---------- */
  /* Brand — the closed, fixed palette. No variations beyond these. */
  --color-verde:        #375249;   /* primary brand anchor */
  --color-off-white:    #F5F0E8;   /* primary light surface */
  --color-off-white-2:  #EAE3D6;   /* subtle off-white shade for surface separation */
  --color-preto:        #1A1A1A;   /* typography, max contrast */
  --color-tiffany:      #A8D8D0;   /* structural accent — freshness */
  --color-rosa:         #F2C4C4;   /* structural accent — product warmth */

  /* State expressions of Verde — always the same color, never a new one. */
  --color-verde-hover:    rgba(55, 82, 73, 0.85);
  --color-verde-pressed:  rgba(55, 82, 73, 0.70);

  /* Hairlines (no decorative borders) */
  --hairline-on-light:  rgba(26, 26, 26, 0.08);
  --hairline-on-dark:   rgba(245, 240, 232, 0.12);

  /* Semantic surfaces */
  --bg-default:         var(--color-off-white);
  --bg-elevated:        #FFFFFF;        /* used only for floating menus */
  --bg-inverse:         var(--color-verde);
  --fg-default:         var(--color-preto);
  --fg-muted:           rgba(26, 26, 26, 0.62);
  --fg-subtle:          rgba(26, 26, 26, 0.42);
  --fg-on-verde:        var(--color-off-white);
  --fg-on-verde-muted:  rgba(245, 240, 232, 0.72);

  /* ---------- Type ---------- */
  --font-display: 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-half:    'Vaeso Half Regular', 'Neue Haas Grotesk', sans-serif;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;   /* default — body, titles */
  --fw-bold:    700;   /* headlines, campaign callouts */

  /* sizes */
  --fs-display-xl: 160px;   /* hero on Real Environment */
  --fs-display-lg: 112px;
  --fs-display-md: 80px;
  --fs-display-sm: 56px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-caption: 14px;
  --fs-micro: 13px;

  /* line-heights */
  --lh-display: 0.96;
  --lh-heading: 1.08;
  --lh-body:    1.5;
  --lh-caption: 1.4;

  /* tracking */
  --tr-display: -0.03em;
  --tr-display-bold: -0.04em;
  --tr-body: 0;
  --tr-eyebrow: 0.04em;

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

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Shadow (used sparingly) ---------- */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.06);
  --shadow-pop:  0 2px 4px rgba(26, 26, 26, 0.06), 0 16px 40px rgba(26, 26, 26, 0.10);

  /* ---------- Motion ---------- */
  --ease-vaeso:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-quick:    160ms;
  --dur-base:     240ms;
  --dur-slow:     400ms;
  --dur-hero:     600ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: 32px;

  /* =========================================================================
     APP UI LAYER — VAESO INTERFACE
     A second visual layer for the Vaeso app (internal portal, representative
     area, management). Coexists with the brand identity, with its own
     surface system, typographic hero pattern, and pill-driven controls.

     Hard limits (apply EVEN in this layer):
     - Palette stays inside the Vaeso color system (verde + off-white +
       preto + tiffany + rosa). Bege is a derivative of off-white-2.
     - No purple, no blue gradients, no neon, no frosted glass.
     - Modern feeling comes from generous radii, color confidence and
       typographic scale — never from gradient or glow.

     Never use this layer for: campaigns, social, print, PDV, packaging.
     ========================================================================= */

  /* ---------- Surfaces ---------- */
  /* App background base — a deeper, slightly desaturated Verde used as the
     shell. The ONLY place this color is permitted. It is NOT a brand color;
     it is a UI-surface base. Never appears on product or in marketing. */
  --app-bg:                   #2A3F38;
  --app-bg-deep:              #233832;   /* slightly deeper inset (sidebar, nested) */

  /* Tinted card surfaces — solid color blocks used for KPI cards, feature
     cards, hero info. Confident, never gradient. */
  --app-tint-verde:           #3B5750;   /* lifted dark-verde card */
  --app-tint-bege:            #D9CDB0;   /* warm beige (off-white-2 family) */
  --app-tint-bege-deep:       #C9BC9A;   /* beige for inputs in modals */
  --app-tint-rosa:            #F2C4C4;   /* brand rosa */
  --app-tint-tiffany:         #A8D8D0;   /* brand tiffany */
  --app-tint-tiffany-soft:    #B7DDD6;   /* tiffany subtly washed for inputs */

  /* Translucent overlays for stacking on the dark base */
  --app-veil-2:               rgba(245, 240, 232, 0.04);
  --app-veil-4:               rgba(245, 240, 232, 0.08);
  --app-veil-8:               rgba(245, 240, 232, 0.14);

  /* Hairlines on dark / light */
  --app-hairline:             rgba(245, 240, 232, 0.10);
  --app-hairline-strong:      rgba(245, 240, 232, 0.20);
  --app-hairline-dark:        rgba(26, 26, 26, 0.10);

  /* ---------- Foregrounds ---------- */
  --app-fg:                   var(--color-off-white);
  --app-fg-muted:             rgba(245, 240, 232, 0.66);
  --app-fg-subtle:            rgba(245, 240, 232, 0.42);
  --app-fg-dark:              var(--color-preto);
  --app-fg-dark-muted:        rgba(26, 26, 26, 0.60);
  --app-fg-on-verde:          var(--color-off-white);
  --app-fg-on-tiffany:        #1F3A33;   /* deep verde for legibility on tiffany */
  --app-fg-on-rosa:           #3A2222;   /* deep wine for legibility on rosa */
  --app-fg-on-bege:           #2F2A1F;

  /* Accent text — the large display number on feirinha cards is rosa */
  --app-accent-rosa:          #E8B3B3;   /* rosa, slightly darker for legibility on dark */

  /* ---------- Radii ---------- */
  /* The app uses generous, pill-led radii — the visual signature. */
  --app-radius-sm:            12px;
  --app-radius-md:            18px;
  --app-radius-lg:            24px;
  --app-radius-xl:            32px;
  --app-radius-pill:          999px;

  /* ---------- Shadows ---------- */
  /* Used sparingly. The app reads as flat planes of color separated by
     radii and contrast — not by drop shadow. Modal/floating only. */
  --app-shadow-modal:         0 1px 0 rgba(245, 240, 232, 0.04) inset,
                              0 24px 60px rgba(0, 0, 0, 0.32);
  --app-shadow-card:          0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* =========================================================================
   App UI Layer — component classes
   Prefix: .app-*
   The Vaeso interface (portal, representative area, management).
   ========================================================================= */

/* ---------- Shell ---------- */
.app-shell {
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: var(--font-body);
  min-height: 100%;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  background: var(--app-bg);
  color: var(--app-fg);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
  box-sizing: border-box;
}
.app-sidebar__brand {
  padding: 8px 12px 24px;
}
.app-sidebar__brand img { display: block; height: 28px; width: auto; }
.app-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Nav item — rounded rect pill (filled, no etched border) */
.app-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--app-radius-md);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 15px;
  color: var(--app-fg-muted);
  background: var(--app-veil-2);
  border: none;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-vaeso),
              color var(--dur-quick) var(--ease-vaeso);
  text-decoration: none;
}
.app-nav-item:hover {
  background: var(--app-veil-4);
  color: var(--app-fg);
}
.app-nav-item .app-nav-item__icon {
  width: 18px; height: 18px;
  display: inline-flex;
  flex-shrink: 0;
}
.app-nav-item--active {
  background: linear-gradient(180deg, #F3CACA 0%, #ECB6B6 100%);
  color: var(--app-fg-on-rosa);
  font-weight: var(--fw-medium);
}
.app-nav-item--active:hover {
  background: linear-gradient(180deg, #F3CACA 0%, #ECB6B6 100%);
  color: var(--app-fg-on-rosa);
}

/* User pod (Gestor) — same flat fill rhythm */
.app-userpod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--app-radius-md);
  background: var(--app-veil-2);
  margin-top: 8px;
}
.app-userpod__mark {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.app-userpod__meta {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.1;
}
.app-userpod__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-fg-subtle);
  font-weight: var(--fw-medium);
}
.app-userpod__name { font-size: 14px; color: var(--app-fg); font-weight: var(--fw-medium); }

/* ---------- Page header ---------- */
.app-pageheader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.app-pageheader__title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-pageheader__mark {
  width: 36px; height: 36px;
  display: inline-flex; flex-shrink: 0;
}
.app-pagetitle {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--app-fg);
  margin: 0;
}
.app-pagetitle--xl { font-size: 72px; }
.app-pagetitle--md { font-size: 40px; }

/* Welcome stack (dashboard) */
.app-welcome__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-fg-subtle);
  font-weight: var(--fw-medium);
  margin-bottom: 8px;
}

/* Date / status row */
.app-headmeta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.app-headmeta__date {
  font-size: 14px;
  color: var(--app-fg);
  font-weight: var(--fw-medium);
}

/* ---------- Meta chips (eyebrow + value) ---------- */
.app-metachip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--app-radius-pill);
  background: var(--app-veil-2);
  box-shadow: inset 0 0 0 1px var(--app-hairline);
}
.app-metachip__label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--app-fg-subtle);
  font-weight: var(--fw-medium);
}
.app-metachip__value {
  font-size: 13px;
  color: var(--app-fg);
  font-weight: var(--fw-medium);
}

/* ---------- Status pill ---------- */
.app-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--app-radius-pill);
  background: rgba(168, 216, 208, 0.15);
  color: var(--color-tiffany);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  box-shadow: inset 0 0 0 1px rgba(168, 216, 208, 0.30);
}
.app-status__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-tiffany);
  box-shadow: 0 0 0 3px rgba(168, 216, 208, 0.20);
}
.app-status--ativo {
  background: rgba(168, 216, 208, 0.18);
  color: var(--app-fg-on-tiffany);
  box-shadow: none;
}

/* ---------- Buttons ---------- */
.app-btn {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 15px;
  line-height: 1;
  padding: 16px 24px;
  border: none;
  border-radius: var(--app-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: opacity var(--dur-quick) var(--ease-vaeso),
              background var(--dur-quick) var(--ease-vaeso);
}
.app-btn--tiffany {
  background: rgba(168, 216, 208, 0.20);
  color: var(--color-tiffany);
  box-shadow: inset 0 0 0 1px rgba(168, 216, 208, 0.32);
}
.app-btn--tiffany:hover { background: rgba(168, 216, 208, 0.30); }
.app-btn--tiffany-solid {
  background: var(--color-tiffany);
  color: var(--app-fg-on-tiffany);
}
.app-btn--tiffany-solid:hover { opacity: 0.88; }

.app-btn--verde {
  background: var(--color-verde);
  color: var(--color-off-white);
}
.app-btn--verde:hover { opacity: 0.88; }

.app-btn--ghost {
  background: transparent;
  color: var(--app-fg);
  padding: 14px 18px;
}
.app-btn--ghost:hover { opacity: 0.7; }

.app-btn--ghost-dark {
  background: transparent;
  color: var(--app-fg-dark);
  padding: 14px 18px;
}
.app-btn--ghost-dark:hover { opacity: 0.65; }

.app-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: var(--app-radius-md);
  background: var(--app-veil-2);
  color: var(--app-fg);
  box-shadow: inset 0 0 0 1px var(--app-hairline);
}
.app-btn--icon:hover { background: var(--app-veil-4); }

/* ---------- Tabs (pill) ---------- */
.app-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--app-radius-pill);
  background: transparent;
  color: var(--app-fg-muted);
  font-weight: var(--fw-medium);
  font-size: 15px;
  cursor: pointer;
  border: none;
  box-shadow: inset 0 0 0 1px var(--app-hairline);
  transition: background var(--dur-quick) var(--ease-vaeso);
}
.app-tab:hover { background: var(--app-veil-2); }
.app-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--app-veil-4);
  color: var(--app-fg-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.app-tab--active {
  background: var(--app-veil-4);
  color: var(--app-fg);
  box-shadow: inset 0 0 0 1px var(--app-hairline-strong);
}
.app-tab--active .app-tab__count {
  background: var(--app-veil-8);
  color: var(--app-fg);
}

/* ---------- Filter chip ---------- */
.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--app-radius-pill);
  background: transparent;
  color: var(--app-fg-muted);
  box-shadow: inset 0 0 0 1px var(--app-hairline);
  font-weight: var(--fw-medium);
  font-size: 14px;
  cursor: pointer;
  border: none;
}
.app-chip:hover { background: var(--app-veil-2); color: var(--app-fg); }
.app-chip--rosa {
  background: var(--color-rosa);
  color: var(--app-fg-on-rosa);
  box-shadow: none;
}
.app-chip--rosa:hover { background: var(--color-rosa); opacity: 0.92; }
.app-chip--active {
  background: var(--app-veil-8);
  color: var(--app-fg);
  box-shadow: inset 0 0 0 1px var(--app-hairline-strong);
}

/* ---------- KPI card ---------- */
.app-kpi {
  border-radius: var(--app-radius-lg);
  padding: 24px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 168px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--app-shadow-card);
}
.app-kpi__eyebrow {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.62;
}
.app-kpi__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 14px 0 0;
}
.app-kpi__caption {
  font-size: 13px;
  margin-top: 12px;
  opacity: 0.62;
  font-weight: var(--fw-medium);
}
.app-kpi__mark {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 80px; height: 80px;
  opacity: 0.18;
  pointer-events: none;
}
.app-kpi--verde   { background: var(--app-tint-verde); color: var(--app-fg); }
.app-kpi--bege    { background: var(--app-tint-bege); color: var(--app-fg-on-bege); }
.app-kpi--rosa    { background: var(--app-tint-rosa); color: var(--app-fg-on-rosa); }
.app-kpi--tiffany { background: var(--app-tint-tiffany); color: var(--app-fg-on-tiffany); }

/* ---------- Feirinha summary card ---------- */
.app-feirinha {
  background: var(--app-tint-verde);
  border-radius: var(--app-radius-lg);
  padding: 24px 24px 22px;
  position: relative;
  box-shadow: var(--app-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.app-feirinha__eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--app-accent-rosa);
}
.app-feirinha__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
  color: var(--app-fg);
}
.app-feirinha__client {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-fg-muted);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.app-feirinha__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}
.app-feirinha__price-prefix {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 24px;
  color: var(--app-accent-rosa);
  letter-spacing: -0.02em;
}
.app-feirinha__price-value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--app-accent-rosa);
}
.app-feirinha__price-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--app-fg-muted);
}
.app-feirinha__divider {
  height: 1px;
  background: var(--app-hairline);
  margin: 4px 0;
}
.app-feirinha__stats { display: flex; gap: 32px; }
.app-feirinha__stat { display: flex; flex-direction: column; gap: 4px; }
.app-feirinha__stat-value {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--app-fg);
}
.app-feirinha__stat-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--app-fg-subtle);
  font-weight: var(--fw-medium);
}
.app-feirinha__share {
  position: absolute;
  top: 18px;
  right: 18px;
}

/* ---------- Feature card (large tiffany info block) ---------- */
.app-feature {
  background: var(--app-tint-tiffany);
  color: var(--app-fg-on-tiffany);
  border-radius: var(--app-radius-xl);
  padding: 32px 36px;
  position: relative;
}
.app-feature__eyebrow {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.62;
}
.app-feature__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 16px;
}
.app-feature__price-prefix {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 32px;
  letter-spacing: -0.02em;
}
.app-feature__price-value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.app-feature__caption {
  font-size: 14px;
  font-weight: var(--fw-medium);
  opacity: 0.66;
  margin-bottom: 24px;
}
.app-feature__stats {
  display: flex;
  gap: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 58, 51, 0.18);
}
.app-feature__stat { display: flex; flex-direction: column; gap: 6px; }
.app-feature__stat-value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 28px;
  letter-spacing: -0.02em;
}
.app-feature__stat-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.62;
}

/* ---------- Product card ---------- */
.app-product {
  background: var(--color-off-white);
  border-radius: var(--app-radius-md);
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--app-fg-dark);
  width: 160px;
  box-sizing: border-box;
}
.app-product__image {
  background: var(--color-off-white);
  border-radius: var(--app-radius-sm);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--app-hairline-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-product__image img { width: 100%; height: 100%; object-fit: contain; }
.app-product__title {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}
.app-product__qty {
  display: flex; gap: 6px;
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.app-product__qty-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--app-radius-pill);
  background: rgba(168, 216, 208, 0.30);
  color: var(--app-fg-on-tiffany);
  letter-spacing: 0.04em;
}
.app-product__code {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--app-fg-dark-muted);
  font-weight: var(--fw-medium);
}

/* ---------- Inputs ---------- */
.app-field {
  display: flex; flex-direction: column; gap: 8px;
}
.app-field__label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--app-fg-on-tiffany);
  opacity: 0.66;
}
.app-input {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  padding: 14px 18px;
  border-radius: var(--app-radius-md);
  border: none;
  background: var(--app-tint-tiffany-soft);
  color: var(--app-fg-on-tiffany);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: box-shadow var(--dur-quick) var(--ease-vaeso);
}
.app-input::placeholder { color: rgba(31, 58, 51, 0.55); }
.app-input:focus { box-shadow: inset 0 0 0 1.5px var(--app-fg-on-tiffany); }
.app-input--on-bege {
  background: var(--app-tint-bege-deep);
  color: var(--app-fg-on-bege);
}
.app-input--on-bege::placeholder { color: rgba(47, 42, 31, 0.50); }
.app-input--on-bege:focus { box-shadow: inset 0 0 0 1.5px var(--app-fg-on-bege); }

/* ---------- Stepper ---------- */
.app-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.app-stepper__btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--app-veil-4);
  color: var(--app-fg);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--app-hairline);
  transition: background var(--dur-quick) var(--ease-vaeso);
}
.app-stepper__btn:hover { background: var(--app-veil-8); }
.app-stepper__value {
  font-size: 16px;
  font-weight: var(--fw-medium);
  min-width: 24px;
  text-align: center;
  color: var(--app-fg);
}

/* ---------- Modal (off-white) ---------- */
.app-modal {
  background: var(--color-off-white);
  border-radius: var(--app-radius-xl);
  padding: 32px 36px 28px;
  box-shadow: var(--app-shadow-modal);
  width: 460px;
  box-sizing: border-box;
  color: var(--app-fg-dark);
  position: relative;
}
.app-modal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.app-modal__close {
  position: absolute;
  top: 22px; right: 22px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.06);
  border: none;
  color: var(--app-fg-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-modal__close:hover { background: rgba(26, 26, 26, 0.10); }
.app-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--app-hairline-dark);
}

/* ---------- Section header ---------- */
.app-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.app-section-header__title {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--app-fg-subtle);
  font-weight: var(--fw-medium);
}
.app-section-header__link {
  font-size: 13px;
  color: var(--color-tiffany);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

/* ---------- Data table (on light beige surface) ---------- */
.app-table-wrap {
  background: var(--color-off-white-2);
  border-radius: var(--app-radius-lg);
  padding: 0;
  overflow: hidden;
  color: var(--app-fg-dark);
}
.app-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.app-table thead th {
  background: var(--color-tiffany);
  color: var(--app-fg-on-tiffany);
  text-align: left;
  padding: 14px 20px;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.app-table tbody td {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  vertical-align: middle;
}
.app-table tbody tr:first-child td { border-top: none; }
.app-table__thumb {
  width: 36px; height: 36px;
  border-radius: var(--app-radius-sm);
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.app-table__thumb img { width: 100%; height: 100%; object-fit: contain; }
.app-table__code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--app-fg-dark-muted);
}
.app-table__category { color: var(--app-fg-dark-muted); font-weight: var(--fw-medium); }

/* Status pill — table context (dark verde, off-white text) */
.app-pill-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--app-radius-pill);
  background: var(--app-bg);
  color: var(--app-fg);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

/* ---------- Decorative background asterisk ---------- */
.app-decor {
  position: absolute;
  pointer-events: none;
  opacity: 0.06;
  color: var(--app-fg);
}
.app-decor svg { display: block; width: 100%; height: 100%; }

/* =========================================================================
   Base / semantic resets
   ========================================================================= */
html, body {
  background: var(--bg-default);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* Semantic display & headings */
.v-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-bold);
}
.v-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-bold);
}
.v-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-bold);
}
.v-display-sm {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-bold);
}

h1, .v-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
  margin: 0;
}
h2, .v-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
  margin: 0;
}
h3, .v-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
  margin: 0;
}
h4, .v-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

p, .v-body {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}
.v-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.v-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-muted);
}
.v-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Keyword highlight inside a Bold headline — uses the dedicated Half Regular font */
.v-keyword {
  font-family: var(--font-half);
  font-weight: var(--fw-regular);
}

/* =========================================================================
   Components — minimal, on-brand
   ========================================================================= */

/* Buttons */
.v-btn {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0;
  border: none;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: opacity var(--dur-quick) var(--ease-vaeso),
              background-color var(--dur-quick) var(--ease-vaeso);
}
.v-btn--primary {
  background: var(--color-verde);
  color: var(--color-off-white);
}
.v-btn--primary:hover { opacity: 0.85; }
.v-btn--primary:active { opacity: 0.70; }

.v-btn--secondary {
  background: transparent;
  color: var(--color-preto);
  box-shadow: inset 0 0 0 1px var(--color-preto);
}
.v-btn--secondary:hover { background: var(--color-preto); color: var(--color-off-white); }

.v-btn--ghost {
  background: transparent;
  color: var(--color-preto);
  padding: 12px 16px;
}
.v-btn--ghost:hover { opacity: 0.7; }

.v-btn--on-verde {
  background: var(--color-off-white);
  color: var(--color-verde);
}
.v-btn--on-verde:hover { opacity: 0.88; }

.v-btn--pill { border-radius: var(--radius-pill); }

/* Inputs */
.v-input {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-on-light);
  background: var(--bg-elevated);
  color: var(--fg-default);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--dur-quick) var(--ease-vaeso);
}
.v-input:focus {
  outline: none;
  border-color: var(--color-verde);
}
.v-input::placeholder { color: var(--fg-subtle); }

/* Card */
.v-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.v-card--on-verde {
  background: var(--color-off-white);
  color: var(--color-preto);
}
.v-card--on-light {
  background: var(--color-verde);
  color: var(--color-off-white);
}

/* Tag / chip */
.v-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  background: var(--color-off-white-2);
  color: var(--color-preto);
}