/* Vida Hermosa ecosystem design tokens · v1.10 · 11/04/2026
   Paste into the global stylesheet. Set data-company on <html> or <body>:
   <body data-company="rrcc">  →  vh | rrcc | hrs | nhb
   Use the var(--vh-*) names below. Never hard-code a hex value. */

/* Montserrat 600/700 + Inter 400/600, the same Google Fonts files, served from this site (the demo may not reach any other site). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 700;font-display:swap;src:url(assets/fonts/montserrat-latin.woff2) format('woff2')}

:root {
  /* Shared neutrals */
  --vh-text: #1F2933;
  --vh-text-secondary: #666B73;
  --vh-page-bg: #F3F4F6;
  --vh-card: #FFFFFF;
  --vh-border: #D9DCE0;

  /* Status */
  --vh-on-track: #15803D;
  --vh-on-track-tint: #F0FDF4;
  --vh-yellow-flag: #946503;
  --vh-yellow-flag-tint: #FEFCE8;
  --vh-red-flag: #B91C1C;
  --vh-red-flag-tint: #FEF2F2;

  /* Chart series: company accent first, then these in order. Never use status colors for series. */
  --vh-chart-2: #1F2933;
  --vh-chart-3: #5F6B7A;
  --vh-chart-4: #8F99A6;
  --vh-chart-5: #B9C0C8;
  --vh-chart-6: #DCE0E5;

  /* Fonts */
  --vh-font-heading: 'Montserrat', 'Inter', system-ui, sans-serif;
  --vh-font-body: 'Inter', system-ui, sans-serif;
  --vh-size-title: 24px;     /* Montserrat 700 */
  --vh-size-section: 18px;   /* Montserrat 600 */
  --vh-size-number: 28px;    /* Montserrat 700 */
  --vh-size-body: 15px;      /* Inter 400 */
  --vh-size-label: 15px;     /* Inter 600 */
  --vh-size-small: 13px;     /* Inter 400 */

  /* Shape and spacing */
  --vh-radius-control: 8px;
  --vh-radius-card: 12px;
  --vh-control-height: 44px;
  --vh-accent-stripe: 5px;
  --vh-space-1: 4px;
  --vh-space-2: 8px;
  --vh-space-3: 12px;
  --vh-space-4: 16px;
  --vh-space-5: 24px;
  --vh-space-6: 32px;
  --vh-space-7: 48px;
  --vh-danger: #B91C1C;        /* only red flags, errors, negative numbers and Delete */
  --vh-disabled-opacity: 0.4;
  --vh-row-height: 48px;

  /* Company defaults (Vida Hermosa) */
  --vh-accent: #096C5F;            /* brand accent: header stripe, large numbers, fills */
  --vh-accent-text: #096C5F;       /* small text, links, secondary buttons: passes 4.5:1 */
  --vh-dark: #000000;
  --vh-header-bg: #FFFFFF;
  --vh-button-bg: #096C5F;
  --vh-button-text: #FFFFFF;
}

[data-company="vh"] {
  --vh-accent: #096C5F;            /* brand accent: header stripe, large numbers, fills */
  --vh-accent-text: #096C5F;       /* small text, links, secondary buttons: passes 4.5:1 */
  --vh-dark: #000000;
  --vh-header-bg: #FFFFFF;
  --vh-button-bg: #096C5F;
  --vh-button-text: #FFFFFF;
}

[data-company="rrcc"] {
  --vh-accent: #ED1C26;            /* brand accent: header stripe, large numbers, fills */
  --vh-accent-text: #E7121D;       /* small text, links, secondary buttons: passes 4.5:1 */
  --vh-dark: #333333;
  --vh-header-bg: #FFFFFF;
  --vh-button-bg: #E7121D;
  --vh-button-text: #FFFFFF;
}

[data-company="hrs"] {
  --vh-accent: #1196D1;            /* brand accent: header stripe, large numbers, fills */
  --vh-accent-text: #0E7DAE;       /* small text, links, secondary buttons: passes 4.5:1 */
  --vh-dark: #000000;
  --vh-header-bg: #FFFFFF;
  --vh-button-bg: #0E7DAE;
  --vh-button-text: #FFFFFF;
}

[data-company="nhb"] {
  --vh-accent: #D2B069;            /* brand accent: header stripe, large numbers, fills */
  --vh-accent-text: #8D6F36;       /* small text, links, secondary buttons: passes 4.5:1 */
  --vh-dark: #333333;
  --vh-header-bg: #2B2B2B;
  --vh-button-bg: #D2B069;
  --vh-button-text: #1F2933;
}

/* Base styles */
body {
  margin: 0;
  background: var(--vh-page-bg);
  color: var(--vh-text);
  font-family: var(--vh-font-body);
  font-size: var(--vh-size-body);
}

