/* MetalIQ — Color tokens
 * Brand + neutrals + status + price movement + metal chips.
 * Semantic aliases follow at the bottom.
 */
:root{
  /* Brand */
  --ink:#1E2430;
  --ink-hover:#2C3444;
  --gold:#C09A3E;
  --champagne:#FBF7EC;
  --teal-iq:#0E6B66;

  /* Neutrals (Polaris-aligned app chrome) */
  --bg:#F6F6F7;
  --surface:#FFFFFF;
  --surface-hover:#FAFAFB;
  --surface-subdued:#F1F1F2;
  --border:#E3E3E3;
  --hairline:#EBEBEB;
  --text:#1F2430;
  --text-secondary:#5C5F62;
  --text-disabled:#8C9196;
  --text-on-ink:#FFFFFF;

  /* Status — text/icon */
  --success:#0F7B54;
  --warning:#8A6D1A;
  --critical:#C4322B;
  --info:#2C6ECB;

  /* Status — surface */
  --success-bg:#E7F4EE;
  --warning-bg:#FCF3D9;
  --critical-bg:#FBEAE9;
  --info-bg:#EAF0FB;

  /* Metal chips (visual dots + pills) */
  --metal-gold:#C9A24A;
  --metal-silver:#9BA0A5;
  --metal-rose:#C98E86;
  --metal-platinum:#C7CBD1;

  /* Focus ring (2px offset white, 2px info blue) */
  --focus-ring:0 0 0 2px #FFFFFF,0 0 0 4px var(--info);

  /* Semantic aliases — use these in components */
  --color-page:var(--bg);
  --color-card:var(--surface);
  --color-card-hover:var(--surface-hover);
  --color-border:var(--border);
  --color-divider:var(--hairline);
  --color-text-body:var(--text);
  --color-text-muted:var(--text-secondary);
  --color-text-disabled:var(--text-disabled);
  --color-primary:var(--ink);
  --color-primary-hover:var(--ink-hover);
  --color-accent:var(--gold);
  --color-accent-soft:var(--champagne);
  --color-smart:var(--teal-iq);

  /* Price movement (paired with icon/arrow — never color alone) */
  --price-up:var(--warning);       /* a rise needs the merchant's eye */
  --price-up-bg:var(--warning-bg);
  --price-down:var(--success);
  --price-down-bg:var(--success-bg);
  --price-held:var(--critical);
  --price-held-bg:var(--critical-bg);
}