/*
 * HDS Brand Tokens
 * ============================================================
 * Layer 3 — Product personality.
 *
 * Each Humi product registers its brand colors through this layer.
 * Brand tokens control accent color, hover state, and surface mode.
 *
 * Dependency: semantic.css (references semantic tokens)
 * Used by:    All product-specific CSS
 *
 * RULE: Brand tokens define ONLY accent colors. They must NEVER
 *       override Decision Tokens, spacing, typography, or feedback
 *       colors. See Token Constitution §5 for immutability rules.
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Default Brand (used when no product class is present)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --hds-brand-accent:       #6366f1;
  --hds-brand-accent-hover: #4f46e5;
  --hds-brand-accent-soft:  rgba(99, 102, 241, 0.12);
  --hds-brand-accent-glow:  rgba(99, 102, 241, 0.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HumiValue — Growth Expression
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hds-product-humivalue {
  --hds-brand-accent:       #10b981;
  --hds-brand-accent-hover: #059669;
  --hds-brand-accent-soft:  rgba(16, 185, 129, 0.12);
  --hds-brand-accent-glow:  rgba(16, 185, 129, 0.3);

  /* HumiValue uses a dark header with light body */
  --hds-page-header-bg:     var(--hds-neutral-900);
  --hds-page-header-text:   var(--hds-neutral-0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HumiBid — Decision Expression
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hds-product-humibid {
  --hds-brand-accent:       #6366f1;
  --hds-brand-accent-hover: #4f46e5;
  --hds-brand-accent-soft:  rgba(99, 102, 241, 0.12);
  --hds-brand-accent-glow:  rgba(99, 102, 241, 0.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HumiKudo — Evidence Expression
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hds-product-humikudo {
  --hds-brand-accent:       #c89b3c;
  --hds-brand-accent-hover: #b8862e;
  --hds-brand-accent-soft:  rgba(200, 155, 60, 0.12);
  --hds-brand-accent-glow:  rgba(200, 155, 60, 0.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HumiLead — Conversion Expression
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hds-product-humilead {
  --hds-brand-accent:       #c89b3c;
  --hds-brand-accent-hover: #b8862e;
  --hds-brand-accent-soft:  rgba(200, 155, 60, 0.12);
  --hds-brand-accent-glow:  rgba(200, 155, 60, 0.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HumiMind — Intelligence Expression
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hds-product-humimind {
  --hds-brand-accent:       #8b5cf6;
  --hds-brand-accent-hover: #a78bfa;
  --hds-brand-accent-soft:  rgba(139, 92, 246, 0.12);
  --hds-brand-accent-glow:  rgba(139, 92, 246, 0.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HumiHQ — Brand Expression (neutral, mother brand)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hds-product-humihq {
  --hds-brand-accent:       var(--hds-neutral-700);
  --hds-brand-accent-hover: var(--hds-neutral-900);
  --hds-brand-accent-soft:  var(--hds-neutral-100);
  --hds-brand-accent-glow:  rgba(0, 0, 0, 0.08);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Product base typography (per-brand font configuration)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hds-product-humivalue,
.hds-product-humibid,
.hds-product-humikudo,
.hds-product-humilead,
.hds-product-humimind,
.hds-product-humihq {
  font-family: var(--hds-font-sans);
  font-size: var(--hds-font-base);
  line-height: var(--hds-leading-normal);
  color: var(--hds-text-primary);
  background: var(--hds-surface-root);
}