/* ═══════════════════════════════════════════
   themes.css — Light / Dark Mode
   FrenchWrite
═══════════════════════════════════════════ */

/* ── Light theme is the default in :root (base.css) ── */

/* ══════════════ DARK THEME ══════════════ */

[data-theme="dark"] {
  /* ── Dark Palette: Deep Navy Ink ── */
  --cream:        #111827;   /* deep navy-black */
  --cream-soft:   #1a2232;   /* slightly lighter */
  --cream-border: #2d3a4f;   /* border tone */
  --ink:          #e8e2d8;   /* warm off-white text */
  --ink-soft:     #c8bfb2;
  --ink-muted:    #8a9ab0;
  --ink-ghost:    #4a5a70;
  --rouge:        #e05c4f;   /* slightly brighter red in dark */
  --rouge-soft:   #f07368;
  --or:           #d4a853;
  --bleu:         #5b9bd5;
  --bleu-soft:    #7ab8ef;
  --vert:         #4ab57e;

  /* ── Semantic overrides ── */
  --bg:           #0f1724;
  --bg-panel:     #161f2e;
  --bg-input:     #131c2a;
  --border:       #253347;
  --text:         #e8e2d8;
  --text-soft:    #c8bfb2;
  --text-muted:   #8a9ab0;
  --text-ghost:   #4a5a70;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.5);
}

/* ── Dark mode editor input ── */
[data-theme="dark"] .main-editor {
  background: var(--bg-input);
  caret-color: var(--accent);
}

[data-theme="dark"] .main-editor:focus {
  background: #151e2d;
  box-shadow: 0 0 0 3px rgba(224,92,79,.12), var(--shadow-md);
}

/* ── Dark accents on accent buttons ── */
[data-theme="dark"] .accent-btn:hover {
  background: rgba(224,92,79,.12);
}

/* ── Dark: donate button ── */
[data-theme="dark"] .btn-donate:hover {
  box-shadow: 0 4px 12px rgba(224,92,79,.4);
}

/* ── Dark: modal overlay ── */
[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,.65);
}

/* ── Dark: toast ── */
[data-theme="dark"] .toast {
  background: var(--ink);
  color: var(--bg);
}

/* ── Dark: progress bar ── */
[data-theme="dark"] .progress-bar {
  background: linear-gradient(90deg, var(--rouge), var(--or));
}

/* ══════════════ THEME TRANSITIONS ══════════════ */

/* Smooth transitions on theme switch for key elements */
.app-header,
.app-main,
.app-footer,
.main-editor,
.accent-btn,
.btn-action,
.btn-ghost,
.btn-icon,
.modal-box,
.select-minimal {
  transition-property: background-color, color, border-color;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

/* ══════════════ PRINT STYLES ══════════════ */

@media print {
  .app-header,
  .accent-section,
  .app-footer,
  .save-indicator,
  .editor-decoration {
    display: none !important;
  }

  .app-main {
    padding: 0;
  }

  .main-editor {
    border: none;
    min-height: unset;
    height: auto;
    resize: none;
    font-size: 12pt;
    line-height: 1.8;
    color: #000;
    background: #fff;
  }
}