:root {
  /* Keep browser-standard rem sizing */
  font-size: 16px;

  /* Base sizing */
  --rem: 16px;
  --base: calc(var(--rem) * 0.875);

  /* Spacing scale */
  --space-2xs: calc(var(--base) * 0.125);
  --space-xs: calc(var(--base) * 0.25);
  --space-sm: calc(var(--base) * 0.5);
  --space-sm-plus: calc(var(--base) * 0.75);
  --space-md: var(--base);
  --space-lg: calc(var(--base) * 1.5);
  --space-xl: calc(var(--base) * 2);
  --space-2xl: calc(var(--base) * 3);
  --space-2xl-plus: calc(var(--base) * 2.5);
  --space-3xl: calc(var(--base) * 4);
  --space-4xl: calc(var(--base) * 5);

  /* Typography */
  --font-family-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-reading: 'Literata', Georgia, serif;

  --font-size-root: var(--base); /* app base text size */
  --font-size-control: var(--rem); /* keep controls >= 16px */
  --font-size-xs: calc(var(--base) * 0.75);
  --font-size-sm: calc(var(--base) * 0.9);
  --font-size-md: var(--base);
  --font-size-md-plus: calc(var(--base) * 1.1);
  --font-size-lg: calc(var(--base) * 1.2);
  --font-size-lg-plus: calc(var(--base) * 1.4);
  --font-size-xl: calc(var(--base) * 1.6);

  /* Border */
  --border-radius: 3px;

  /* Transitions */
  --transition-speed: 0.2s;
  --transition-timing: ease;
  --transition-base: 200ms ease-in-out;

  /* Focus (accessibility) */
  --focus-ring-width: 1px;
  --focus-ring-offset: 1px;
  --focus-ring-offset-inset: calc(-1 * var(--focus-ring-offset));
  --focus-outline: var(--focus-ring-width) solid var(--color-focus-ring);

  /* Layout */
  --layout-header-height: 56px;
  --layout-sidebar-width: 300px;
  --layout-sidebar-column-width: 280px;
  --layout-oracles-width: 300px;
  --layout-oracles-width-mobile: 360px;
  --layout-modal-max-width: 400px;
  --layout-modal-gutter: var(--space-md);

  /* Shadows */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 0.2);

  /* Z-index (stacking order) */
  --z-menu: 1000;
  --z-overlay: 1020;
  --z-panel: 1030; /* sidebar, oracles panels */
  --z-modal: 2000;
  --z-sticky: 10;
  --z-toast: 10000;

  /* Component sizes */
  --size-skeleton-line-height: calc(var(--base) * 0.95);

  /* Inline Create Input - base defaults */
  --inline-input-background: transparent;
  --inline-input-border: var(--color-border);
  --inline-input-color: var(--color-surface-text);
  --inline-input-font-size: var(--font-size-md);
  --inline-input-font-weight: 400;
  --inline-input-padding: var(--space-sm) var(--space-md);
  --inline-input-min-height: 36px;
  --inline-input-border-radius: var(--border-radius);
  --inline-input-placeholder: var(--color-text-muted);
  --inline-input-focus-border: var(--color-action-indicator);

  /* Markdown */
  --line-height-markdown: 1.6;
  --space-markdown-paragraph: var(--space-md);
  --space-markdown-heading-top: var(--space-lg);
  --space-markdown-heading-bottom: var(--space-sm);
  --space-markdown-list-top: var(--space-sm);
  --space-markdown-list-bottom: var(--space-md);
  --space-markdown-list-item: var(--space-sm);
  --space-markdown-block: var(--space-md);

  /* Scrollbars */
  --scrollbar-size: 10px;
  --scrollbar-thumb: rgba(128, 128, 128, 0.4);
  --scrollbar-track: transparent;

  font-family: var(--font-family-ui);
}

