/* ============================================================
   Pantheon — Workspace Design System Tokens
   Applies workspace.humanswith.ai visual language to Pantheon.
   Tokens are scoped under :root and [data-theme] for light/dark.
   ============================================================ */

/* ─── Dark theme (default) ──────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Brand accent — workspace green */
  --hu-accent: #7AB648;
  --hu-accent-hover: #8DC63F;
  --hu-accent-strong: #a3d46a;
  --hu-accent-subtle: rgba(122, 182, 72, 0.14);
  --hu-accent-text: #8DC63F;
  --hu-on-accent: #ffffff;

  /* Secondary accents */
  --hu-accent-secondary: #f59e0b;
  --hu-accent-secondary-hover: #fbbf24;
  --hu-accent-secondary-subtle: rgba(245, 158, 11, 0.14);
  --hu-accent-tertiary: #4a6fa5;
  --hu-accent-tertiary-hover: #7496c4;
  --hu-accent-tertiary-subtle: rgba(74, 111, 165, 0.14);

  /* Surfaces */
  --hu-bg: #0c0a08;
  --hu-bg-inset: #141210;
  --hu-bg-surface: #1e1a16;
  --hu-bg-elevated: #28231e;
  --hu-bg-overlay: #332d26;
  --hu-surface-container: #1f1c19;
  --hu-surface-container-high: #2a2621;
  --hu-surface-container-highest: #35302a;
  --hu-surface-bright: #42392e;

  /* Text */
  --hu-text: #ddd8d3;
  --hu-text-secondary: #9e9892;
  --hu-text-muted: #8a847e;
  --hu-text-faint: #56504a;

  /* Borders */
  --hu-border: #3e372f;
  --hu-border-subtle: #28231e;

  /* Semantic */
  --hu-success: #10b981;
  --hu-success-dim: rgba(16, 185, 129, 0.15);
  --hu-warning: #eab308;
  --hu-warning-dim: rgba(234, 179, 8, 0.15);
  --hu-error: #f97066;
  --hu-error-dim: rgba(249, 112, 102, 0.12);
  --hu-info: #3b82f6;
  --hu-info-dim: rgba(59, 130, 246, 0.15);

  /* Links */
  --hu-link: #8DC63F;
  --hu-link-hover: #a3d46a;

  /* Overlays */
  --hu-hover-overlay: rgba(255, 255, 255, 0.08);
  --hu-pressed-overlay: rgba(255, 255, 255, 0.12);
  --hu-focus-overlay: rgba(255, 255, 255, 0.12);
  --hu-disabled-overlay: rgba(252, 248, 242, 0.04);

  /* Focus ring */
  --hu-focus-ring: #7AB648;
  --hu-focus-ring-width: 2px;
  --hu-focus-ring-offset: 2px;
}

/* ─── Light theme ──────────────────────────────────────────── */
[data-theme="light"] {
  --hu-accent: #7AB648;
  --hu-accent-hover: #5A9A30;
  --hu-accent-strong: #7AB648;
  --hu-accent-subtle: rgba(122, 182, 72, 0.08);
  --hu-accent-text: #3a6a24;
  --hu-on-accent: #ffffff;

  --hu-accent-secondary: #d97706;
  --hu-accent-secondary-hover: #b45309;
  --hu-accent-secondary-subtle: rgba(217, 119, 6, 0.10);
  --hu-accent-tertiary: #3d5d8c;
  --hu-accent-tertiary-hover: #324a73;
  --hu-accent-tertiary-subtle: rgba(61, 93, 140, 0.10);

  --hu-bg: #F5F5F3;
  --hu-bg-inset: #EDEDEB;
  --hu-bg-surface: #FFFFFF;
  --hu-bg-elevated: #FAFAF8;
  --hu-bg-overlay: #FFFFFF;
  --hu-surface-container: #f8f8f6;
  --hu-surface-container-high: #f0eeed;
  --hu-surface-container-highest: #e8e7e4;
  --hu-surface-bright: #ffffff;

  --hu-text: #2D2A26;
  --hu-text-secondary: #4A4540;
  --hu-text-muted: #6B655E;
  --hu-text-faint: #9A9490;

  --hu-border: #DCDAD8;
  --hu-border-subtle: #E8E6E3;

  --hu-success: #008000;
  --hu-success-dim: rgba(0, 128, 0, 0.08);
  --hu-warning: #ca8a04;
  --hu-warning-dim: rgba(202, 138, 4, 0.1);
  --hu-error: #CC0000;
  --hu-error-dim: rgba(204, 0, 0, 0.08);
  --hu-info: #2563eb;
  --hu-info-dim: rgba(37, 99, 235, 0.1);

  --hu-link: #5A9A30;
  --hu-link-hover: #3a6a24;

  --hu-hover-overlay: rgba(0, 0, 0, 0.06);
  --hu-pressed-overlay: rgba(0, 0, 0, 0.10);
  --hu-focus-overlay: rgba(0, 0, 0, 0.10);
  --hu-disabled-overlay: rgba(0, 0, 0, 0.04);

  --hu-focus-ring: #5A9A30;
}

