:root {
  /* Base font size used by the UI. Keep in pt to match screenplay sizing. */
    --base-font-size: 12pt;
    /* UI font size token (12pt by default). This applies only to app UI
      components — Monaco editor and preview keep their own fonts. */
    --ui-font-size: 12pt;
    /* UI typography tokens */
    --ui-font-weight: 200;
    --ui-font-size-xs: calc(var(--ui-font-size) * 0.85);
    --ui-font-size-sm: calc(var(--ui-font-size) * 0.875);
    --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
    --ui-font-size-xl: calc(var(--ui-font-size) * 1.5);
    --ui-font-size-xxl: calc(var(--ui-font-size) * 2);
    /* Specific UI component tokens */
    --file-modal-badge-size: var(--ui-font-size-xxl);
    /* Preview typography tokens */
    --preview-font-weight-bold: 500;
  /* Nord Theme - Polar Night & Frost */
  color-scheme: dark;
  
  /* Polar Night */
  --bg: #2E3440; /* nord0 */
  --bg-alt: #3B4252; /* nord1 */
  --border: #434C5E; /* nord2 */
  --muted: #4C566A; /* nord3 */
  
  /* Snow Storm */
  --text: #D8DEE9; /* nord4 */
  --snow: #ECEFF4; /* nord6 - light background */
  
  /* Frost */
  --accent: #88C0D0; /* nord8 */
  --accent-strong: #5E81AC; /* nord10 */

  /* Aurora (semantic colors) */
  --danger: #BF616A; /* nord11 - red */
  --warning: #D08770; /* nord12 - orange */
  --caution: #EBCB8B; /* nord13 - yellow */
  --success: #A3BE8C; /* nord14 - green */
  --note-color: #5A7A53; /* greenish note color */

  /* Paper (preview) tokens — keep preview appearance unchanged but tokenized */
  --paper-white: #eeede1;
  --paper-pure-white: #ffffff; /* pure white for clean preview option */
  --paper-text: #111111;
  --paper-border: #cccccc; /* light gray border for page breaks on paper */
  --shadow-color: transparent; /* shadow color neutralized (no shadows) */
  /* darker panel token derived from --bg for subtle inset elements */
  --bg-darker: color-mix(in srgb, var(--bg) 85%, var(--border) 15%);
  
  /* Additional UI color tokens for consistent theming (hex/8-digit hex where alpha needed) */
  --hover-surface-color: #D8DEE90D; /* nord4 with ~5% opacity */
  --focus-ring-color: #D8DEE914; /* nord4 with ~8% opacity */
  --header-shadow-color: transparent; /* neutralized to remove header shadows */
  --switch-knob-shadow-color: transparent; /* removed glow on switches */
  --panel-border-color: #2E34401A; /* nord0 with ~10% opacity */
  --placeholder-muted: #D8DEE999; /* nord4 with ~60% opacity */
  --select-focus-color: #88C0D026; /* nord8 with ~15% opacity */

    /* ----------------------------------------------------------------
      Unified Interaction State Tokens
      Apply consistently across all interactive elements (buttons, list items,
      checkboxes, dropdowns, text links) for cohesive hover/focus/selection UX.
      Keep these subtle; avoid "lit up" rows/buttons.
      ---------------------------------------------------------------- */
    /* Background colors for interactive states */
    --ui-hover-bg: color-mix(in srgb, var(--bg) 94%, var(--accent) 6%);
    --ui-selected-bg: color-mix(in srgb, var(--bg) 88%, var(--accent) 12%);
    --ui-active-bg: color-mix(in srgb, var(--bg) 90%, var(--accent) 10%);
    
    /* Border colors for interactive states */
    --ui-border-default: var(--border);
    --ui-border-hover: var(--accent);
    --ui-border-focus: var(--accent);
    --ui-border-active: var(--accent);
    
    /* Text colors for interactive states */
    --ui-text-default: var(--text);
    --ui-text-hover: var(--text);
    --ui-text-focus: var(--text);
    --ui-text-muted: var(--placeholder-muted);
    
    /* Focus ring properties */
    --ui-focus-outline: 1px solid color-mix(in srgb, var(--border) 65%, var(--accent) 35%);
    --ui-focus-outline-offset: 1px;
    
    /* Transition timing for consistency */
    --ui-transition-fast: 100ms ease;
    --ui-transition-medium: 150ms ease;
}

/* Default: disable all animations and transitions unless body has .screenp-motion class
   We use 'screenp-motion' instead of 'enable-motion' because Monaco Editor internally
   manages 'enable-motion' and 'reduce-motion' classes on the body element. */