/* Increase font sizes on mobile for better readability */
@media (max-width: 768px) {
  :root {
    --base: var(--rem);

    /* Match previous mobile sizing (when rem was effectively bumped) */
    --font-size-root: var(--base);
    --font-size-sm: calc(var(--rem) * 1);
    --font-size-md: calc(var(--rem) * 1.125);
    --font-size-md-plus: calc(var(--rem) * 1.125);
    --font-size-lg: calc(var(--rem) * 1.375);
    --font-size-xl: calc(var(--rem) * 1.75);
  }
}

:root,
:root.theme-light {
  color-scheme: light;

  /* Header */
  --color-header: #3b3128;
  --color-header-text: #FFFFFF;
  --color-header-text-muted: #ccc8c3;
  --color-header-button-hover: rgba(255, 255, 255, 0.12);

  /* Core brand colors */
  --color-menu: #d3c0ab;
  --color-menu-dark: #d0bba2;
  --color-menu-content: #d9c9b7;
  --color-menu-border: #b7a694;
  --color-menu-text: #33221C;
  --color-surface: #FAFAFA;
  --color-surface-hover: #f0f0f0;
  --color-surface-text: #33221C;
  --color-surface-text-muted: #7a6b5e;
  --color-border: #b7a694;
  --color-border-subtle: #c6b6a4;
  --color-input-border: #bcbcbc;
  --color-accent: #498a53;
  --color-accent-hover: #3a7943;
  --color-action: #2d74c6;
  --color-action-hover: #2563a8;

  /* Aliases */
  --color-text-muted: var(--color-surface-text-muted);
  --color-action-indicator: var(--color-action);

  /* Background */
  --color-background: #d3c0ab;
  --color-outer: #1a1510;

  /* Tab Bar */
  --color-tab-active: var(--color-surface);
  --color-tab-active-text: var(--color-header-text);
  --color-tab-active-border: var(--color-header-text-muted);
  --color-tab-inactive: var(--color-menu);
  --color-tab-inactive-border: var(--color-border);
  --color-tab-inactive-text: var(--color-header-text-muted);

  /* Journal */
  --color-journal: var(--color-surface);
  --color-composer-border: var(--color-border);
  --color-composer-border-focus: var(--color-action-indicator);

  /* Journal Entry */
  --color-entry-surface: transparent;
  --color-game-master-entry-surface: #f0f0f0;
  --color-game-master-entry-border: #e0e0e0;
  --color-entry-hover: var(--color-surface-hover);
  --color-entry-button: #FAFAFA;
  --color-entry-button-border: var(--color-border);
  --color-entry-button-hover: var(--color-surface-hover);

  /* Tools Panel */
  --color-tools-results-surface: #f0f0f0;
  --color-tool-result-label: #757575;

  /* Campaign Navigation */
  --color-campaign-text: #33221C;
  --color-campaign-text-muted: #6b5c50;
  --color-campaign-text-hover: rgba(0, 0, 0, 0.05);
  --color-campaign-text-selected: rgba(0, 0, 0, 0.07);
  --color-campaign-menu: var(--color-menu-dark);
  --color-campaign-border: #b7a694;
  --color-campaign-border-divider: #b7a694;
  --shadow-campaign-text: none;
  --journal-item-hover: rgba(255, 255, 255, 0.3);
  --journal-item-selected: rgba(255, 255, 255, 0.4);
  --journal-item-selected-hover: rgba(255, 255, 255, 0.5);
  --color-sidebar-item-selected: var(--color-action);

  /* Oracles Accordion Toggle */
  --color-accordion-toggle: rgba(62, 44, 30, 0.06);
  --color-accordion-toggle-text: #33221C;
  --color-accordion-toggle-border: #e1d6c9;
  --backdrop-accordion-toggle: none;
  --shadow-accordion-toggle: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Tool Button */
  --color-tool-button: #eee4d9;
  --color-tool-button-text: #33221C;
  --color-tool-button-border: #dfd3c5;
  --color-tool-button-hover: #e6dacd;
  --color-tool-button-text-hover: #33221C;
  --font-size-tool-button: var(--font-size-sm);

  /* Dice */
  --color-dice-shape: #33221C;
  --color-dice-label: #FAFAFA;
  --color-die-d4: #b71c1c;
  --color-die-d4-label: #fafafa;
  --color-die-d6: #0d47a1;
  --color-die-d6-label: #fafafa;
  --color-die-d8: #1b5e20;
  --color-die-d8-label: #fafafa;
  --color-die-d10: #4a148c;
  --color-die-d10-label: #fafafa;
  --color-die-d12: #bf360c;
  --color-die-d12-label: #fafafa;
  --color-die-d20: #f9a825;
  --color-die-d20-label: #1a1208;
  --color-die-d100: #006064;
  --color-die-d100-label: #fafafa;
  --color-die-base: #0b7a52;
  --color-die-base-label: #fafafa;
  --color-die-stress: #a01b1b;
  --color-die-stress-label: #fafafa;
  --color-die-skill: #1565c0;
  --color-die-skill-label: #fafafa;
  --color-die-gear: #8d6e63;
  --color-die-gear-label: #fafafa;
  --color-die-success-glow: #f9a825;
  --color-die-facehugger-glow: #e53935;
  --color-die-bane-glow: #c62828;
  --color-die-gandalf-glow: #1565c0;
  --color-die-eye-glow: #b71c1c;
  --color-dice-pane: var(--color-tool-button);
  --color-dice-pane-border: var(--color-tool-button-border);

  /* Scrollbars */
  --scrollbar-thumb: rgba(0, 0, 0, 0.22);

  /* Overlay colors */
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* Semantic colors */
  --color-error: #dc2626;
  --color-error-soft: #f87171;

  /* Focus ring */
  --color-focus-ring: #1d4ed8;

  /* Shadow colors */
  --color-shadow: rgba(0, 0, 0, 0.22);
}

