/* ── Platform-wide semantic theme tokens ──
   Reference: Audit Plan cards (--card-*), ws-home-stat tiles (--tile-*),
   Audit Universe entity badges (--chip-*), gold primary actions (--btn-primary-*).
   Every page/component should consume these — not hardcoded rgb/hex values. */

:root,
.theme-light {
  /* Text */
  --text-primary: #101820;
  --text-secondary: #475467;
  --text-muted: #667085;

  /* Metric / stat tiles (ws-home-stat reference) */
  --tile-bg: #f8f9fb;
  --tile-border: #e4e4e2;
  --tile-radius: 2px;

  /* Content cards (Audit Plan panel / plan-card reference) */
  --card-bg: #fbfbfa;
  --card-border: #d8d8d4;
  --card-radius: 8px;

  /* Chips / badges (Audit Universe entity register badges reference) */
  --chip-bg: rgba(154, 123, 79, 0.08);
  --chip-border: rgba(154, 123, 79, 0.28);
  --chip-text: #101820;
  --chip-bg-hover: rgba(154, 123, 79, 0.14);

  /* Primary actions (Add to Audit Plan / Optimize Allocations reference) */
  --btn-primary-bg: #9a7b4f;
  --btn-primary-text: #0a0c0e;
  --btn-primary-hover: #866944;

  /* Tab controls (Workforce Plan / Team Capacity reference) */
  --tab-inactive-bg: #f8f9fb;
  --tab-inactive-border: #e4e4e2;
  --tab-inactive-text: #667085;
  --tab-active-bg: rgba(154, 123, 79, 0.08);
  --tab-active-border: rgba(154, 123, 79, 0.35);
  --tab-active-text: #9a7b4f;

  /* Brand accents (gold palette — section pages inherit these) */
  --brand-gold: #9a7b4f;
  --brand-amber: #b8732e;

  /* Shell surfaces */
  --page-bg: #f4f6f8;
  --panel-bg: #ffffff;
  --line-color: #d9dee7;
  --surface-muted: #f3f4f6;
  --surface: #ffffff;
  --surface-elevated: #ffffff;

  /* Section pages (Your Workspace, Audit Universe, etc.) */
  --section-page-gradient: radial-gradient(
    ellipse at bottom right,
    rgba(154, 123, 79, 0.08) 0%,
    rgba(154, 123, 79, 0.03) 35%,
    var(--page-bg) 70%
  );
}

.theme-dark {
  --text-primary: #f7f7f4;
  --text-secondary: #c8c0b0;
  --text-muted: #999994;

  --tile-bg: rgba(0, 0, 0, 0.35);
  --tile-border: #1f1f1f;
  --tile-radius: 2px;

  --card-bg: #111111;
  --card-border: #2f2f2d;
  --card-radius: 8px;

  --chip-bg: rgba(201, 169, 110, 0.08);
  --chip-border: rgba(201, 169, 110, 0.28);
  --chip-text: #e8dcc8;
  --chip-bg-hover: rgba(201, 169, 110, 0.14);

  --btn-primary-bg: #c9a96e;
  --btn-primary-text: #0a0c0e;
  --btn-primary-hover: #b8935a;

  --tab-inactive-bg: rgba(0, 0, 0, 0.24);
  --tab-inactive-border: rgba(255, 255, 255, 0.07);
  --tab-inactive-text: #8a9099;
  --tab-active-bg: rgba(201, 169, 110, 0.06);
  --tab-active-border: rgba(201, 169, 110, 0.42);
  --tab-active-text: #c9a96e;

  --brand-gold: #c9a96e;
  --brand-amber: #c9853a;

  --page-bg: #080808;
  --panel-bg: #111111;
  --line-color: #2f2f2d;
  --surface-muted: #1a1a1a;
  --surface: #111111;
  --surface-elevated: #161616;

  --section-page-gradient: radial-gradient(
    ellipse at bottom right,
    rgba(201, 169, 110, 0.1) 0%,
    rgba(201, 169, 110, 0.04) 35%,
    var(--page-bg) 70%
  );
}

/* Shared component patterns built on tokens */
.ui-tile {
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--tile-radius);
  color: var(--text-primary);
}

.ui-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  color: var(--text-primary);
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 11px;
  line-height: 1.35;
}

.ui-tab {
  padding: 9px 14px;
  border: 1px solid var(--tab-inactive-border);
  background: var(--tab-inactive-bg);
  color: var(--tab-inactive-text);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-tab.is-active {
  border-color: var(--tab-active-border);
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
}