/* ─── Typography ───────────────────────────────────────────── */
:root {
  --hu-font: 'Avenir', 'Avenir Next', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --hu-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  --hu-text-2xs: 11px;
  --hu-text-xs: 12px;
  --hu-text-sm: 14px;
  --hu-text-base: 16px;
  --hu-text-lg: clamp(18px, 1.5vw, 20px);
  --hu-text-xl: clamp(22px, 2vw, 26px);
  --hu-text-2xl: clamp(24px, 3vw, 32px);
  --hu-text-3xl: clamp(28px, 4vw, 40px);
  --hu-text-hero: clamp(32px, 5vw, 56px);

  --hu-weight-light: 300;
  --hu-weight-normal: 400;
  --hu-weight-medium: 500;
  --hu-weight-semibold: 600;
  --hu-weight-bold: 700;
}

/* ─── Spacing ──────────────────────────────────────────────── */
:root {
  --hu-space-2xs: 2px;
  --hu-space-xs: 4px;
  --hu-space-sm: 8px;
  --hu-space-md: 16px;
  --hu-space-lg: 24px;
  --hu-space-xl: 32px;
  --hu-space-2xl: 48px;
  --hu-space-3xl: 64px;
}

/* ─── Radius ───────────────────────────────────────────────── */
:root {
  --hu-radius-sm: 4px;
  --hu-radius-md: 8px;
  --hu-radius-lg: 12px;
  --hu-radius-xl: 16px;
  --hu-radius-2xl: 24px;
  --hu-radius-full: 9999px;
}

/* ─── Motion ───────────────────────────────────────────────── */
:root {
  --hu-duration-fast: 100ms;
  --hu-duration-normal: 200ms;
  --hu-duration-moderate: 300ms;
  --hu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hu-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hu-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ─── Component tokens ────────────────────────────────────── */
:root {
  --hu-button-min-height: 44px;
  --hu-button-padding-x: 16px;
  --hu-button-padding-y: 8px;
  --hu-button-radius: 8px;
  --hu-button-font-size: 14px;
  --hu-button-font-weight: 500;

  --hu-input-min-height: 44px;
  --hu-input-padding-x: 12px;
  --hu-input-padding-y: 8px;
  --hu-input-radius: 8px;
  --hu-input-font-size: 16px;

  --hu-card-radius: 12px;
  --hu-card-padding: 24px;

  --hu-sidebar-width: 240px;
}

/* ─── Workspace-styled components (scoped) ─────────────────── */

/* Cards */
.hu-card {
  background: var(--hu-bg-surface);
  border: 1px solid var(--hu-border-subtle);
  border-radius: var(--hu-card-radius);
  padding: var(--hu-card-padding);
}

.hu-card--elevated {
  background: var(--hu-bg-elevated);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
}

.hu-card--success {
  border-color: var(--hu-success);
  background: var(--hu-success-dim);
}

.hu-card--error {
  border-color: var(--hu-error);
  background: var(--hu-error-dim);
}

/* Buttons */
.hu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hu-space-xs);
  min-height: var(--hu-button-min-height);
  padding: var(--hu-button-padding-y) var(--hu-button-padding-x);
  border-radius: var(--hu-button-radius);
  font-family: var(--hu-font);
  font-size: var(--hu-button-font-size);
  font-weight: var(--hu-button-font-weight);
  border: none;
  cursor: pointer;
  transition: background var(--hu-duration-fast) var(--hu-ease-out),
              transform var(--hu-duration-fast) var(--hu-ease-spring);
  text-decoration: none;
  white-space: nowrap;
}

.hu-btn:active { transform: scale(0.97); }

.hu-btn--primary {
  background: var(--hu-accent);
  color: var(--hu-on-accent);
}
.hu-btn--primary:hover { background: var(--hu-accent-hover); }

.hu-btn--secondary {
  background: var(--hu-bg-surface);
  color: var(--hu-accent-text);
  border: 1px solid var(--hu-border);
}
.hu-btn--secondary:hover { background: var(--hu-hover-overlay); }

.hu-btn--ghost {
  background: transparent;
  color: var(--hu-accent-text);
}
.hu-btn--ghost:hover { background: var(--hu-hover-overlay); }

