/* ---- Token root ---------------------------------------------------- */
.docx-editor-host {
  /* shadcn-style palette (HSL components) */
  --de-background: 0 0% 100%;
  --de-foreground: 220 14% 14%;
  --de-muted: 220 14% 96%;
  --de-muted-foreground: 220 9% 46%;
  --de-border: 220 13% 91%;
  --de-input: 220 13% 91%;
  --de-primary: 221 83% 53%;
  --de-primary-foreground: 0 0% 100%;
  --de-accent: 221 83% 53%;
  --de-accent-foreground: 0 0% 100%;
  --de-destructive: 0 84% 60%;

  /* semantic chrome palette (raw values) */
  --de-surface: #ffffff;
  --de-surface-hover: #f1f5f9;
  --de-text: #1f2328;
  --de-text-muted: #57606a;
  --de-border-raw: #d0d7de;
  --de-shadow: rgba(0, 0, 0, 0.08);
  --de-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
  --de-focus-ring: rgba(37, 99, 235, 0.45);
  --de-selection: rgba(37, 99, 235, 0.18);

  /* page geometry */
  --de-page-bg: #ffffff;
  --de-page-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
  --de-page-width: 794px;            /* A4: 210mm @ 96dpi */
  --de-page-height: 1123px;          /* A4: 297mm @ 96dpi */
  --de-page-margin-x: 96px;          /* 1in */
  --de-page-margin-y: 96px;          /* 1in */
  --de-page-gap: 24px;

  /* typography */
  --de-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --de-font-size: 11pt;              /* Word default body size */
  --de-line-height: 1.5;

  /* toolbar */
  --de-toolbar-bg: #ffffff;
  --de-toolbar-border: #e5e7eb;
  --de-toolbar-button-bg: transparent;
  --de-toolbar-button-bg-hover: #f1f5f9;
  --de-toolbar-button-bg-active: #dbeafe;
  --de-toolbar-button-fg: #1f2328;
  --de-toolbar-button-fg-active: #2563eb;
  --de-toolbar-button-radius: 6px;
  --de-toolbar-height: 36px;

  /* CRITICAL: host fills its container and is a flex column so the
     surface (which scrolls) can take flex: 1 and properly clip overflow.
     Without this, the surface's overflow:auto does nothing and the whole
     browser page scrolls instead. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}