/* ═════════════════════════════════════════════════════════════════ */
/* UNIFIED DESIGN TOKEN SYSTEM - Badge, Status & Metric Colors       */
/* Foundation for platform-wide consistency and Awwwards submission   */
/* ═════════════════════════════════════════════════════════════════ */

:root {
  /* ────────────────────────────────────────────────────────────── */
  /* BADGE TOKENS (semantic, uppercase labels)                       */
  /* ────────────────────────────────────────────────────────────── */

  --badge-success: #c9a84c;        /* Gold — successful actions, live status */
  --badge-warning: #C4751A;        /* Burnt gold — caution, pending review */
  --badge-danger: #B03030;         /* Red — errors, critical alerts */
  --badge-info: #3b82f6;           /* Blue — informational, neutral state */
  --badge-neutral: #6b7280;        /* Grey — disabled, inactive, neutral */

  /* Badge background variants (light, readable on white) */
  --badge-success-bg: #fdf8ee;
  --badge-warning-bg: #fef6f0;
  --badge-danger-bg: #fef2f2;
  --badge-info-bg: #eff6ff;
  --badge-neutral-bg: #f3f4f6;

  /* ────────────────────────────────────────────────────────────── */
  /* STATUS TOKENS (context-driven state indicators)                 */
  /* ────────────────────────────────────────────────────────────── */

  --status-live: #c9a84c;          /* Live, active, production-ready */
  --status-pending: #C4751A;       /* Awaiting action, in progress */
  --status-inactive: #6b7280;      /* Disabled, offline, paused */
  --status-error: #B03030;         /* Error, failed, critical issue */
  --status-approved: #10b981;      /* Approved, verified, passed */

  /* Status badge backgrounds */
  --status-live-bg: #fdf8ee;
  --status-pending-bg: #fef6f0;
  --status-inactive-bg: #f3f4f6;
  --status-error-bg: #fef2f2;
  --status-approved-bg: #f0fdf4;

  /* ────────────────────────────────────────────────────────────── */
  /* METRIC TOKENS (data visualization, KPI indicators)              */
  /* ────────────────────────────────────────────────────────────── */

  --metric-positive: #10b981;      /* Green — gains, improvements, growth */
  --metric-negative: #e84444;      /* Red — losses, declines, warnings */
  --metric-neutral: #8a9fb8;       /* Grey — balanced, no change, normal */
  --metric-info: #3b82f6;          /* Blue — supplementary, contextual data */

  /* Metric light backgrounds (for cards, highlights) */
  --metric-positive-bg: #f0fdf4;
  --metric-negative-bg: #fef2f2;
  --metric-neutral-bg: #f0f4f8;
  --metric-info-bg: #eff6ff;

  /* ────────────────────────────────────────────────────────────── */
  /* EXTENDED COLOR PALETTE (supporting variants)                    */
  /* ────────────────────────────────────────────────────────────── */

  /* Success variants */
  --color-success-dark: #059669;
  --color-success-light: #d1fae5;

  /* Warning variants */
  --color-warning-dark: #92400e;
  --color-warning-light: #fef08a;

  /* Danger variants */
  --color-danger-dark: #7f1d1d;
  --color-danger-light: #fee2e2;

  /* Info variants */
  --color-info-dark: #1e40af;
  --color-info-light: #dbeafe;

  /* ────────────────────────────────────────────────────────────── */
  /* TEXT TOKENS (paired with badge/status backgrounds)              */
  /* ────────────────────────────────────────────────────────────── */

  --text-badge-success: #22c55e;
  --text-badge-warning: #C4751A;
  --text-badge-danger: #B03030;
  --text-badge-info: #3b82f6;
  --text-badge-neutral: #6b7280;

  /* ────────────────────────────────────────────────────────────── */
  /* BORDER TOKENS (for badge/status outlines)                       */
  /* ────────────────────────────────────────────────────────────── */

  --border-success: #bbf7d0;
  --border-warning: #fed7aa;
  --border-danger: #fecaca;
  --border-info: #bfdbfe;
  --border-neutral: #e5e7eb;

  /* ────────────────────────────────────────────────────────────── */
  /* TONAL VARIANTS (mid-tone for secondary elements)                */
  /* ────────────────────────────────────────────────────────────── */

  --color-gold-dim: #8b6a2a;       /* Dimmed gold for darker themes */
  --color-success-mid: #34d399;    /* Mid success for secondary use */
  --color-danger-mid: #f87171;     /* Mid danger for secondary use */
  --color-warning-mid: #f59e0b;    /* Mid warning for secondary use */
}

