/* Global Ember Parchment theme overrides */
:root {
    --ember-bg: #15110f;
    --ember-bg-top: #221914;
    --ember-bg-bottom: #120d0b;
    --ember-surface: #2a221d;
    --ember-surface-strong: #332923;
    --ember-line: #4b3c31;
    --ember-line-soft: #5a4a3d;
    --ember-text: #eadfcf;
    --ember-text-soft: #c8b9a4;
    --ember-text-muted: #9f8f7a;
    --ember-accent: #c89b5b;
    --ember-accent-strong: #ddb778;
    --ember-accent-cool: #7fa1c2;
    --ember-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
    --ember-radius-sm: 8px;
    --ember-radius-md: 12px;
    --ember-radius-lg: 16px;
    --ember-ui-font: "Trebuchet MS", "Segoe UI", "Gill Sans", sans-serif;
    --ember-display-font: "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

/* Section variants */
body[data-site-section="dice"] {
    --ember-accent: #d1a067;
    --ember-accent-strong: #e4bf8c;
    --ember-accent-cool: #81a8d1;
}

body[data-site-section="utility"] {
    --ember-accent: #b59c66;
    --ember-accent-strong: #d6bf8e;
    --ember-accent-cool: #7ea7a0;
}

body[data-site-section="editor"] {
    --ember-accent: #b58a52;
    --ember-accent-strong: #d8b07a;
    --ember-accent-cool: #8ca7cd;
}

body,
body.theme-dark,
body:not(.light) {
    color: var(--ember-text);
    font-family: var(--ember-ui-font);
    background:
        radial-gradient(circle at 12% 8%, rgba(200, 155, 91, 0.14), transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(127, 161, 194, 0.12), transparent 22%),
        linear-gradient(180deg, var(--ember-bg-top) 0%, var(--ember-bg) 45%, var(--ember-bg-bottom) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.2;
    z-index: 0;
}

.container,
main,
.app-layout,
.screen-shell,
.editor-container,
.tracker-layout {
    position: relative;
    z-index: 1;
}

h1,
.top-bar h1,
header h1 {
    font-family: var(--ember-display-font);
    letter-spacing: 0.02em;
}

.subtitle,
header .subtitle,
.top-bar .subtitle {
    color: var(--ember-text-soft);
}

.nav-back {
    margin-bottom: 1.35rem;
}

.navbar,
.top-bar,
header.navbar {
    background: linear-gradient(180deg, rgba(45, 34, 28, 0.94), rgba(29, 22, 18, 0.94));
    border-bottom: 1px solid var(--ember-line);
}

.nav-back a,
.navbar a,
.top-bar .nav-back a {
    color: var(--ember-accent-strong);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.nav-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--ember-accent) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ember-accent) 12%, transparent);
    font-size: 0.78rem;
    text-transform: uppercase;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nav-back a:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--ember-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--ember-accent-strong) 55%, transparent);
}

.generator-card,
.card,
.filters-card,
.puzzle-card,
.panel,
.tool-card,
.screen-shell,
#result,
.history-item,
.editor-toolbar,
.input-inner,
.narrative-section,
.npc-panel,
.name-display,
.filter-btn,
.answer {
    background: linear-gradient(180deg, var(--ember-surface-strong), var(--ember-surface));
    border-color: var(--ember-line);
    box-shadow: var(--ember-shadow);
}

button,
.primary-btn,
.regen-btn,
#rollBtn,
button.primary,
.add-panel-btn,
.secondary-btn,
.layout-action-btn {
    min-height: 2.35rem;
    border-radius: var(--ember-radius-sm);
    background: linear-gradient(180deg, var(--ember-accent), var(--ember-accent-strong));
    color: #1e1612;
    border-color: var(--ember-accent);
    font-weight: 700;
    letter-spacing: 0.02em;
}

button:hover,
.primary-btn:hover,
.regen-btn:hover,
#rollBtn:hover,
button.primary:hover,
.add-panel-btn:hover,
.secondary-btn:hover,
.layout-action-btn:hover {
    filter: brightness(1.04);
}

input,
select,
textarea,
.input-inner input,
.layout-setting-select,
.panel-type-select,
.search-row input {
    min-height: 2.35rem;
    border-radius: var(--ember-radius-sm);
    background: #1d1714;
    color: var(--ember-text);
    border-color: var(--ember-line-soft);
}

