/* ============================================================
   EDITORUM MANAGE — DESIGN TOKENS
   CSS custom properties and font imports.
   ============================================================ */

@import url("../../journals/css/inter.css");

:root {
  --ed-blue: #1a56db;
  --ed-blue-dark: #1e40af;
  --ed-text: #111827;
  --ed-body: #374151;
  --ed-muted: #6b7280;
  --ed-border: #e5e7eb;
  --ed-bg: #f9fafb;
  --ed-white: #ffffff;
  --ed-sidebar-w: 180px;
  --ed-secondary-sidebar-w: 240px;
  --ed-secondary-sidebar-footer-gap: 96px;
  --ed-header-h: 56px;
  --ed-panel-header-h: 63px;
  --ed-nav-tabs-h: 69px;
  --ed-radius: 8px;
  --ed-radius-md: 6px;
  --ed-radius-sm: 4px;
  --ed-radius-btn: var(--ds-radius-btn);
  --ed-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Spacing scale ────────────────────────────────────────────── */
  --ed-space-1: 4px;
  --ed-space-1h: 6px;
  --ed-space-2: 8px;
  --ed-space-2h: 10px;
  --ed-space-3: 12px;
  --ed-space-4: 16px;
  --ed-space-5: 20px;
  --ed-space-8: 32px;
  --ed-space-9: 36px;

  /* ── Controls ─────────────────────────────────────────────────── */
  --ed-control-h: 40px;
  --ed-control-h-sm: 36px;
  --ed-control-h-xs: 24px;
  --ed-placeholder: #9ca3af;

  /* ── Select chevron (thin, design-system canonical) ───────────── */
  /* Use as CSS mask (color via background) or background-image (stroke baked into SVG). */
  --ed-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ed-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* ── Inline-form error slot ───────────────────────────────────── */
  --ed-error-font-size: 13px;
  --ed-error-slot-h: 20px;

  /* ── Shadows & focus rings ────────────────────────────────────── */
  --ed-focus-ring: 0 0 0 3px rgba(26, 86, 219, 0.1);
  --ed-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.1);
  --ed-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* ── Transitions ──────────────────────────────────────────────── */
  --ed-transition: 0.15s ease;
  --ed-transition-fast: 0.12s ease;
  --ed-primary: #1a56db;
  --ed-primary-bg: rgba(26, 86, 219, 0.08);
  --ed-primary-bg-soft: #eff6ff;
  --ed-primary-border-soft: #bfdbfe;
  --ed-success: #16a34a;
  --ed-success-hover: #15803d;
  --ed-success-bg: #f0fdf4;
  --ed-success-bg-hover: #dcfce7;
  --ed-success-border: #bbf7d0;
  --ed-success-border-hover: #86efac;
  --ed-success-text: #15803d;
  --ed-success-text-hover: #166534;
  --ed-warning: #d97706;
  --ed-warning-hover: #b45309;
  --ed-warning-bg: #fffbeb;
  --ed-warning-bg-hover: #fef3c7;
  --ed-warning-border: #fde68a;
  --ed-warning-border-hover: #fcd34d;
  --ed-warning-text: #b45309;
  --ed-warning-text-strong: #92400e;
  --ed-danger: #dc2626;
  --ed-danger-hover: #b91c1c;
  --ed-danger-bg: #fef2f2;
  --ed-danger-bg-hover: #fee2e2;
  --ed-danger-border: #fecaca;
  --ed-danger-border-hover: #fca5a5;
  --ed-danger-text: #b91c1c;
  --ed-danger-text-strong: #991b1b;

  /* ============================================================
     SHELL TOKENS — canonical layout tokens for the admin/cabinet
     shell. Other files consume these; do not override elsewhere
     except by setting [data-shell-variant] or [data-shell-context].
     ============================================================ */
  --shell-top-h: var(--ed-header-h);              /* 56 px admin default */
  --shell-sidebar-w: var(--ed-sidebar-w);
  --shell-secondary-sidebar-w: var(--ed-secondary-sidebar-w);
  --shell-gap-cover: var(--ed-space-1);
  --shell-chrome-h: var(--shell-top-h);
  /* back-compat alias: existing rules using --ed-sticky-top still work */
  --ed-sticky-top: var(--shell-chrome-h);
}

.workspace-form-panel__body {
  --ed-sticky-top: calc(var(--ed-header-h) + var(--ed-panel-header-h));
}

.main-wrapper[data-shell-variant="cabinet"],
[data-shell-variant="cabinet"] {
  /* Cabinet header is sticky AND remains in normal flow, so shell math must
     use the actual occupied top chrome height rather than the admin token. */
  --shell-top-h: 51px;
}