/* ═════════════════════════════════════════════════════════════════ */
/* BADGE COMPONENT CLASSES — Token-based implementation              */
/* ═════════════════════════════════════════════════════════════════ */

.badge-token-success {
  background-color: var(--badge-success-bg);
  color: var(--text-badge-success);
  border: 1px solid var(--border-success);
}

.badge-token-warning {
  background-color: var(--badge-warning-bg);
  color: var(--text-badge-warning);
  border: 1px solid var(--border-warning);
}

.badge-token-danger {
  background-color: var(--badge-danger-bg);
  color: var(--text-badge-danger);
  border: 1px solid var(--border-danger);
}

.badge-token-info {
  background-color: var(--badge-info-bg);
  color: var(--text-badge-info);
  border: 1px solid var(--border-info);
}

.badge-token-neutral {
  background-color: var(--badge-neutral-bg);
  color: var(--text-badge-neutral);
  border: 1px solid var(--border-neutral);
}

/* ═════════════════════════════════════════════════════════════════ */
/* STATUS INDICATOR CLASSES — Token-based implementation             */
/* ═════════════════════════════════════════════════════════════════ */

.status-indicator-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--status-live-bg);
  color: var(--status-live);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-indicator-live::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--status-live);
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-indicator-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--status-pending-bg);
  color: var(--status-pending);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-indicator-inactive {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--status-inactive-bg);
  color: var(--status-inactive);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.status-indicator-error {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--status-error-bg);
  color: var(--status-error);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-indicator-approved {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--status-approved-bg);
  color: var(--status-approved);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═════════════════════════════════════════════════════════════════ */
/* METRIC VALUE CLASSES — Token-based KPI styling                    */
/* ═════════════════════════════════════════════════════════════════ */

.metric-positive {
  color: var(--metric-positive);
  font-weight: 600;
}

.metric-positive-bg {
  background-color: var(--metric-positive-bg);
  color: var(--metric-positive);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.metric-negative {
  color: var(--metric-negative);
  font-weight: 600;
}

.metric-negative-bg {
  background-color: var(--metric-negative-bg);
  color: var(--metric-negative);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.metric-neutral {
  color: var(--metric-neutral);
  font-weight: 600;
}

.metric-neutral-bg {
  background-color: var(--metric-neutral-bg);
  color: var(--metric-neutral);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.metric-info {
  color: var(--metric-info);
  font-weight: 600;
}

.metric-info-bg {
  background-color: var(--metric-info-bg);
  color: var(--metric-info);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

/* ═════════════════════════════════════════════════════════════════ */
/* GENERIC COLOR UTILITIES (no hardcoded hex values)                  */
/* ═════════════════════════════════════════════════════════════════ */

.color-success { color: var(--badge-success); }
.color-warning { color: var(--badge-warning); }
.color-danger { color: var(--badge-danger); }
.color-info { color: var(--badge-info); }
.color-neutral { color: var(--badge-neutral); }

.bg-success { background-color: var(--badge-success-bg); }
.bg-warning { background-color: var(--badge-warning-bg); }
.bg-danger { background-color: var(--badge-danger-bg); }
.bg-info { background-color: var(--badge-info-bg); }
.bg-neutral { background-color: var(--badge-neutral-bg); }

/* ═════════════════════════════════════════════════════════════════ */
/* ANIMATIONS (referenced by status indicators)                       */
/* ═════════════════════════════════════════════════════════════════ */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ═════════════════════════════════════════════════════════════════ */
/* INTEGRATION SAFEGUARDS — ensures token usage, no inline hex        */
/* ═════════════════════════════════════════════════════════════════ */

/* Explicitly override any hardcoded hex colors in components */
[class*="badge"],
[class*="status"],
[class*="metric"],
[class*="indicator"] {
  /* Ensure derived from tokens only */
  color: inherit;
  background-color: inherit;
}

/* Force re-evaluation of any color properties using tokens */
:is(.badge, .badge-token-success, .badge-token-warning, .badge-token-danger,
    .badge-token-info, .badge-token-neutral,
    .status-indicator-live, .status-indicator-pending, .status-indicator-inactive,
    .status-indicator-error, .status-indicator-approved,
    .metric-positive, .metric-negative, .metric-neutral, .metric-info) {
  --local-color: var(--badge-success, var(--badge-warning, var(--badge-danger)));
}