/**
 * MBIT Editor - Editor.js theme variables only.
 *
 * Editor.js v2.31's UMD bundle self-injects its own complete CSS — including
 * toolbar layout, popover positioning, profile/preset variants, and
 * accessibility profiles. Earlier revisions of this file shipped 1000+
 * lines of overrides written for an older Editor.js DOM, which fought
 * the bundle and produced broken layouts (see commits 2026-05).
 *
 * The right pattern: theme via the variables Editor.js exposes for that
 * purpose, and otherwise stay out of the way. The bundle picks our
 * tokens up automatically without selector specificity wars.
 *
 * Anything UI-related that's NOT a theme variable should NOT live here.
 */

:root {
  /* Surfaces (light theme — matches the LMS app shell) */
  --surface-base: var(--ml-bg, #ffffff);
  --surface-raised: var(--ml-surface, #ffffff);
  --surface-elevated: var(--ml-surface-raised, #ffffff);
  --surface-subtle: var(--ml-bg-subtle, #f5f7fa);
  --surface-muted: var(--ml-bg-subtle, #f5f7fa);
  --surface-hover: var(--ml-bg-subtle, #eef1f5);
  --surface-active: var(--ml-bg-subtle, #e8edf3);
  --surface-overlay: rgba(255, 255, 255, 0.96);

  /* Text */
  --text-primary: var(--ml-text, #1e293b);
  --text-secondary: var(--ml-text-muted, #475569);
  --text-muted: var(--ml-text-muted, #64748b);
  --text-on-accent: #ffffff;

  /* Borders */
  --border-default: var(--ml-border, #cbd5e1);
  --border-subtle: var(--ml-border, #e2e8f0);
  --border-muted: var(--ml-border, #e2e8f0);
  --border-strong: var(--ml-border, #94a3b8);
  --border-focus: var(--ml-focus, var(--ml-primary, #2563eb));

  /* Accents */
  --accent-primary: var(--ml-primary, #2563eb);
  --accent-soft: rgba(37, 99, 235, 0.12);
  --accent-danger: #dc2626;
  --accent-danger-hover: #b91c1c;

  /* Radii */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-overlay: rgba(15, 23, 42, 0.18);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Spacing (Editor.js uses these for toolbar gaps) */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 10px;
  --spacing-md: 14px;
  --spacing-lg: 18px;

  /* Sizing — keep close to Editor.js defaults so we don't shrink touch
   * targets unintentionally. Editor.js uses 44px (desktop) / 48px (mobile)
   * by default for toolbar buttons, which already meets WCAG SC 2.5.5. */
  --content-width: 720px;
  --toolbox-buttons-size: 44px;
  --toolbox-buttons-size--mobile: 48px;
  --icon-size: 20px;
  --icon-size--mobile: 24px;

  /* Focus */
  --focus-ring-width: 3px;
  --focus-ring-color: rgba(37, 99, 235, 0.45);
}

/* Read-only viewer: hide toolbars/popovers, lock cursor — content viewers
 * never want any of the authoring chrome. */
.editorjs-readonly .ce-toolbar,
.editorjs-readonly .ce-toolbox,
.editorjs-readonly .ce-inline-toolbar,
.editorjs-readonly .ce-conversion-toolbar,
.editorjs-readonly .ce-settings,
.editorjs-readonly .ce-toolbar__plus,
.editorjs-readonly .ce-toolbar__settings-btn,
.editorjs-readonly .ce-popover {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.editorjs-readonly .ce-block {
  cursor: default;
}

.editorjs-readonly .ce-block:focus,
.editorjs-readonly .ce-block:focus-within,
.editorjs-readonly [contenteditable]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Print: drop authoring UI, keep content. */
@media print {
  .ce-toolbar,
  .ce-toolbox,
  .ce-inline-toolbar,
  .ce-settings,
  .ce-popover {
    display: none !important;
  }

  .codex-editor {
    border: none;
    padding: 0;
  }

  .ce-block__content {
    max-width: 100%;
  }
}