/* Preserve the original terracotta paper in light mode. Dark surfaces share
   the reader's espresso palette; secondary colors stay warm and legible. */
:root {
  color-scheme: light;
  --writer-bg: #B1765D;
  --writer-panel-bg: rgba(147, 92, 66, 0.72);
  --writer-preview-bg: #866551;
  --writer-code-bg: #2a2421;
  --writer-popover-bg: rgba(42, 36, 33, 0.96);
  --writer-text: #fff;
  --writer-body: var(--writer-text);
  --writer-text-rgb: 255, 255, 255;
  --writer-accent: #ffd5c2;
  --writer-accent-rgb: 255, 213, 194;
  --writer-accent-hover: var(--writer-text);
  --writer-link: var(--writer-accent);
  --writer-code-text: var(--writer-accent);
  --writer-popover-text: var(--writer-accent);
  --writer-checkbox: #935c42;
  --writer-selection-bg: rgba(var(--writer-text-rgb), 0.18);
  --writer-selection-text: var(--writer-text);
  --writer-editor-selection-bg: rgba(var(--writer-text-rgb), 0.22);

  --md-text: var(--writer-body);
  --md-heading: var(--writer-text);
  --md-secondary: var(--writer-secondary, rgba(var(--writer-text-rgb), 0.7));
  --md-link: var(--writer-link);
  --md-link-hover: var(--writer-accent-hover);
  --md-accent: var(--writer-accent);
  --md-border: var(--writer-border, rgba(var(--writer-accent-rgb), 0.15));
  --md-border-strong: var(--writer-border-strong, rgba(var(--writer-accent-rgb), 0.4));
  --md-code-bg: var(--writer-code-bg);
  --md-code-text: var(--writer-code-text);
  --md-table-heading-bg: var(--writer-hover-bg, rgba(var(--writer-accent-rgb), 0.08));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --writer-bg: #1e140f;
  --writer-bg-soft: #231812;
  --writer-panel-bg: rgba(35, 24, 18, 0.96);
  --writer-preview-bg: var(--writer-bg-soft);
  --writer-code-bg: var(--writer-bg);
  --writer-popover-bg: rgba(35, 24, 18, 0.98);
  --writer-text: #e4d4c8;
  --writer-body: #d2c1b5;
  --writer-text-rgb: 228, 212, 200;
  --writer-secondary: #a99283;
  --writer-muted: #80695c;
  --writer-accent: #b38b78;
  --writer-accent-rgb: 179, 139, 120;
  --writer-accent-hover: #c7a18d;
  /* Small linked text uses the brighter accent for contrast on raised panels. */
  --writer-link: var(--writer-accent-hover);
  --writer-code-text: var(--writer-body);
  --writer-popover-text: var(--writer-secondary);
  --writer-checkbox: var(--writer-accent);
  --writer-selection-bg: #70584b;
  --writer-selection-text: #f1e5dc;
  /* The editor's text is painted by a backdrop. A translucent selection keeps
     that text visible through the otherwise transparent textarea. */
  --writer-editor-selection-bg: rgba(112, 88, 75, 0.5);

  /* Semantic overrides use the original light values as CSS fallbacks. */
  --writer-heading: var(--writer-text);
  --writer-border: #4b352b;
  --writer-border-strong: #674334;
  --writer-active-border: var(--writer-accent);
  --writer-draft-bg: rgba(var(--writer-accent-rgb), 0.03);
  --writer-hover-bg: rgba(var(--writer-accent-rgb), 0.08);
  --writer-active-bg: rgba(var(--writer-accent-rgb), 0.14);
  --writer-control: var(--writer-accent);
  --writer-control-hover: var(--writer-accent-hover);
  --writer-placeholder: var(--writer-secondary);
  --writer-label: var(--writer-secondary);
  --writer-label-opacity: 1;
  --writer-draft-title: var(--writer-text);
  --writer-warning: var(--writer-accent-hover);
  --writer-toast-bg: var(--writer-bg-soft);
}

.pub-site-link {
  color: var(--writer-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pub-site-link:hover {
  color: var(--writer-accent-hover);
}

.bottom-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: auto;
}

.theme-toggle {
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

/* Show the icon for the theme the button will switch to. */
.theme-toggle [data-theme-icon="light"],
:root[data-theme="dark"] .theme-toggle [data-theme-icon="dark"] {
  display: none;
}

:root[data-theme="dark"] .theme-toggle [data-theme-icon="light"] {
  display: block;
}

.gate-theme {
  margin: 1rem auto 0;
}

.theme-toggle:focus-visible {
  outline: 1px solid var(--writer-link);
  outline-offset: 4px;
}

.canvas.focus-mode .bottom-bar:focus-within {
  opacity: 1;
}

:root[data-theme="dark"] :is(button, input, textarea):focus-visible {
  outline: 1px solid var(--writer-accent-hover);
  outline-offset: 3px;
}

/* The writing caret is the editor's focus indicator; a frame would break the
   seamless canvas, especially while the translucent backdrop is visible. */
:root[data-theme="dark"] .canvas textarea:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  :root.theme-changing,
  :root.theme-changing body,
  :root.theme-changing :is(.preview-wrap, .gate, .publish-overlay,
    .editor-backdrop, .topo-popover, .find-bar) {
    transition: background-color 200ms ease, color 200ms ease,
      border-color 200ms ease;
  }
}

@media (max-width: 768px) {
  /* Reserve the existing toolbar's width so long draft titles do not sit
     behind its icons on phones. */
  .canvas-title {
    max-width: max(0px, calc(100vw - 29rem));
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bottom-bar {
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
    z-index: 14;
  }

  .canvas textarea,
  .editor-backdrop {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  :root[data-theme="dark"] .sidebar-item-delete {
    color: var(--writer-secondary, rgba(var(--writer-text-rgb), 0.6));
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .canvas-title {
    max-width: max(0px, calc(100vw - 22rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}