*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Liberation Serif — bundled so the editor renders the EXACT metrics of the
   font the exported .odt uses. odf-kit emits Liberation Serif as the document
   default, and LibreOffice ships the identical file; this keeps the on-screen
   preview pixel-faithful to the export. (SIL Open Font License — see
   src/assets/fonts/LICENSE-LiberationFonts.txt.) */
@font-face {
  font-family: 'Liberation Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/LiberationSerif-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Liberation Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/LiberationSerif-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Liberation Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/LiberationSerif-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Liberation Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/LiberationSerif-BoldItalic.ttf') format('truetype');
}

/* Bullet-marker symbols Liberation Serif lacks (❖ ➢ ⇨ ✓ ▸ ◆), subset from DejaVu
   Sans so markers render compact and identical on every platform. First in the
   ::marker/picker stacks; per-glyph fallback keeps all other chars in the text
   font. (Bitstream Vera license — see src/assets/fonts/LICENSE-DejaVu.txt.) */
@font-face {
  font-family: 'EdenText Symbols';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/EdenSymbols.woff2') format('woff2');
}

/* Metric-compatible substitutes for the common MS-Office fonts that imported
   .odt files reference. Each face is keyed to the MS name but prefers a real
   local copy, then a system twin, then the bundled open-source twin — so text
   renders with matching metrics (like LibreOffice) instead of dropping to the
   browser's default serif. (OFL — see src/assets/fonts/LICENSE-*.) */

/* Calibri → Carlito */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Calibri'), local('Carlito'), url('../assets/fonts/Carlito-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Calibri Bold'), local('Carlito Bold'), url('../assets/fonts/Carlito-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Calibri Italic'), local('Carlito Italic'), url('../assets/fonts/Carlito-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Calibri Bold Italic'), local('Carlito Bold Italic'), url('../assets/fonts/Carlito-BoldItalic.ttf') format('truetype');
}

/* Arial → Liberation Sans */
@font-face {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Arial'), local('Liberation Sans'), url('../assets/fonts/LiberationSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Arial Bold'), local('Liberation Sans Bold'), url('../assets/fonts/LiberationSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Arial';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Arial Italic'), local('Liberation Sans Italic'), url('../assets/fonts/LiberationSans-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Arial';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Arial Bold Italic'), local('Liberation Sans Bold Italic'), url('../assets/fonts/LiberationSans-BoldItalic.ttf') format('truetype');
}

/* Cambria → Caladea */
@font-face {
  font-family: 'Cambria';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cambria'), local('Caladea'), url('../assets/fonts/Caladea-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Cambria';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Cambria Bold'), local('Caladea Bold'), url('../assets/fonts/Caladea-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cambria';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Cambria Italic'), local('Caladea Italic'), url('../assets/fonts/Caladea-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Cambria';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Cambria Bold Italic'), local('Caladea Bold Italic'), url('../assets/fonts/Caladea-BoldItalic.ttf') format('truetype');
}

/* Courier New → Liberation Mono */
@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Courier New'), local('Liberation Mono'), url('../assets/fonts/LiberationMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Courier New Bold'), local('Liberation Mono Bold'), url('../assets/fonts/LiberationMono-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Courier New';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Courier New Italic'), local('Liberation Mono Italic'), url('../assets/fonts/LiberationMono-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Courier New';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Courier New Bold Italic'), local('Liberation Mono Bold Italic'), url('../assets/fonts/LiberationMono-BoldItalic.ttf') format('truetype');
}

/* Times New Roman → Liberation Serif (reuses the bundled Serif files) */
@font-face {
  font-family: 'Times New Roman';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Times New Roman'), local('Liberation Serif'), url('../assets/fonts/LiberationSerif-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Times New Roman';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Times New Roman Bold'), local('Liberation Serif Bold'), url('../assets/fonts/LiberationSerif-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Times New Roman';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Times New Roman Italic'), local('Liberation Serif Italic'), url('../assets/fonts/LiberationSerif-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Times New Roman';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Times New Roman Bold Italic'), local('Liberation Serif Bold Italic'), url('../assets/fonts/LiberationSerif-BoldItalic.ttf') format('truetype');
}

:root {
  --radius: 6px;
    --island-radius: 14px; /* corner radius of the floating toolbar card */
    --toolbar-btn-size: 1.7rem; /* height of all toolbar controls (matches the floating toolbars) */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Liberation Serif', 'Times New Roman', Georgia, serif;
    /* Headings are sans, like LibreOffice's Heading style ('Arial' is the bundled
       Liberation Sans; see HEADING_FONT in export/odt.ts). */
    --font-heading: 'Arial', 'Liberation Sans', sans-serif;
    /* Brand accents: the primary slate + the logo's warm coral; the gradient is
       the app's signature (island hairline). */
    --accent-warm: #d96b4a;
    --brand-gradient: linear-gradient(90deg, var(--color-primary), var(--accent-warm));
  }

/* Signature micro-interactions, shared across all toolbar components. */
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-5px); }
}

.toolbar-region button:active:not(:disabled) {
  transform: scale(0.93);
}

.theme-dropdown, .ol-dropdown, .align-dropdown, .font-dropdown, .size-dropdown,
.color-dropdown, .char-dropdown, .history-dropdown, .layout-dropdown,
.lh-dropdown, .sp-dropdown, .table-dropdown, .bp-dropdown {
  animation: menu-in 0.14s ease;
}

/* Scrolling body of a popup menu. Only this inner box scrolls; the panel keeps
   the background and frame, so the elastic overscroll bounce can't drag the
   background off the border and show the page through the gap. */
.menu-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  .toolbar-region button:active:not(:disabled) { transform: none; }
  .theme-dropdown, .ol-dropdown, .align-dropdown, .font-dropdown, .size-dropdown,
  .color-dropdown, .char-dropdown, .history-dropdown, .layout-dropdown,
  .lh-dropdown, .sp-dropdown, .table-dropdown, .bp-dropdown { animation: none; }
}

  [data-theme="light"] {
  --color-bg: #e6e9eb;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-text-muted: #94a3b8;
  --color-primary: #52748b;
  --color-toolbar-bg: #ffffff;
  --color-btn-hover: #cbd5e1;
  --color-page-bg: #ffffff;
  --color-page-text: #1e293b;
  --color-page-border: #e2e8f0;
  --scrollbar-thumb: #cbd5e1;
  }

  [data-theme="dark"] {
    --color-bg: #2f2f31;
    --color-surface: #161b22;
    --color-border: #30363d;
    --color-text: #f2e6f3;
    --color-text-muted: #7d8590;
    --color-primary: #52748b;
    --color-toolbar-bg: #161b22;
    --color-btn-hover: #3b4350;
    --color-page-bg: #ffffff;
    --color-page-text: #1e293b;
    --color-page-border: #e2e8f0;
    /* Primary (active-button color) so the toolbar scrollbar stands out on dark. */
    --scrollbar-thumb: var(--color-primary);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--color-primary) 75%, white);
}

[data-theme="allBlack"] {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-border: #30363d;
  --color-text: #e6edf3;
  --color-text-muted: #7d8590;
  --color-primary: #52748b;
  --color-toolbar-bg: #161b22;
  --color-btn-hover: #3b4350;
  --color-page-bg: #161b22;
  --color-page-text: #e6edf3;
  --color-page-border: #30363d;
  --scrollbar-thumb: var(--color-primary);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--color-primary) 75%, white);
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}