/**
 * Dirizher unified design tokens — single source of truth.
 * Palette: light enterprise surfaces + blue/violet/cyan accents.
 * Include BEFORE page-specific CSS to set shared variables.
 */
:root {
  /* ── Canvas & depth ─────────────────────────────────────── */
  --dh-bg:      #f3f7fd;
  --dh-bg2:     #eaf1fb;
  --dh-panel:   #ffffff;
  --dh-panel2:  #f7f9fd;
  --dh-line:    #dce5f2;
  --dh-line2:   #c8d5e8;

  /* ── Typography ─────────────────────────────────────────── */
  --dh-text:    #111d3d;
  --dh-muted:   #617398;

  /* ── Accent palette ─────────────────────────────────────── */
  --dh-blue:    #2468f2;
  --dh-blue2:   #4987ff;
  --dh-cyan:    #06b6d4;
  --dh-purple:  #6d4aff;
  --dh-purple2: #8b6cff;
  --dh-green:   #0fbf83;
  --dh-amber:   #f59e0b;
  --dh-red:     #ef4655;

  /* ── Layout primitives ──────────────────────────────────── */
  --dh-radius:     12px;
  --dh-radius-sm:  8px;
  --dh-radius-lg:  16px;
  --dh-shadow:     0 12px 30px rgba(35, 72, 132, 0.09);
  --dh-shadow-sm:  0 3px 12px rgba(35, 72, 132, 0.07);
  --dh-sidebar-w:  228px;
  --dh-right-w:    300px;

  /* ── Aliases for dashboard.css (CC pages) ───────────────── */
  --color-bg-deep:       var(--dh-bg);
  --color-bg:            var(--dh-bg2);
  --color-surface:       var(--dh-panel);
  --color-surface-raised:var(--dh-panel2);
  --color-border:        var(--dh-line);
  --color-border-strong: var(--dh-line2);
  --color-text:          var(--dh-text);
  --color-text-muted:    var(--dh-muted);
  --color-text-faint:    #8795ad;
  --color-accent:        var(--dh-blue);
  --color-accent-hover:  var(--dh-blue2);
  --color-accent-muted:  rgba(59, 130, 246, 0.14);
  --color-cyan:          var(--dh-cyan);
  --color-purple:        #7c5cff;
  --color-violet:        #8b5cf6;

  /* ── Semantic statuses ──────────────────────────────────── */
  --color-success:       var(--dh-green);
  --color-success-muted: rgba(34, 197, 94, 0.18);
  --color-running:       var(--dh-blue2);
  --color-running-muted: rgba(96, 165, 250, 0.2);
  --color-failed:        var(--dh-red);
  --color-failed-muted:  rgba(239, 68, 68, 0.16);
  --color-manual:        var(--dh-amber);
  --color-manual-muted:  rgba(245, 158, 11, 0.18);
  --color-review-fg:     #5638bd;
  --color-review-soft:   rgba(124, 92, 255, 0.2);
  --color-done:          #0e9f6e;
  --color-done-muted:    rgba(125, 211, 160, 0.12);
  --color-done-fg:       #52637f;
  --color-pending:       #6b7280;
  --color-pending-muted: rgba(107, 114, 128, 0.2);
  --focus-ring:          var(--dh-cyan);
  --danger:              var(--dh-red);

  /* ── Spacing & radii (CC) ───────────────────────────────── */
  --radius-lg:   14px;
  --radius-md:   10px;
  --radius-sm:   6px;
  --radius-pill: 999px;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;
  --sidebar-width: var(--dh-sidebar-w);
  --content-max-width: 1360px;

  /* ── Shadows (CC) ───────────────────────────────────────── */
  --shadow-sm:  var(--dh-shadow-sm);
  --shadow-md:  var(--dh-shadow);
  --shadow-glow-accent: 0 0 0 1px rgba(59, 130, 246, 0.25);

  /* ── Fonts ──────────────────────────────────────────────── */
  --font-sans: Inter, Manrope, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Type scale ─────────────────────────────────────────── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 3vw, 2.75rem);
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
}

.dh-svg-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Shared interaction primitives. Page styles may refine layout, not states. */
.dh-portal-page :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus-ring) 38%, transparent);
  outline-offset: 2px;
}

.dh-portal-page :where(button, input, select, textarea):disabled,
.dh-portal-page [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.52;
}

.dh-portal-page :where(.dh-input, .input, input[type="text"], input[type="search"], select, textarea) {
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius-sm);
  background: var(--dh-panel);
  color: var(--dh-text);
  box-shadow: 0 1px 2px rgba(38, 72, 126, 0.04);
}

.dh-portal-page :where(.dh-input, .input, input[type="text"], input[type="search"], select, textarea):hover {
  border-color: var(--dh-line2);
}

.dh-portal-page :where(.dh-card, .card) {
  border-color: var(--dh-line);
  background: var(--dh-panel);
  box-shadow: var(--dh-shadow-sm);
}