/* Vendo OS — brand tokens (single source of truth)
   Values come from the Vendo Digital Brand Guidelines Sheet:
     Vendo Green #8EFEBB · Vendo Sage #09221F · Vendo Black #051412
     Charcoal #2C2C2C · Gray #ABABAB
   Typefaces: Manrope (UI, Bold headings), Instrument Serif italic (accent
   words), JetBrains Mono (code and IDs only — metrics use Manrope with
   tabular numerals). Dark only.
   Loaded by every shell via web/views/partials/head-brand.eta and imported
   at the top of style.css. Edit public/assets/* then run `npm run assets:sync`. */

:root {
  /* Ground & surfaces */
  --bg:           #051412;   /* Vendo Black — page ground */
  --bg-elev:      #071916;   /* sidebar / topbar */
  --surface:      #09221F;   /* Vendo Sage — cards */
  --surface-2:    #0d2b27;   /* hover / nested */
  --surface-3:    #123531;   /* active / popovers */
  --neutral:      #2c2c2c;   /* Charcoal — code blocks, kbd, neutral tags */
  --field-bg:     #051412;   /* inputs, selects, textareas */
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.15);

  /* Text */
  --text:         #ffffff;
  --text-muted:   #ababab;   /* Gray */
  --text-faint:   #808080;

  /* Accent — Vendo Green */
  --accent:       #8efebb;
  --accent-text:  #8efebb;
  --accent-ink:   #051412;   /* text on a green fill */
  --accent-hover: #6fe9a5;
  --accent-dim:   rgba(142, 254, 187, 0.12);
  --accent-line:  rgba(142, 254, 187, 0.45);
  --accent-glow:  rgba(142, 254, 187, 0.18);

  /* Semantic */
  --amber:        #e7b552;
  --amber-dim:    rgba(231, 181, 82, 0.12);
  --danger:       #e8685b;
  --danger-dim:   rgba(232, 104, 91, 0.12);
  --sky:          #6db4f0;
  --shadow:       0 1px 2px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.35);
  --pop-shadow:   0 18px 50px rgba(0,0,0,0.55);

  /* Type & shape */
  --vendo-font:   'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --vendo-serif:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --vendo-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --radius-pill:  999px;
  --radius-card:  16px;
  --radius-field: 10px;

  /* Legacy token names, mapped onto the brand palette so every existing
     component picks up the brand. */
  --vendo-green: var(--accent);
  --vendo-green-hover: var(--accent-hover);
  --vendo-green-text: var(--accent-text);
  --vendo-green-subtle: var(--accent-dim);
  --vendo-green-glow: var(--accent-glow);
  --vendo-bg: var(--bg);
  --vendo-surface: var(--surface);
  --vendo-surface-hover: var(--surface-2);
  --vendo-nav: var(--bg-elev);
  --vendo-border: var(--border);
  --vendo-border-strong: var(--border-strong);
  --vendo-text: var(--text);
  --vendo-text-muted: var(--text-muted);
  --vendo-text-faint: var(--text-faint);
  --vendo-text-heading: var(--text);
  --sidebar-width: 264px;
  --sidebar-collapsed: 72px;
  --topbar-height: 60px;
  --vendo-nav-item-hover: var(--surface);
  --vendo-nav-item-active: var(--surface-2);
  --vendo-nav-group-hover: rgba(255, 255, 255, 0.03);

  /* Legacy glass tokens, remapped to flat values. */
  --glass-bg: var(--surface);
  --glass-bg-strong: var(--bg-elev);
  --glass-blur: blur(0px);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-radius: 14px;
  --glass-shadow: none;
  --glass-inset: 0px;
}