:root {
  /* Exact tokens from we-verifi-brand.css (the master brand stylesheet).
     Each product gets its own accent on a shared base — Cert Verifi is
     indigo, Project Verifi is teal, Art Verifi is magenta. */
  --graphite: #14161C;
  --cloud:    #F4F5F8;
  --hairline: #DADFE8;
  --muted-src:#7A8093;

  --indigo:  #5B5FEF;   /* Cert Verifi — not used here, kept for reference */
  --teal:    #17C3B2;   /* Project Verifi — not used here */
  --magenta: #FF5DA2;   /* Art Verifi — this product's assigned accent */

  --foil-gradient: linear-gradient(135deg, var(--indigo) 0%, var(--teal) 50%, var(--magenta) 100%);

  /* ---- semantic aliases used throughout app.css / cert.css ---- */
  --brand:      var(--magenta);
  --brand-dark: #E1478C;   /* darkened magenta for hover states */
  --brand-tint: #FFF0F6;   /* light magenta tint for input fills */

  --bg:   #FFFFFF;
  --card: #FFFFFF;
  --ink:      var(--graphite);
  --ink-soft: #3E4152;
  --muted:    var(--muted-src);
  --line:     var(--hairline);

  --danger:     #D64545;
  --danger-bg:  #FBEAEA;
  --verified:   #1F9D6B;
  --verified-bg:#E6F7EF;
  --warn-fg:    #B4791B;
  --warn-bg:    #FCF1DE;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius:      14px;   /* cards/modals, matches brand.css + admin.html */
  --radius-btn:  9px;    /* buttons/inputs, confirmed by brand.css AND admin.html */
  --radius-pill: 999px;  /* nav pills / status badges, matches both sources */
  --shadow: 0 10px 30px rgba(20,22,28,0.08); /* matches brand.css's .product-card:hover */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}