input:focus,
select:focus,
textarea:focus,
button:focus,
.layout-setting-select:focus,
.panel-type-select:focus,
.search-row input:focus {
    outline: 2px solid rgba(200, 155, 91, 0.45);
    outline-offset: 1px;
}

label,
.settings-label,
.search-row label,
.narrative-title,
.section-title,
.filter-btn,
.count,
.label {
    color: var(--ember-text-soft);
}

.category h2,
.generator-card h2,
.card h2,
h2,
.puzzle-title,
.tool-card h3,
.screen-title,
.narrative-title {
    color: var(--ember-accent-strong);
}

.tool-card p,
.puzzle-text,
.narrative-text,
.history-content,
.answer,
.examples,
.count,
.screen-meta,
.helper-link,
.tie-break-note,
.save-feedback {
    color: var(--ember-text-soft);
}

.filter-btn.active,
.history-mode,
.mode-option input:checked + span,
.theme-toggle {
    background: var(--ember-accent);
    color: #1e1612;
    border-color: var(--ember-accent);
}

.tool-icon,
.reset-link,
a {
    color: var(--ember-accent);
}

/* Dice specific */
.dice-icon {
    opacity: 0.93;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.dice-icon:hover {
    transform: translateY(-2px) scale(1.04);
}

/* Preserve editor parchment document area */
#editor,
.ql-editor {
    box-shadow: none;
}

/* Light mode support used in some pages */
body.light,
body.theme-light {
    --ember-bg: #efe5d8;
    --ember-bg-top: #f6f0e6;
    --ember-bg-bottom: #e5d7c4;
    --ember-surface: #fff9f2;
    --ember-surface-strong: #f5ebde;
    --ember-line: #bca489;
    --ember-line-soft: #cbb89f;
    --ember-text: #33261d;
    --ember-text-soft: #6a584b;
    --ember-text-muted: #826f5f;
    --ember-accent: #936128;
    --ember-accent-strong: #8a5823;
    --ember-accent-cool: #5f7a9b;
}


/* ===== Consolidated From ember-overrides.css ===== */

/* Final unification layer loaded after page-level styles */
:root {
    --ember-bg: #15110f;
    --ember-bg-top: #221914;
    --ember-bg-bottom: #120d0b;
    --ember-surface: #2a221d;
    --ember-surface-strong: #332923;
    --ember-line: #4b3c31;
    --ember-line-soft: #5a4a3d;
    --ember-text: #eadfcf;
    --ember-text-soft: #c8b9a4;
    --ember-accent: #c89b5b;
    --ember-accent-strong: #ddb778;
    --ember-accent-cool: #7fa1c2;
    --ember-link: #d8b16e;
    --ember-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
    --ember-ui-font: "Trebuchet MS", "Segoe UI", "Gill Sans", sans-serif;
    --ember-display-font: "Palatino Linotype", "Book Antiqua", Georgia, serif;
    /* Legacy variable aliases used by older pages */
    --accent: var(--ember-accent);
    --accent-dark: var(--ember-accent-strong);
    --highlight: var(--ember-accent-strong);
    --line: var(--ember-line);
    --line-light: var(--ember-line-soft);
    --text: var(--ember-text);
    --text-soft: var(--ember-text-soft);
    --text-softer: #b8a990;
    --text-muted: var(--ember-text-muted);
    --bg: var(--ember-bg);
    --bg-top: var(--ember-bg-top);
    --bg-bottom: var(--ember-bg-bottom);
    --panel: var(--ember-surface);
    --panel-strong: var(--ember-surface-strong);
    --focus: rgba(200, 155, 91, 0.35);
}

body {
    color: var(--ember-text) !important;
    font-family: var(--ember-ui-font) !important;
}

h1,
h2,
header h1,
.top-bar h1 {
    font-family: var(--ember-display-font) !important;
}

.subtitle,
header .subtitle,
.top-bar .subtitle,
p,
.helper-link,
.screen-meta,
.count,
.examples,
.narrative-text,
.puzzle-text {
    color: var(--ember-text-soft) !important;
}

.navbar,
.top-bar,
header.navbar {
    background: linear-gradient(180deg, rgba(45, 34, 28, 0.94), rgba(29, 22, 18, 0.94)) !important;
    border-bottom: 1px solid var(--ember-line) !important;
}

.nav-back a,
.navbar a,
.top-bar .nav-back a {
    color: var(--ember-accent-strong) !important;
}

.nav-back a {
    border: 1px solid color-mix(in srgb, var(--ember-accent) 45%, transparent) !important;
    background: color-mix(in srgb, var(--ember-accent) 12%, transparent) !important;
}

.generator-card,
.card,
.filters-card,
.puzzle-card,
.panel,
.tool-card,
.screen-shell,
#result,
.history-item,
.editor-toolbar,
.input-inner,
.narrative-section,
.npc-panel,
.name-display,
.preview-pane,
.editor-pane,
.sidebar,
.panel-body,
.panel-header,
.drop-zone,
.canvas-outer,
.canvas-wrap,
.formula-section,
.quick-dice,
#helpSection {
    background: linear-gradient(180deg, var(--ember-surface-strong), var(--ember-surface)) !important;
    border-color: var(--ember-line) !important;
    box-shadow: var(--ember-shadow) !important;
}

