/* ============================================================
   Vibe Web — Design Tokens
   Single source of truth. Import from any HTML:
     <link rel="stylesheet" href="../../brand/tokens.css">

   Contrast tiers (all on --bg):
     --text         AAA
     --text-muted   AA
     --text-soft    AA (>=24px or >=18.67px bold)
     --text-subtle  AA-large only (decorative / price labels)
     --accent       AA
     --border       decorative borders ONLY, never text
============================================================ */

:root {
  /* ---------- Surface ---------- */
  --bg:           #0a0a0a;
  --surface:      #141414;
  --surface-hi:   #1c1c1c;
  --border:       #2a2a2a;
  --border-faint: #3a3a3a;

  /* ---------- Text ---------- */
  --text:         #ffffff;
  --text-muted:   #a3a3a3;
  --text-soft:    #999999;
  --text-subtle:  #888888;

  /* ---------- Accent (brand green) ---------- */
  --accent:        #04d361;
  --accent-dark:   #028a40;
  --accent-light:  #05ff7a;

  /* RGB channels of --accent — use in templates as rgba(var(--accent-rgb), X)
     for arbitrary opacity without proliferating opacity tokens. */
  --accent-rgb:    4, 211, 97;

  /* Pre-mixed discrete opacities for common alpha levels. */
  --accent-10:     rgba(4, 211, 97, 0.10);
  --accent-20:     rgba(4, 211, 97, 0.20);
  --accent-25:     rgba(4, 211, 97, 0.25);
  --accent-30:     rgba(4, 211, 97, 0.30);

  /* ---------- Signal ---------- */
  --signal-red:    #e87070;
  --signal-yellow: #e8c84a;

  /* ---------- Typography ---------- */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Fira Code', monospace;
}