:root {
  color: #242424;
  background: #f7f6f2;
  --ink: #242424;
  --muted-ink: #66645e;
  --paper: #fffefa;
  --wash: #f2f0eb;
  --rule: #c8c5bd;
}

body {
  color: var(--ink);
  background: repeating-linear-gradient(0deg, transparent 0 35px, #24242408 36px), #f7f6f2;
}

button, input, select { accent-color: var(--ink) !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.topbar, .stitch-header, .subject-header {
  background: var(--paper);
  border-color: var(--ink);
}
.topbar { border-bottom-width: 2px; }
.brand { letter-spacing: -.035em; }
.brand small { color: var(--muted-ink); }
.brand-mark { transform: rotate(-6deg); }
.brand-mark i, .brand-mark i:nth-child(n) {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--ink);
}
.brand-mark i:nth-child(2) { transform: rotate(7deg); }
.brand-mark i:nth-child(3) { transform: rotate(-5deg); }
.brand-mark i:nth-child(4) { transform: rotate(4deg); }
.top-actions, .text-button { color: var(--ink); }

h1, h2, .brand { color: var(--ink); }
h1, h2 { font-family: 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif; }
h1 em, .eyebrow, .sparkle, .intro-steps b, .heading-icon,
.panel-kicker, .setting-heading, .palette-heading, .preset-heading { color: var(--ink); }
.intro-copy, .intro-steps, .page-footer { color: var(--muted-ink); }
.step-line { background: var(--rule); }

.panel {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 5px 8px 6px 7px;
  box-shadow: 3px 4px 0 #24242424;
}
.panel-heading, .canvas-heading { border-color: var(--rule); }
.size-badge {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 2px;
}

.upload-box {
  background: var(--paper);
  border: 1.5px dashed var(--ink);
  border-radius: 3px;
}
.upload-box.dragging { background: var(--wash); border-color: var(--ink); }
.upload-icon, .export-glyph, .palette-source-icon {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
.upload-box p, .upload-box small, .range-ends, .crop-title span:last-child,
.setting-heading small, .palette-heading small, .palette-item .count,
.export-button small { color: var(--muted-ink); }

.upload-button, .small-button, .fit-button, .icon-button, .notice-link,
.stitch-close, .stitch-view-actions button, .stitch-selection-actions button,
.stitch-region-controls button, .subject-toolbar button, .subject-actions button,
.stitch-replace-footer button {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: 2px 2px 0 #24242420;
}
.upload-button:hover, .small-button:hover, .fit-button:hover, .icon-button:hover,
.notice-link:hover, .stitch-close:hover, .stitch-view-actions button:hover,
.stitch-selection-actions button:hover, .subject-toolbar button:hover,
.subject-actions button:hover { color: var(--ink); background: var(--wash); }
.primary-button, .stitch-entry button, .subject-actions .subject-apply,
.stitch-region-controls #stitchRegionDone, .stitch-replace-footer #stitchReplaceApply:not(:disabled),
.stitch-selection-actions #stitchReplaceOpen:not(:disabled) {
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 #24242438;
}
.primary-button:hover, .stitch-entry button:hover, .subject-actions .subject-apply:hover {
  color: #fff; background: #444;
}

input[type=text], input[type=search], select, .color-finder input[type=search],
.stitch-replace-search input {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--rule);
  border-radius: 3px;
}
.slider-label, .inline-control, .view-tools, .grid-toggle,
.background-control, .subject-toolbar label { color: var(--ink); }
.slider-label output, .view-tools output, .stitch-view-actions output,
.stitch-region-progress { color: var(--ink); }
.setting-group, .background-control, .import-row, .color-finder,
.palette-editor, .canvas-footer { border-color: var(--rule); }
.import-link, .palette-editor summary, .color-finder label,
.page-footer a, .stitch-palette-heading button { color: var(--ink); }
.grid-presets button, .subject-entry {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
}
.grid-presets button:hover, .grid-presets button[aria-pressed=true],
.subject-entry:hover, .subject-entry[aria-pressed=true],
.tool.active, .fit-button[aria-pressed=true], .subject-toolbar button[aria-pressed=true] {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.toolbar, .stitch-controls, .subject-toolbar, .stitch-region-toolbar {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--rule);
}
.tool { color: var(--muted-ink); }
.tool:hover { color: var(--ink); background: var(--wash); }
.toolbar-divider { background: var(--rule); }
.stitch-entry { background: var(--wash); border-color: var(--rule); }
.stitch-entry strong, .stitch-entry small { color: var(--ink); }
.canvas-surface, .stitch-board, .subject-canvas-wrap {
  background-color: var(--wash);
  background-image: linear-gradient(#2424240d 1px, transparent 1px),
    linear-gradient(90deg, #2424240d 1px, transparent 1px);
  background-size: 18px 18px;
}
.canvas-scroll, .stitch-board canvas {
  border-color: var(--paper);
  border-radius: 1px;
  box-shadow: 3px 4px 0 #24242435;
}
.canvas-footer { color: var(--muted-ink); }

.summary, .palette-source-card, .migration-notice, .project-warning {
  color: var(--ink);
  background: var(--wash);
  border-color: var(--rule);
  border-radius: 3px;
}
.summary > div:first-child { border-color: var(--rule); }
.summary span, .summary strong, .palette-source-card strong,
.palette-source-card small, .migration-notice strong, .migration-notice p,
.project-warning strong, .project-warning p { color: var(--ink); }
.palette-item { border-radius: 2px; }
.palette-item:hover, .palette-item.selected { background: var(--wash); }
.palette-item.selected { border-color: var(--ink); }
.palette-item .code, .palette-item .color-name { color: var(--ink); }
.swatch, .stitch-info-swatch, .stitch-color-swatch {
  border: 1px solid var(--ink);
  border-radius: 2px;
}
.export-button {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.export-button:hover { color: var(--ink); background: var(--wash); border-color: var(--ink); }
.export-button strong { color: var(--ink); }
.page-footer a { text-decoration-thickness: 1px; }

.stitch-dialog, .subject-dialog, .stitch-replace-dialog, dialog {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 5px;
  box-shadow: 5px 6px 0 #24242455;
}
.stitch-dialog::backdrop, .subject-dialog::backdrop, dialog::backdrop { background: #111a; }
.stitch-shell, .subject-shell, .stitch-palette, .subject-footer,
.stitch-replace-heading, .stitch-replace-footer { background: var(--paper); border-color: var(--rule); }
.stitch-focus-info, .stitch-focus-info strong, .stitch-palette-heading strong,
.stitch-palette-heading small, .stitch-cell-info,
.subject-header p, .subject-footer span, .stitch-region-switch,
.stitch-region-size, .stitch-region-controls #stitchRegionProgress,
.stitch-replace-dialog p, .stitch-replace-search,
.stitch-replace-footer span { color: var(--ink) !important; }
.stitch-color, .stitch-replace-choice {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.stitch-color:hover, .stitch-replace-choice:hover { background: var(--wash); }
.stitch-color.active, .stitch-replace-choice[aria-pressed=true] {
  color: var(--ink);
  background: var(--wash);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 #24242435;
}
.stitch-region-controls select { color: var(--ink); background: var(--paper); border-color: var(--rule); }
.toast { color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 3px; }

@media (max-width: 760px) {
  .stitch-dialog, .subject-dialog { border: 0; border-radius: 0; box-shadow: none; }
  .stitch-shell { background: var(--paper); }
}