input,
select,
textarea,
.input-inner input,
.layout-setting-select,
.panel-type-select,
.search-row input,
input[type="number"],
input[type="text"] {
    background: #1d1714 !important;
    color: var(--ember-text) !important;
    border: 1px solid var(--ember-line-soft) !important;
}

label,
.settings-label,
.search-row label,
.narrative-title,
.section-title,
.label,
.control-group label {
    color: var(--ember-text-soft) !important;
}

button,
.primary-btn,
.regen-btn,
#rollBtn,
button.primary,
.add-panel-btn,
.secondary-btn,
.layout-action-btn,
button.secondary {
    background: linear-gradient(180deg, var(--ember-accent), var(--ember-accent-strong)) !important;
    color: #1e1612 !important;
    border: 1px solid var(--ember-accent) !important;
}

button.danger {
    background: linear-gradient(180deg, #b56d61, #cf8476) !important;
    color: #fff6ee !important;
    border-color: #cf8476 !important;
}

button:hover,
.primary-btn:hover,
.regen-btn:hover,
#rollBtn:hover,
button.primary:hover,
.add-panel-btn:hover,
.secondary-btn:hover,
.layout-action-btn:hover,
button.secondary:hover,
button.danger:hover {
    filter: brightness(1.05) !important;
    color: #1e1612 !important;
}

select:focus,
input:focus,
textarea:focus {
    border-color: var(--ember-accent-strong) !important;
    box-shadow: 0 0 0 2px rgba(200, 155, 91, 0.26) !important;
}

.tool-card h3,
.card h2,
.generator-card h2,
.screen-title,
.section-title,
.category h2,
.puzzle-title,
.narrative-title,
h2 {
    color: var(--ember-accent-strong) !important;
}

.tool-icon,
a,
.reset-link {
    color: var(--ember-link) !important;
}

.name-display,
.name-display * {
    color: var(--ember-accent-strong) !important;
}

/* Defensive overrides for legacy blue-accent classes and UI regions */
.nav-back a,
.tool-icon,
.copy-btn,
.panel-close-btn,
.panel-action,
.screen-title,
.puzzle-tags,
.puzzle-tags span,
.save-feedback.is-error,
.save-feedback,
.count,
.subtitle {
    border-color: var(--ember-line-soft) !important;
}

.name-display,
.puzzle-tags,
.puzzle-tags span,
.filter-btn,
.secondary-btn,
.layout-action-btn,
.add-panel-btn,
.reveal-btn,
.copy-btn,
.theme-toggle,
.panel-type-select,
.layout-setting-select,
select,
input,
textarea {
    border-color: var(--ember-line-soft) !important;
}

/* Legacy blue utility swatch token replacement */
.swatch-blue {
    background: var(--ember-accent) !important;
}

.history-mode,
.filter-btn.active {
    background: var(--ember-accent) !important;
    border-color: var(--ember-accent) !important;
    color: #1e1612 !important;
}

/* Filter/chip controls should not inherit primary button treatment */
.filter-btn,
.modifier-chip,
.chip,
.tag,
.puzzle-tags span {
    background: color-mix(in srgb, var(--ember-surface) 86%, #000 14%) !important;
    border: 1px solid var(--ember-line-soft) !important;
    color: var(--ember-text) !important;
}

.filter-btn:hover,
.filter-btn:focus-visible,
.modifier-chip:hover,
.chip:hover,
.tag:hover {
    border-color: var(--ember-accent-strong) !important;
    color: var(--ember-accent-strong) !important;
    background: color-mix(in srgb, var(--ember-surface) 70%, var(--ember-accent) 30%) !important;
}

.filter-btn.active,
.modifier-chip.active,
.modifier-chip:has(input:checked) {
    background: var(--ember-accent-strong) !important;
    border-color: var(--ember-accent-strong) !important;
    color: #1e1612 !important;
}

/* Token maker inline print modal overrides */
#printModal > div {
    background: linear-gradient(180deg, var(--ember-surface-strong), var(--ember-surface)) !important;
    color: var(--ember-text) !important;
    border: 1px solid var(--ember-line) !important;
}

#printModal #printCount {
    background: #1d1714 !important;
    color: var(--ember-text) !important;
    border: 1px solid var(--ember-line-soft) !important;
}