body {
  --ui-transition-fast: 0s;
  --ui-transition-medium: 0s;
}

body:not(.screenp-motion) *,
body:not(.screenp-motion) *::before,
body:not(.screenp-motion) *::after {
  transition: none !important;
  animation: none !important;
}

/* Re-enable motion when .screenp-motion class is present */
body.screenp-motion {
  --ui-transition-fast: 100ms ease;
  --ui-transition-medium: 150ms ease;
}

/* Exception: spinners and resize limit flash should still animate even without enable-motion */
body .editor-spinner {
  animation: editor-spin 0.8s linear infinite !important;
}

body .focus-resize-handle.dragging.at-limit {
  animation: resize-limit-flash 350ms ease-out forwards !important;
}

body .support-button:hover,
body .support-button:focus-visible {
  animation: support-rotate 1s linear infinite !important;
}

/* Additional :root tokens (continuation) */
:root {
  /* Muted color used for preview overlays (dark text on light backgrounds) */
  --preview-muted: color-mix(in srgb, var(--paper-text) 70%, var(--muted) 30%);
  --switch-height: 24px; /* height of toggle switch */
  --switch-knob-size: 18px; /* knob diameter inside the switch */
  --switch-width: 44px; /* total width of the switch track */
  --switch-border-size: 1px; /* border thickness used on switch tracks */
  /* derived sizes for clean math and perfect centering */
  --switch-inner-height: calc(var(--switch-height) - (var(--switch-border-size) * 2));
  --switch-inset: calc((var(--switch-inner-height) - var(--switch-knob-size)) / 2);
  --panel-border-weak: #2E34401A; /* nord0 with ~10% opacity */
  --backdrop-color: rgba(46, 52, 64, 0.45); /* nord0 with 45% opacity for modal backdrops */
  --blur-amount: 0.33em; /* global blur amount for all UI blur effects */
  --backdrop-blur: var(--blur-amount); /* backwards-compatible alias */
  --ui-font: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-family: var(--ui-font);

  /* Letter-spacing tokens (typography spacing tokens) */
  --letter-spacing-base: 0.02em;       /* default UI text */
  --letter-spacing-heading: 0.02em;    /* section / header spacing */
  --letter-spacing-wide: 0.02em;       /* wide tracking for smallcaps / badges */
  --letter-spacing-control: 0.02em;    /* controls, button labels */
  --letter-spacing-medium: 0.02em;     /* medium tracking for sublabels */
  --letter-spacing-tight: 0.00em;     /* tight tracking for dense headings where needed */

  /* Control spacing tokens */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --control-padding-vert: 0.375rem; /* 6px */
  --control-padding-horiz: 0.75rem; /* 12px */
  --control-height: 2.25rem; /* 36px */
  --control-gap: var(--space-sm); /* 8px */
  --layout-gap: var(--space-md); /* 16px */
  --header-height: 3rem; /* 48px */
  --modal-padding: 1.25rem; /* 20px - slightly more breathing room */
  --slide-offset: 1.5rem; /* 24px - used for modal slide animations */
  --focus-min-width: 728px; /* minimum width in focus mode to fit outline + stats drawers */

  /* screenplay layout "rails" — all units in inches to match industry specs */
  --page-width: 8.5in; /* page width */
  --page-margin-left: 1.5in;
  --page-margin-right: 1in;
  --page-margin-top: 1in;
  --page-margin-bottom: 1in;
  /* element columns referenced from page left edge: */
  --dialogue-left: 2.5in;      /* dialogue left edge from page left */
  --parenthetical-left: 3.0in; /* parenthetical left edge from page left (spec.md) */
  --character-center: 4.0in;   /* center column for character names (spec.md) */
  --dialogue-right: 5.5in;     /* dialogue right limit (spec.md) */
  --max-text-width: 6.0in;     /* global max text width */
  --ui-line-height: 1.4; /* default line height for UI text and popups */
  --list-gap: 0; /* tighter gap used between list items (defaults to ~2px) */
  /* Panel sizing tokens shared by all modals/drawers */
  --panel-header-padding-y: 0.75rem;
  --panel-header-padding-x: var(--modal-padding);
  /* Include the 1px header bottom border so header areas remain pixel-identical
     whether they contain controls (min-height: var(--control-height)) or just text. */
  --panel-header-min-height: calc(var(--control-height) + (var(--panel-header-padding-y) * 2) + 1px);
  --panel-body-padding: var(--modal-padding);
  --panel-body-gap: var(--control-gap);
}