:root.theme-dark {
  color-scheme: dark;

  /* Header */
  --color-header: #282a2f;
  --color-header-text: #ffffff;
  --color-header-text-muted: #a0a4ae;
  --color-header-button-hover: rgba(255, 255, 255, 0.1);

  /* Core brand colors */
  --color-menu: #282a2f;
  --color-menu-content: #282a2f;
  --color-menu-dark: #282a2f;
  --color-menu-border: #3e424c;
  --color-menu-text: #ffffff;
  --color-surface: #222326;
  --color-surface-hover: #292a2d;
  --color-surface-text: #e6e8ec;
  --color-surface-text-muted: #a0a4ae;
  --color-border: #3e424c;
  --color-border-subtle: #35373b;
  --color-input-border: var(--color-border);
  --color-accent: #3e5976;
  --color-accent-hover: #4e6986;
  --color-action: #4e9af1;
  --color-action-hover: #6aacf5;

  /* Aliases */
  --color-text-muted: var(--color-surface-text-muted);
  --color-action-indicator: var(--color-action);

  /* Background */
  --color-background: #282a2f;
  --color-outer: #000000;

  /* Tab Bar */
  --color-tab-active: var(--color-surface);
  --color-tab-active-text: var(--color-surface-text);
  --color-tab-active-border: color-mix(in srgb, var(--color-border) 55%, var(--color-surface) 45%);
  --color-tab-inactive: #2f2f2f;
  --color-tab-inactive-border: #3e424c;
  --color-tab-inactive-text: var(--color-surface-text-muted);

  /* Journal */
  --color-journal: var(--color-surface);
  --color-composer-border: var(--color-border);
  --color-composer-border-focus: var(--color-action-indicator);

  /* Journal Entry */
  --color-entry-surface: transparent;
  --color-game-master-entry-surface: #2b2d30;
  --color-game-master-entry-border: #35373b;
  --color-entry-hover: var(--color-surface-hover);
  --color-entry-button: #262626;
  --color-entry-button-border: var(--color-border);
  --color-campaign-border-divider: #625a4c;
  --color-entry-button-hover: rgba(255, 255, 255, 0.06);

  /* Tools Panel */
  --color-tools-results-surface: #3a3d44;
  --color-tool-result-label: var(--color-surface-text-muted);

  /* Campaign Navigation */
  --color-campaign-text: #ffffff;
  --color-campaign-text-muted: #a0a4ae;
  --color-campaign-text-hover: rgba(255, 255, 255, 0.08);
  --color-campaign-text-selected: rgba(255, 255, 255, 0.08);
  --color-campaign-menu: var(--color-menu);
  --color-campaign-border: var(--color-menu-border);
  --color-campaign-border-divider: var(--color-menu-border);
  --shadow-campaign-text: 0 1px 3px rgba(0, 0, 0, 0.6);
  --journal-item-hover: rgba(255, 255, 255, 0.05);
  --journal-item-selected: rgba(255, 255, 255, 0.08);
  --journal-item-selected-hover: rgba(255, 255, 255, 0.08);
  --color-sidebar-item-selected: var(--color-action);

  /* Oracles Accordion Toggle */
  --color-accordion-toggle: rgba(0, 0, 0, 0.14);
  --color-accordion-toggle-text: #ffffff;
  --color-accordion-toggle-border: var(--color-border);
  --backdrop-accordion-toggle: blur(10px);
  --shadow-accordion-toggle: 0 1px 3px rgba(0, 0, 0, 0.6);

  /* Tool Button */
  --color-tool-button: #bdc2cc;
  --color-tool-button-text: #000000;
  --color-tool-button-border: #08152e;
  --color-tool-button-hover: #d6dae4;
  --color-tool-button-text-hover: #000000;
  --font-size-tool-button: var(--font-size-sm);

  /* Dice */
  --color-dice-shape: #c8ccd6;
  --color-dice-label: #2a2c30;
  --color-die-d4: #ef5350;
  --color-die-d4-label: #fafafa;
  --color-die-d6: #42a5f5;
  --color-die-d6-label: #fafafa;
  --color-die-d8: #66bb6a;
  --color-die-d8-label: #fafafa;
  --color-die-d10: #ab47bc;
  --color-die-d10-label: #fafafa;
  --color-die-d12: #ff7043;
  --color-die-d12-label: #fafafa;
  --color-die-d20: #ffd54f;
  --color-die-d20-label: #1a1208;
  --color-die-d100: #26c6da;
  --color-die-d100-label: #fafafa;
  --color-die-base: #34c98b;
  --color-die-base-label: #0a2019;
  --color-die-stress: #e04b4b;
  --color-die-stress-label: #fafafa;
  --color-die-skill: #64b5f6;
  --color-die-skill-label: #0a1a2a;
  --color-die-gear: #bcaaa4;
  --color-die-gear-label: #2a1a15;
  --color-die-success-glow: #ffd54f;
  --color-die-facehugger-glow: #ff6f60;
  --color-die-bane-glow: #ef5350;
  --color-die-gandalf-glow: #64b5f6;
  --color-die-eye-glow: #ff5252;
  --color-dice-pane: #33363d;
  --color-dice-pane-border: var(--color-border);

  /* Scrollbars */
  --scrollbar-thumb: rgb(45, 44, 48);

  /* Overlay colors */
  --color-overlay: rgba(0, 0, 0, 0.7);

  /* Semantic colors */
  --color-error: #e05b5b;
  --color-error-soft: #ef8b8b;

  /* Focus ring */
  --color-focus-ring: #93c5fd;

  /* Shadow colors */
  --color-shadow: rgba(0, 0, 0, 0.6);
}

/* Global utility classes */
.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

:root {
  /* JS sets these from visualViewport for mobile keyboard handling. */
  --app-dvh: 100dvh;
  --keyboard-inset: 0px;
}

html,
body {
  height: 100%;
  width: 100%;
  background: var(--color-outer);
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-root);
  overflow: hidden; /* app handles scrolling internally */
}

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  body {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

#quickroll {
  margin-top: 20px;
}