#printModal #printGrid {
    background: color-mix(in srgb, var(--ember-surface) 82%, #000 18%) !important;
    border: 1px solid var(--ember-line) !important;
}

/* Dice icon consistency */
.dice-icon {
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)) !important;
}

/* Keep document paper styles intact inside editor */
#editor,
.ql-editor,
.page-theme-parchment,
.page-theme-arcane,
.page-theme-grimoire,
.page-theme-night,
.page-theme-metal,
.page-theme-gold,
.page-theme-paper,
.page-theme-steel,
.page-theme-bronze {
    box-shadow: none !important;
}

/* Light-mode contrast tuning */
body.light,
body.theme-light {
    --ember-link: #8a5823;
    --accent: #936128;
    --accent-dark: #8a5823;
    --highlight: #8a5823;
    --line: #bca489;
    --line-light: #cbb89f;
    --text: #33261d;
    --text-soft: #6a584b;
    --text-softer: #7c6a59;
    --text-muted: #826f5f;
    --bg: #efe5d8;
    --bg-top: #f6f0e6;
    --bg-bottom: #e5d7c4;
    --panel: #fff9f2;
    --panel-strong: #f5ebde;
    --focus: rgba(138, 88, 35, 0.24);
}

body.light,
body.theme-light {
    background:
        radial-gradient(circle at 12% 8%, rgba(147, 97, 40, 0.12), transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(95, 122, 155, 0.1), transparent 22%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 45%, var(--bg-bottom) 100%) !important;
}

body.light input,
body.theme-light input,
body.light select,
body.theme-light select,
body.light textarea,
body.theme-light textarea,
body.light .input-inner input,
body.theme-light .input-inner input,
body.light .layout-setting-select,
body.theme-light .layout-setting-select,
body.light .panel-type-select,
body.theme-light .panel-type-select,
body.light .search-row input,
body.theme-light .search-row input,
body.light input[type="number"],
body.theme-light input[type="number"],
body.light input[type="text"],
body.theme-light input[type="text"] {
    background: #fff9f2 !important;
    color: #33261d !important;
    border-color: #bca489 !important;
}

body.light select option,
body.theme-light select option,
body.light select optgroup,
body.theme-light select optgroup {
    background: #fff7ee;
    color: #33261d;
}

body.light .filter-btn,
body.theme-light .filter-btn,
body.light .modifier-chip,
body.theme-light .modifier-chip,
body.light .chip,
body.theme-light .chip,
body.light .tag,
body.theme-light .tag,
body.light .puzzle-tags span,
body.theme-light .puzzle-tags span {
    background: #fff9f2 !important;
    border-color: #bca489 !important;
    color: #33261d !important;
}

body.light .filter-btn.active,
body.theme-light .filter-btn.active,
body.light .modifier-chip.active,
body.theme-light .modifier-chip.active,
body.light .modifier-chip:has(input:checked),
body.theme-light .modifier-chip:has(input:checked) {
    background: #8a5823 !important;
    border-color: #8a5823 !important;
    color: #fff6ee !important;
}

body.light button,
body.theme-light button,
body.light .primary-btn,
body.theme-light .primary-btn,
body.light .regen-btn,
body.theme-light .regen-btn,
body.light #rollBtn,
body.theme-light #rollBtn,
body.light .secondary-btn,
body.theme-light .secondary-btn,
body.light .layout-action-btn,
body.theme-light .layout-action-btn {
    color: #fff6ee !important;
    background: linear-gradient(180deg, #936128, #8a5823) !important;
    border-color: #8a5823 !important;
}