.hu-btn--danger {
  background: var(--hu-error);
  color: #fff;
}
.hu-btn--danger:hover { filter: brightness(1.1); }

.hu-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inputs */
.hu-input,
.hu-select {
  width: 100%;
  min-height: var(--hu-input-min-height);
  padding: var(--hu-input-padding-y) var(--hu-input-padding-x);
  border-radius: var(--hu-input-radius);
  border: 1px solid var(--hu-border);
  background: var(--hu-bg-surface);
  color: var(--hu-text);
  font-family: var(--hu-font);
  font-size: var(--hu-input-font-size);
  transition: border-color var(--hu-duration-fast) var(--hu-ease-out);
}

.hu-input:focus,
.hu-select:focus {
  outline: none;
  border-color: var(--hu-accent);
  box-shadow: 0 0 0 var(--hu-focus-ring-width) var(--hu-accent-subtle);
}

.hu-input::placeholder { color: var(--hu-text-faint); }

/* Labels */
.hu-label {
  display: block;
  font-size: var(--hu-text-sm);
  font-weight: var(--hu-weight-medium);
  color: var(--hu-text-secondary);
  margin-bottom: var(--hu-space-xs);
}

/* Tables */
.hu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hu-text-sm);
}

.hu-table th {
  text-align: left;
  padding: var(--hu-space-sm) var(--hu-space-md);
  font-weight: var(--hu-weight-semibold);
  color: var(--hu-text-muted);
  border-bottom: 1px solid var(--hu-border);
  font-size: var(--hu-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hu-table td {
  padding: var(--hu-space-sm) var(--hu-space-md);
  border-bottom: 1px solid var(--hu-border-subtle);
  color: var(--hu-text);
}

.hu-table tbody tr:hover td {
  background: var(--hu-hover-overlay);
}

.hu-table tbody tr:last-child td {
  border-bottom: none;
}

/* Status badges */
.hu-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--hu-radius-full);
  font-size: var(--hu-text-xs);
  font-weight: var(--hu-weight-medium);
}

.hu-badge--active {
  background: var(--hu-success-dim);
  color: var(--hu-success);
}

.hu-badge--revoked {
  background: var(--hu-error-dim);
  color: var(--hu-error);
}

.hu-badge--pending {
  background: var(--hu-warning-dim);
  color: var(--hu-warning);
}

/* Code */
.hu-code {
  font-family: var(--hu-font-mono);
  font-size: var(--hu-text-xs);
  background: var(--hu-bg-inset);
  padding: 2px 6px;
  border-radius: var(--hu-radius-sm);
  color: var(--hu-accent-text);
}

/* Form rows */
.hu-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hu-space-md);
  margin-bottom: var(--hu-space-md);
}

@media (max-width: 640px) {
  .hu-form-row { grid-template-columns: 1fr; }
}

/* Key-value grids */
.hu-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--hu-space-md);
}

.hu-kv-grid dt {
  font-size: var(--hu-text-xs);
  font-weight: var(--hu-weight-medium);
  color: var(--hu-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--hu-space-2xs);
}

.hu-kv-grid dd {
  font-size: var(--hu-text-sm);
  color: var(--hu-text);
  margin: 0;
}

/* Section headers */
.hu-section-title {
  font-size: var(--hu-text-lg);
  font-weight: var(--hu-weight-semibold);
  color: var(--hu-text);
  margin: 0 0 var(--hu-space-sm) 0;
}

.hu-section-desc {
  font-size: var(--hu-text-sm);
  color: var(--hu-text-muted);
  margin: 0 0 var(--hu-space-md) 0;
  line-height: 1.5;
}

/* Page header */
.hu-page-header {
  margin-bottom: var(--hu-space-xl);
}

.hu-page-kicker {
  font-size: var(--hu-text-xs);
  font-weight: var(--hu-weight-medium);
  color: var(--hu-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--hu-space-xs);
}

.hu-page-title {
  font-size: var(--hu-text-2xl);
  font-weight: var(--hu-weight-bold);
  color: var(--hu-text);
  margin: 0 0 var(--hu-space-sm) 0;
  line-height: 1.2;
}

.hu-page-lead {
  font-size: var(--hu-text-base);
  color: var(--hu-text-secondary);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
}

/* Copy button */
.hu-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--hu-radius-sm);
  border: 1px solid var(--hu-border);
  background: var(--hu-bg-surface);
  color: var(--hu-text-muted);
  font-size: var(--hu-text-xs);
  cursor: pointer;
  transition: all var(--hu-duration-fast) var(--hu-ease-out);
}

.hu-copy-btn:hover {
  border-color: var(--hu-accent);
  color: var(--hu-accent-text);
}