/**
 * Xenia — CKEditor 5 UI restyle.
 *
 * Hand-authored (not part of the Tailwind build). Restyles the editor chrome
 * by overriding CKEditor 5's own design tokens so the whole UI stays cohesive,
 * then adds a few structural touches. Colours mirror the app palette
 * (blue-600 primary, slate borders/surfaces).
 */

/**
 * Token overrides use !important: CKEditor 5 defines these same custom
 * properties on :root and its CSS loads AFTER the theme's, so a plain
 * declaration would lose the cascade. An !important custom property wins
 * regardless of source order.
 */
:root {
  /* Shape */
  --ck-border-radius: 10px !important;

  /* Surfaces & borders */
  --ck-color-base-background: #ffffff !important;
  --ck-color-base-border: rgb(226 232 240) !important;            /* slate-200 */
  --ck-color-toolbar-background: rgb(248 250 252) !important;     /* slate-50  */
  --ck-color-toolbar-border: rgb(226 232 240) !important;
  --ck-color-text: rgb(15 23 42) !important;                      /* slate-900 */

  /* Buttons — default + hover/active */
  --ck-color-button-default-hover-background: rgb(241 245 249) !important;   /* slate-100 */
  --ck-color-button-default-active-background: rgb(226 232 240) !important;  /* slate-200 */

  /* Buttons — "on" (active feature) use the brand blue */
  --ck-color-button-on-background: rgb(239 246 255) !important;   /* blue-50  */
  --ck-color-button-on-hover-background: rgb(219 234 254) !important; /* blue-100 */
  --ck-color-button-on-active-background: rgb(219 234 254) !important;
  --ck-color-button-on-color: rgb(37 99 235) !important;          /* blue-600 */

  /* Focus */
  --ck-color-focus-border: rgb(37 99 235) !important;             /* blue-600 */
  --ck-focus-outer-shadow: 0 0 0 3px rgb(37 99 235 / 0.18) !important;

  /* Links inside the UI */
  --ck-color-link-default: rgb(29 78 216) !important;             /* blue-700 */

  /* Softer panels, no harsh inset */
  --ck-inner-shadow: none !important;
  --ck-drop-shadow: 0 6px 20px rgb(15 23 42 / 0.12) !important;
}

/* Clip children to the rounded wrapper so corners stay crisp. */
.ck.ck-editor {
  border-radius: var(--ck-border-radius);
}

/* Toolbar: a touch more breathing room. */
.ck.ck-toolbar {
  border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
  padding: 0.35rem 0.5rem;
  gap: 2px;
}

/* Editing area: roomier, easier to read. */
.ck.ck-editor__main > .ck-editor__editable {
  border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
  min-height: 240px;
  padding: 1rem 1.25rem;
  line-height: 1.7;
}

/* Cohesive focus state on the whole editor box. */
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  border-color: var(--ck-color-focus-border);
  box-shadow: var(--ck-focus-outer-shadow);
}

/* Rounded toolbar buttons + dropdowns. */
.ck.ck-button,
.ck.ck-button.ck-on,
.ck.ck-dropdown__button {
  border-radius: 6px;
}

/* Softer floating panels (dropdowns, link/image balloons). */
.ck.ck-dropdown__panel,
.ck.ck-balloon-panel {
  border-radius: 8px;
  box-shadow: var(--ck-drop-shadow);
}