/* ============================================================
   MWrite — Design Tokens
   Professional minimalist, neutral greys, screenplay-first.
   ============================================================ */

:root {
  /* ---------- Colour palette (neutral + restrained accents) ---------- */
  --c-bg:           #f5f5f3;        /* app background — warm off-white */
  --c-surface:      #ffffff;        /* panels, modals */
  --c-page:         #ffffff;        /* the script "paper" */
  --c-page-shadow:  rgba(20, 22, 28, 0.08);

  --c-ink:          #16181c;        /* primary text */
  --c-ink-soft:     #3a3d44;        /* secondary text */
  --c-muted:        #6b6f78;        /* tertiary / placeholders */
  --c-faint:        #a8acb4;        /* disabled / hints */

  --c-line:         #e3e3df;        /* borders */
  --c-line-strong:  #d4d4cf;        /* emphasised borders */
  --c-hover:        #ececea;        /* hover background on chrome */
  --c-pressed:      #dcdcd8;        /* pressed / active */
  --c-selection:    #cfe1ff;        /* text selection */
  --c-margin-guide:        #b8b8b3;        /* corner brackets at text frame */
  --c-margin-guide-strong: rgba(99, 102, 241, 0.25);  /* dashed-rect toggle */

  --c-accent:       #2c5cff;        /* the one accent */
  --c-accent-soft:  #e7eeff;
  --c-accent-ink:   #1a3fbf;

  --c-warn:         #b54708;
  --c-error:        #b42318;
  --c-success:      #067647;

  /* Revision set colours (industry-standard screenplay palette) */
  --rev-blue:       #2563eb;
  --rev-pink:       #ec4899;
  --rev-yellow:     #ca8a04;
  --rev-green:      #16a34a;
  --rev-goldenrod:  #b45309;
  --rev-buff:       #a16207;
  --rev-salmon:     #fb7185;
  --rev-cherry:     #dc2626;
  --rev-tan:        #92400e;

  /* ---------- Typography ---------- */
  --f-ui:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-script: 'Courier Prime', 'Courier New', Courier, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  26px;

  --fs-script: 12pt;       /* screenplay body — rendered in real points for accuracy */
  --lh-script: 1;          /* single line spacing */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-ui:    1.4;
  --lh-tight: 1.2;
  --tracking-tight: -0.005em;
  --tracking-caps:   0.06em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;

  /* ---------- Geometry ---------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  --shadow-sm:  0 1px 2px rgba(20, 22, 28, 0.06);
  --shadow-md:  0 4px 14px rgba(20, 22, 28, 0.08), 0 1px 3px rgba(20, 22, 28, 0.06);
  --shadow-lg:  0 12px 36px rgba(20, 22, 28, 0.14), 0 2px 6px rgba(20, 22, 28, 0.08);
  --shadow-page: 0 1px 0 rgba(20, 22, 28, 0.04), 0 18px 40px -18px rgba(20, 22, 28, 0.18);

  /* ---------- Layout heights ---------- */
  --h-titlebar: 34px;
  --h-menubar:  36px;
  --h-toolbar:  48px;
  --h-eltbar:   38px;
  --h-statusbar: 30px;

  /* ---------- Motion ---------- */
  --ease:      cubic-bezier(0.2, 0, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    120ms;
  --t-base:    180ms;
  --t-slow:    320ms;

  /* ---------- Page geometry (US Letter screenplay) ---------- */
  /* All measured in CSS px assuming 96dpi reference; printing uses real inches. */
  --page-w:        816px;   /* 8.5in */
  --page-h:        1056px;  /* 11in  */
  --page-mt:       96px;    /* 1.0in top */
  --page-mb:       96px;    /* 1.0in bottom */
  --page-ml:       144px;   /* 1.5in left */
  --page-mr:       96px;    /* 1.0in right */
  --page-gap-h:    24px;    /* visual gap between paginated paper sheets */

  /* Element indents — in CSS px, relative to the page text frame.
     Standard US screenplay format. */
  --el-action-indent:        0;
  --el-character-indent:     192px;   /* ~2.0in */
  --el-parenthetical-indent: 144px;   /* ~1.5in */
  --el-dialogue-indent:      96px;    /* ~1.0in */
  --el-dialogue-width:       336px;   /* ~3.5in */
}

/* ============================================================
   DARK THEME
   Triggered by data-theme="dark" on <html> (set by theme.js).
   The same tokens get redefined; everything that uses the
   variables flips automatically. Contrast ratios meet WCAG AA
   for body text and large UI affordances.
   ============================================================ */
:root[data-theme='dark'] {
  --c-bg:           #16181c;
  --c-surface:      #1d2026;
  --c-page:         #23262d;        /* the script "paper" — softened off-black */
  --c-page-shadow:  rgba(0, 0, 0, 0.4);

  --c-ink:          #ecedef;
  --c-ink-soft:     #c4c7cd;
  --c-muted:        #8b8f97;
  --c-faint:        #5c606a;

  --c-line:         #2d3138;
  --c-line-strong:  #3a3f48;
  --c-hover:        #262a31;
  --c-pressed:      #2f343d;
  --c-selection:    #2d4475;
  --c-margin-guide:        #4a4e57;
  --c-margin-guide-strong: rgba(101, 136, 255, 0.35);

  --c-accent:       #6588ff;
  --c-accent-soft:  #1e2a4d;
  --c-accent-ink:   #b3c4ff;

  --c-warn:         #f59e0b;
  --c-error:        #f87171;
  --c-success:      #4ade80;

  /* Revision colours — slightly lifted so they pop against dark paper */
  --rev-blue:       #60a5fa;
  --rev-pink:       #f472b6;
  --rev-yellow:     #fbbf24;
  --rev-green:      #4ade80;
  --rev-goldenrod:  #fb923c;
  --rev-buff:       #d97706;
  --rev-salmon:     #fda4af;
  --rev-cherry:     #f87171;
  --rev-tan:        #c2885d;

  /* Page shadow inverted for dark backgrounds */
  --shadow-page: 0 1px 0 rgba(0,0,0,0.5), 0 18px 40px -18px rgba(0,0,0,0.6);
}

/* ============================================================
   SEPIA PAPER
   A warm cream-paper look modelled on a comfortable word
   processor — easy on the eyes for long writing sessions.
   Inspired by the e-paper / Kindle "Sepia" palette.
   ============================================================ */
:root[data-theme='sepia'] {
  --c-bg:           #f0e6d2;       /* aged off-white surround */
  --c-surface:      #f6ecd5;       /* sidebars, toolbars */
  --c-page:         #fbf2dc;       /* paper sheet — warm cream */
  --c-page-shadow:  rgba(120, 80, 30, 0.18);

  --c-ink:          #4a3528;       /* deep walnut for body text */
  --c-ink-soft:     #6b4f3c;
  --c-muted:        #8b6f57;
  --c-faint:        #b09478;

  --c-line:         #d9c8a6;
  --c-line-strong:  #b89e74;
  --c-hover:        #ebdfc1;
  --c-pressed:      #e0d2af;
  --c-selection:    #d4c79b;

  --c-accent:       #8b5a2b;       /* burnt sienna */
  --c-accent-soft:  #ead4ad;
  --c-accent-ink:   #5a3a1a;

  --c-warn:         #c2410c;
  --c-error:        #b91c1c;
  --c-success:      #4d7c0f;

  --shadow-page: 0 1px 0 rgba(120, 80, 30, 0.12), 0 14px 30px -16px rgba(120, 80, 30, 0.35);
}

/* ============================================================
   WORDPERFECT (DOS) — playful nostalgia
   A homage to the old WordPerfect 5.x / DOS look: blue
   background, monospace-friendly ink colour, and a CGA-ish
   accent palette. Body text, titles, and chrome all switch
   to a monospace font for the full effect.
   ============================================================ */
:root[data-theme='wordperfect'] {
  --c-bg:           #0000aa;        /* CGA blue 1 */
  --c-surface:      #00009f;
  --c-page:         #0000aa;        /* paper IS the blue background */
  --c-page-shadow:  rgba(0, 0, 0, 0.5);

  --c-ink:          #ffffff;
  --c-ink-soft:     #d8d8d8;
  --c-muted:        #a8a8a8;
  --c-faint:        #707070;

  --c-line:         #4040d0;
  --c-line-strong:  #6868e0;
  --c-hover:        #1010c0;
  --c-pressed:      #2020d0;
  --c-selection:    #aaaa00;        /* CGA brown/yellow inverse */

  --c-accent:       #ffff55;        /* CGA bright yellow */
  --c-accent-soft:  #1818b8;
  --c-accent-ink:   #ffff00;

  --c-warn:         #ff5555;
  --c-error:        #ff5555;
  --c-success:      #55ff55;

  --rev-blue:       #5599ff;
  --rev-pink:       #ff55ff;
  --rev-yellow:     #ffff55;
  --rev-green:      #55ff55;
  --rev-goldenrod:  #ffaa55;
  --rev-buff:       #cccc66;
  --rev-salmon:     #ff8888;
  --rev-cherry:     #ff5577;
  --rev-tan:        #ccaa88;

  --shadow-page: none;

  /* Switch the script font to the chrome font so EVERYTHING is mono */
  --f-script: 'Consolas', 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;
  --f-sans:   'Consolas', 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;
}

/* In WordPerfect mode the page edges, borders, and decorative shadows
   are all turned off — just blue all the way through. */
:root[data-theme='wordperfect'] .page-sheet {
  border: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-theme='wordperfect'] .page-sheet[data-page-number]::after {
  /* Bright yellow corner page label for the DOS aesthetic */
  color: var(--c-accent);
  opacity: 1;
  font-weight: bold;
}
/* WP5 used a tiny status line at the bottom — emphasise our statusbar */
:root[data-theme='wordperfect'] .statusbar {
  background: #aaaaaa;
  color: #000000;
  border-top: 0;
}
:root[data-theme='wordperfect'] .statusbar .seg,
:root[data-theme='wordperfect'] .statusbar .seg.btn {
  color: #000000;
}

/* ============================================================
   HIGH CONTRAST
   Pushes text and borders toward pure black/white for users who
   need WCAG 1.4.6 AAA contrast (≥7:1 for body).
   ============================================================ */
:root[data-contrast='high'] {
  --c-ink:          #000000;
  --c-ink-soft:     #1a1a1a;
  --c-muted:        #2e2e2e;
  --c-line:         #888888;
  --c-line-strong:  #555555;
  --c-faint:        #444444;
  --c-accent:       #003ec0;
  --c-accent-ink:   #001f6e;
}
:root[data-theme='dark'][data-contrast='high'] {
  --c-bg:           #000000;
  --c-surface:      #0a0c10;
  --c-page:         #0a0c10;
  --c-ink:          #ffffff;
  --c-ink-soft:     #f0f0f0;
  --c-muted:        #d0d0d0;
  --c-line:         #888888;
  --c-line-strong:  #cccccc;
  --c-faint:        #aaaaaa;
  --c-accent:       #ffe066;
  --c-accent-soft:  #443a00;
  --c-accent-ink:   #fff9d6;
}

/* ============================================================
   TEXT SIZE
   Scales the chrome only — script body stays at 12pt so page
   counts and rendering remain accurate.
   ============================================================ */
:root[data-text-size='large']  { --fs-xs: 13px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 17px; --fs-lg: 19px; --fs-xl: 23px; --fs-2xl: 27px; }
:root[data-text-size='larger'] { --fs-xs: 14px; --fs-sm: 15px; --fs-base: 17px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 28px; }

/* ============================================================
   REDUCED MOTION
   Honours prefers-reduced-motion and the explicit "Reduce motion"
   toggle. Disables non-essential transitions and animations.
   ============================================================ */
:root[data-motion='reduce'] *,
:root[data-motion='reduce'] *::before,
:root[data-motion='reduce'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Final safety net: respect the OS preference even if data-motion is
   not yet applied (e.g. before theme.js runs). */
@media (prefers-reduced-motion: reduce) {
  :root[data-motion='auto'] *,
  :root[data-motion='auto'] *::before,
  :root[data-motion='auto'] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   FOCUS VISIBILITY
   WCAG 2.4.7 — every focusable element must show a clear focus
   ring. The accent colour provides the ring; high-contrast theme
   overrides it for stronger emphasis.
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
:root[data-contrast='high'] :focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}