/* Ink & Brass is a presentation layer on the complete editor, not a second app.
   Keep card geometry, responsive interactions and feature visibility in workspace.css. */
body[data-color="ink-brass"] {
  --bg-primary: #f3f0e8; --bg-primary-rgb: 243, 240, 232;
  --bg-secondary: #e9e5db; --bg-card: #faf8f2;
  --text-primary: #24271f; --text-secondary: #626857;
  --accent: #796035; --on-accent: #ffffff; --border: #c7c8bb;
  --hover: #e2dfd2; --search-input-bg: #faf8f2;
}
body[data-theme="dark"][data-color="ink-brass"] {
  --bg-primary: #111310; --bg-primary-rgb: 17, 19, 16;
  --bg-secondary: #151813; --bg-card: #1c201b;
  --text-primary: #f1eee6; --text-secondary: #a5ad9d;
  --accent: #cfac73; --on-accent: #171a14; --border: #343b2f;
  --hover: #252c23; --search-input-bg: #181c16;
}
body[data-color="tide"] {
  --bg-primary: #edf3f7; --bg-primary-rgb: 237, 243, 247;
  --bg-secondary: #e0e9f0; --bg-card: #f8fbfd;
  --text-primary: #192d3a; --text-secondary: #4e687a;
  --accent: #346580; --on-accent: #ffffff; --border: #bccdd7;
  --hover: #d7e5ee; --search-input-bg: #f8fbfd;
}
body[data-theme="dark"][data-color="tide"] {
  --bg-primary: #0d1721; --bg-primary-rgb: 13, 23, 33;
  --bg-secondary: #121e2a; --bg-card: #1a2937;
  --text-primary: #eaf2f6; --text-secondary: #a2b8c8;
  --accent: #9cc7dc; --on-accent: #11232f; --border: #304553;
  --hover: #233b4c; --search-input-bg: #152331;
}
body[data-color="rosewood"] {
  --bg-primary: #f7eff2; --bg-primary-rgb: 247, 239, 242;
  --bg-secondary: #eee0e6; --bg-card: #fdf9fa;
  --text-primary: #39252f; --text-secondary: #775c6b;
  --accent: #8a4b68; --on-accent: #ffffff; --border: #d5bdc8;
  --hover: #ead6df; --search-input-bg: #fdf9fa;
}
body[data-theme="dark"][data-color="rosewood"] {
  --bg-primary: #21151d; --bg-primary-rgb: 33, 21, 29;
  --bg-secondary: #2a1c26; --bg-card: #35232f;
  --text-primary: #f6edf1; --text-secondary: #c3a5b6;
  --accent: #dea9bf; --on-accent: #321b28; --border: #513849;
  --hover: #442d3b; --search-input-bg: #2d1e29;
}
body[data-color="grove"] {
  --bg-primary: #edf3ed; --bg-primary-rgb: 237, 243, 237;
  --bg-secondary: #dfe9df; --bg-card: #f8fbf7;
  --text-primary: #20362d; --text-secondary: #526b5b;
  --accent: #3b7058; --on-accent: #ffffff; --border: #b6cbbd;
  --hover: #d3e4d7; --search-input-bg: #f8fbf7;
}
body[data-theme="dark"][data-color="grove"] {
  --bg-primary: #10231e; --bg-primary-rgb: 16, 35, 30;
  --bg-secondary: #142e27; --bg-card: #1c3a31;
  --text-primary: #e9f2e9; --text-secondary: #a4bfb0;
  --accent: #afd0ae; --on-accent: #162c22; --border: #365648;
  --hover: #284c3d; --search-input-bg: #18332a;
}
body,
body[data-theme="dark"][data-color] {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --text-muted: var(--text-secondary);
  --glass-surface: var(--bg-secondary);
  --glass-strong: var(--bg-secondary);
  --glass-raised: var(--bg-card);
  --glass-border: var(--border);
  --glass-border-strong: var(--accent);
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --surface-shadow: none;
  background-image: none;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* Match the specificity of the existing light-theme glass variables. */
body[data-theme="light"][data-color] {
  --glass-surface: var(--bg-secondary);
  --glass-strong: var(--bg-secondary);
  --glass-raised: var(--bg-card);
  --surface-shadow: none;
}
body.background-artwork {
  --glass-surface: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  --glass-raised: color-mix(in srgb, var(--bg-card) 94%, transparent);
}
/* A continuous ink masthead keeps the accepted wordmark legible in every
   palette, including light mode, without a separate box around the logo. */
.header {
  --bg-primary: #111310; --bg-secondary: #1c201b; --bg-card: #242a21;
  --text-primary: #f1eee6; --text-secondary: #a5ad9d;
  --border: #343b2f; --accent: #cfac73; --on-accent: #171a14;
  --glass-border: #343b2f; --glass-surface: #1c201b;
  --accent-hover: #30352a;
  margin: 0; min-height: 74px; padding: 9px 24px;
  border-radius: 0; border-bottom: 1px solid #30372c;
  background: #111310;
}
.brand-lockup { width: 244px; flex-basis: 244px; height: 54px; overflow: hidden; justify-content: center; }
.brand-lockup::after { display: none; }
.brand-banner { flex-shrink: 0; height: auto; filter: none; mix-blend-mode: lighten; }
.brand-symbol { display: none; }
.header-actions { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.manual-btn, .new-deck-btn, .stats-btn, .settings-gear-btn, .deck-menu-btn { backdrop-filter: none; }
.import-btn-main, .export-direct-btn {
  background: var(--accent); color: var(--on-accent, #111310);
  border-color: var(--accent); box-shadow: none; font-weight: 600;
}
.import-btn-main:hover, .export-direct-btn:hover { background: color-mix(in srgb, var(--accent) 88%, white); color: var(--on-accent, #111310); border-color: var(--accent); filter: none; }
body[data-theme="light"] .export-direct-btn { color: var(--on-accent, #111310); }
.card-back-btn-save, #useCustomUrl { color: var(--on-accent, #111310); }
.sidebar-nav-item { color: var(--text-secondary); }
.sidebar-nav-item.active { background: var(--accent-tint); color: var(--accent); border-color: transparent; border-left-color: var(--accent); box-shadow: none; }
.sidebar-nav-item:hover { background: var(--hover); }
.sidebar-section-label, .sort-label, .eyebrow { letter-spacing: .09em; }
.nav-count { border: 0; font-size: 11px; color: var(--text-secondary); }
.sidebar-footer img { width: 56px; height: 56px; border-radius: 6px; filter: none; object-fit: cover; }
body[data-theme="dark"] .sidebar-footer img { mix-blend-mode: lighten; }
.deck-controls-sticky { background: transparent; }
/* Echo the wordmark's clean, bold sans-serif rather than editorial serifs. */
h1, h2, h3, h4, h5, h6,
.deck-toolbar-title h1, .deck-title, .modal-title,
.dashboard-header h1, .dashboard-section-heading h2, .dashboard-tips h2,
.dashboard-precon-copy h3, .saved-decks-toolbar h1, .precon-library-toolbar h1,
.precon-set-heading h2, .precon-detail-introduction h2,
.deck-type-group-title, .precon-set-title, .precon-detail-title, .stats-sidebar-header h2 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.025em; text-transform: none;
}
.deck-toolbar-title h1 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.12; }
.deck-title { font-size: 17px; letter-spacing: -.015em; }
.dashboard-header h1 { max-width: 640px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }
/* Lower the greeting into the former subtitle space without shifting the
   quick actions below it or leaving an empty text element in the layout. */
.dashboard-header { padding-block: 49px 26px; margin-bottom: 26px; }
.dashboard-section-heading h2, .dashboard-precon-copy h3, .dashboard-tips h2 { font-size: 21px; }
.dashboard-set, .dashboard-deck, .dashboard-guide-action, .dashboard-precon-stage { background: var(--glass-surface); }
.dashboard-guide-action { padding: 16px 14px; }
.dashboard-set { padding: 18px; }
.dashboard-set strong { font-size: 14px; }
.dashboard-text-action, .dashboard-precon-open { color: var(--accent); }
.deck-card { box-shadow: none; }
.deck-control-button[aria-pressed="true"] { background: var(--accent-tint); color: var(--text-primary); border-color: var(--accent); }
.saved-deck-title { background: var(--glass-surface); box-shadow: none; }
.saved-deck-title-text, .saved-deck-title-input { font-family: 'Inter', sans-serif; font-weight: 600; line-height: 1.3; }
.modal-content, .card-back-modal-content, .settings-modal, .stats-sidebar { background: var(--bg-secondary); backdrop-filter: none; }
.modal-content, .card-back-modal-content, .settings-modal { border-color: var(--border); box-shadow: 0 24px 80px #0006; }
.settings-header h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.025em; }
.settings-section-label { letter-spacing: .09em; }
.studio-palettes-note { margin: -4px 0 16px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.settings-themes-grid.studio-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-option.studio-palette { display: flex; align-items: stretch; flex-direction: column; gap: 7px; min-width: 0; padding: 10px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-primary); font: inherit; text-align: left; }
.theme-option.studio-palette:hover, .theme-option.studio-palette.active { border-color: var(--accent); background: var(--hover); }
.theme-option.studio-palette .swatch { width: 100%; height: 40px; border: 1px solid #ffffff1a; box-shadow: none; outline: 0; }
.theme-option.studio-palette .swatch::after { display: none; }
.theme-option.studio-palette .label { max-width: none; color: var(--text-primary); font-size: 12px; font-weight: 600; text-align: left; }
.studio-palette small { color: var(--text-secondary); font-size: 10px; line-height: 1.4; }
.studio-swatch--ink { background: linear-gradient(90deg, #111310 0 48%, #cfac73 48% 72%, #f1eee6 72%); }
.studio-swatch--tide { background: linear-gradient(90deg, #0d1721 0 48%, #9cc7dc 48% 72%, #eaf2f6 72%); }
.studio-swatch--rosewood { background: linear-gradient(90deg, #21151d 0 48%, #dea9bf 48% 72%, #f6edf1 72%); }
.studio-swatch--grove { background: linear-gradient(90deg, #10231e 0 48%, #afd0ae 48% 72%, #e9f2e9 72%); }
.commander-palettes { margin-top: 24px; padding-top: 5px; border-top: 1px solid var(--border); }
.commander-palettes > summary { padding: 14px 0; color: var(--text-primary); font-size: 13px; cursor: pointer; }
.commander-palettes > summary span { display: block; margin: 5px 0 0 16px; color: var(--text-secondary); font-size: 11px; }
.theme-option[role="button"] { color: var(--text-primary); }
@media (min-width: 761px) {
  .container { margin: 0; }
  .left-panel { flex-basis: 244px; max-width: 244px; padding: 20px 16px 16px !important; background: var(--glass-surface); }
  .right-panel { background: transparent; }
  .deck-controls-sticky { padding-block: 24px 20px; }
  .dashboard-view, .saved-decks-view, .precon-library-view { padding: 32px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .header { padding-inline: 20px; }
  .brand-lockup { width: 190px; flex-basis: 190px; }
  .left-panel { flex-basis: 216px; max-width: 216px; }
  .dashboard-view, .saved-decks-view, .precon-library-view { padding: 24px; }
}
@media (max-width: 760px) {
  .header { grid-template-columns: 82px minmax(0, 1fr); min-height: 60px; padding: 8px 12px; }
  .brand-lockup { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-banner { display: none; }
  .brand-symbol { display: block; width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; mix-blend-mode: lighten; }
  .header-actions { background: transparent; }
  .deck-toolbar-title h1 { font-size: 25px; }
  .deck-title { font-size: 17px; }
  .dashboard-header { padding-block: 41px 20px; margin-bottom: 20px; }
  .dashboard-header h1 { font-size: 34px; }
  .dashboard-section-heading h2 { font-size: 21px; }
  .dashboard-guide-action { padding: 12px 0; background: transparent; }
  .settings-themes-grid.studio-palettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}