h1 { font-family: var(--vh-font-heading); font-weight: 700; font-size: var(--vh-size-title); }
h2, h3 { font-family: var(--vh-font-heading); font-weight: 600; font-size: var(--vh-size-section); }

.vh-header {
  background: var(--vh-header-bg);
  border-bottom: var(--vh-accent-stripe) solid var(--vh-accent);
  padding: var(--vh-space-3) var(--vh-space-4);
  display: flex;
  align-items: center;
}
.vh-header img { height: 48px; width: auto; }
@media (max-width: 600px) { .vh-header img { height: 36px; } }

.vh-card {
  background: var(--vh-card);
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-card);
  padding: var(--vh-space-4);
}

.vh-number {
  font-family: var(--vh-font-heading);
  font-weight: 700;
  font-size: var(--vh-size-number);
  color: var(--vh-accent-text);
}

.vh-btn, .vh-btn-secondary {
  font-family: var(--vh-font-body);
  font-weight: 600;
  font-size: var(--vh-size-label);
  min-height: var(--vh-control-height);
  padding: 0 var(--vh-space-5);
  border-radius: var(--vh-radius-control);
  border: 2px solid var(--vh-button-bg);
  cursor: pointer;
}
.vh-btn { background: var(--vh-button-bg); color: var(--vh-button-text); }
.vh-btn-secondary { background: #FFFFFF; color: var(--vh-accent-text); border-color: var(--vh-accent-text); }

.vh-input {
  min-height: var(--vh-control-height);
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-control);
  padding: 0 var(--vh-space-3);
  font: inherit;
}
.vh-input:focus { outline: none; border-color: var(--vh-accent-text); }

/* Status chips: always pair with an icon and a word */
.vh-status { display: inline-flex; align-items: center; gap: var(--vh-space-2); padding: var(--vh-space-1) var(--vh-space-3); border-radius: var(--vh-radius-control); border: 1.5px solid; font-weight: 600; font-size: var(--vh-size-small); }
.vh-status--on-track { color: var(--vh-on-track); border-color: var(--vh-on-track); background: var(--vh-on-track-tint); }
.vh-status--yellow-flag { color: var(--vh-yellow-flag); border-color: var(--vh-yellow-flag); background: var(--vh-yellow-flag-tint); }
.vh-status--red-flag { color: var(--vh-red-flag); border-color: var(--vh-red-flag); background: var(--vh-red-flag-tint); }

/* Audit copy banner */
.vh-audit-banner { background: var(--vh-red-flag); color: #FFFFFF; text-align: center; font-weight: 600; padding: var(--vh-space-2); letter-spacing: 0.05em; }

/* v1.5 components */
.vh-btn-danger { background: #FFFFFF; color: var(--vh-danger); border: 2px solid var(--vh-danger); font-family: var(--vh-font-body); font-weight: 600; font-size: var(--vh-size-label); min-height: var(--vh-control-height); padding: 0 var(--vh-space-5); border-radius: var(--vh-radius-control); cursor: pointer; }
.vh-btn:disabled, .vh-btn-secondary:disabled, .vh-btn-danger:disabled { opacity: var(--vh-disabled-opacity); cursor: not-allowed; }
.vh-error { color: var(--vh-danger); font-size: var(--vh-size-small); display: flex; gap: var(--vh-space-1); align-items: center; margin-top: var(--vh-space-1); }
.vh-table th { background: var(--vh-page-bg); font-weight: 600; text-align: left; }
.vh-table td, .vh-table th { height: var(--vh-row-height); padding: 0 var(--vh-space-3); border-bottom: 1px solid var(--vh-border); }
.vh-table td.num, .vh-table th.num { text-align: right; }
.vh-offline { background: var(--vh-yellow-flag-tint); color: var(--vh-yellow-flag); border-bottom: 1.5px solid var(--vh-yellow-flag); padding: var(--vh-space-2) var(--vh-space-4); font-weight: 600; font-size: var(--vh-size-small); }
.vh-last-updated, .vh-version { color: var(--vh-text-secondary); font-size: var(--vh-size-small); }
@media (max-width: 600px) { .vh-actions { display: flex; flex-direction: column-reverse; gap: var(--vh-space-2); } .vh-actions button { width: 100%; } }

/* Negative numbers: red, in parentheses, never a minus sign, e.g. ($2,657.00) */
.vh-negative { color: var(--vh-danger); }

/* Budget bars take the flag color */
.vh-bar { height: 8px; background: var(--vh-page-bg); border-radius: 4px; overflow: hidden; }
.vh-bar > i { display: block; height: 8px; }
.vh-bar--ok > i { background: var(--vh-on-track); } .vh-bar--yellow > i { background: var(--vh-yellow-flag); } .vh-bar--red > i { background: var(--vh-red-flag); }