/* White theme: calm surfaces, clear text, and one blue action color. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #17253d;
  --muted: #52627a;
  --dim: #5f6e82;
  --panel: #ffffff;
  --panel2: #f7f9fc;
  --line: #e2e8f0;
  --accent: #2563eb;
  --accent2: #087f6c;
  --danger: #c7354f;
  --shadow: 0 4px 24px rgba(25, 44, 76, .045);
}

body { background: var(--bg); color: var(--ink); }
.shell { padding-top: 44px; }
.hero { padding-bottom: 30px; }
.eyebrow { color: #087f6c; letter-spacing: .04em; }
.pulse { background: #10a38a; box-shadow: 0 0 0 4px #e9f8f3; }
h1 { color: #17253d; letter-spacing: -.035em; }
.hero-copy { color: #607089; font-size: 15px; line-height: 1.75; max-width: 590px; }
.hero-tags span { background: #f6f8fb; border-color: #e5ebf2; color: #52627a; }

/* Navigation has one unmistakable selected state. */
.mode-switch { background: #f3f6fa; border-color: #e7ecf3; padding: 5px; gap: 5px; }
.mode-btn { border-color: transparent; background: transparent; color: #52627a; padding: 9px 17px; }
.mode-btn:hover { background: #e8eef8; color: #1d4ed8; }
.mode-btn.active, .mode-btn[aria-pressed="true"] {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .16);
}
.mode-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.step { background: #f8fafc; border-color: #e5ebf2; }
.step.active { background: #eff6ff; border-color: #bdd5fc; }
.step b { color: #2563eb; }
.step strong { color: #334155; }
.step small { color: #5f6e82; }

/* Working surfaces and editable controls. */
.panel { background: #ffffff; border-color: #e2e8f0; border-radius: 18px; box-shadow: var(--shadow); }
.panel-heading h2 { color: #17253d; font-size: 17px; }
.panel-heading p { color: #5f6e82; }
.field > label { color: #334155; font-weight: 600; }
.field small { color: #5f6e82; font-size: 11px; line-height: 1.55; }
input, select { background: #ffffff; border-color: #dce4ee; color: #24344e; }
input::placeholder { color: #5f6e82; }
input:focus, select:focus { border-color: #7aa7fa; box-shadow: 0 0 0 3px #edf4ff; }
.input-with-hint, .unit-input { background: #f8fafc; border-color: #dce4ee; }
.input-with-hint:focus-within, .unit-input:focus-within { border-color: #7aa7fa; box-shadow: 0 0 0 3px #edf4ff; }
.input-with-hint input, .unit-input input { background: transparent; color: #24344e; box-shadow: none; }
.input-with-hint span, .unit-input span { color: #5f6e82; white-space: nowrap; }
.sub-fields { background: #f8fafc; border-color: #e2e8f0; }
.checkmark { background: #ffffff; border-color: #b7c5d8; }
.check-label input:checked + .checkmark { background: #2563eb; border-color: #2563eb; }
.check-label input:checked + .checkmark::after { color: #ffffff; }
.color-options input, .range-line input { accent-color: #2563eb; }
.ghost-btn { background: #ffffff; border-color: #dce4ee; color: #52627a; }
.ghost-btn:not(:disabled):hover { background: #f8fafc; border-color: #8baff6; color: #1d4ed8; }
.ghost-btn:disabled { opacity: .55; }
.primary-btn { background: #2563eb; color: #ffffff; box-shadow: 0 3px 9px rgba(37, 99, 235, .15); }
.primary-btn:hover:not(:disabled) { background: #1d4ed8; box-shadow: 0 5px 14px rgba(37, 99, 235, .2); }
.primary-btn:focus-visible { outline: 3px solid #b6d0fd; outline-offset: 3px; }
.primary-btn:disabled { background: #e7edf5; color: #8693a6; opacity: 1; box-shadow: none; }
.tip { background: #f0faf6; border-color: #d3eee1; }
.tip span { border-color: #69bba1; color: #087f6c; }
.tip p { color: #337362; }
.status { color: #52627a; }
.status.success { color: #087f5b; }
.status.error { color: #b4233f; }
.status.busy { color: #1d4ed8; }

/* Materials: white panels and a clearly bounded queue. */
.drop-zone { background: #f6f9ff; border-color: #bbd0f3; color: #334d72; }
.drop-zone:hover, .drop-zone.dragging { background: #edf4ff; border-color: #75a4f4; }
.drop-zone small { color: #5f6e82; }
.upload-icon { background: #e7f0ff; color: #2563eb; }
.empty-list { background: #fafbfd; border-color: #e5ebf2; }
.empty-state span { color: #9aabc1; }
.empty-state p { color: #52627a; }
.empty-state small { color: #5f6e82; }
.file-row { border-color: #edf1f6; }
.file-no { color: #5f6e82; }
.file-name { color: #24344e; }
.file-sub, .file-size { color: #5f6e82; }
.file-type { color: #087f6c; }
.remove-btn { color: #5f6e82; }
.remove-btn:hover { color: #b4233f; }
.trust-row > div { background: #ffffff; border-color: #e5ebf2; }
.trust-row strong { color: #334155; }
.trust-row small { color: #5f6e82; }
.trust-icon { background: #edf4ff; color: #2563eb; }

/* Photo, image, and page-layout previews use a light transparency grid. */
.photo-preview-wrap, .image-editor-preview {
  background: repeating-conic-gradient(#f0f3f8 0 25%, #ffffff 0 50%) 0 / 22px 22px;
  border-color: #cad5e4;
}
.pl-preview { background: #f8fafc; border-color: #cad5e4; }
.photo-empty, .image-empty, .pl-empty { color: #52627a; }
.photo-empty strong, .image-empty strong, .pl-empty strong { color: #334155; }
.photo-empty span, .image-empty span, .pl-empty span { color: #7194c7; }
.photo-empty small, .image-empty small, .pl-empty small { color: #5f6e82; }
.photo-canvas, .image-canvas, .pl-canvas { box-shadow: 0 6px 22px rgba(25, 44, 76, .14); }
.photo-upload, .image-upload, .pdf-upload, .pl-upload {
  color: #28578f;
  background: #f8fbff;
  border-color: #c5d7f1;
}
.photo-upload:hover, .image-upload:hover, .pdf-upload:hover, .pl-upload:hover { background: #edf4ff; border-color: #7aa7fa; }
.photo-upload small, .image-upload small, .pdf-upload small, .pl-upload small { color: #5f6e82; }
.photo-note, .image-note { background: #f7f9fc; border: 1px solid #e9eef5; color: #637288; }
.pl-note { color: #637288; }
.color-options label { color: #52627a; }
.color-dot { box-shadow: 0 0 0 1px #cbd5e1; }
.local-pill { color: #087f6c; background: #effaf5; border-color: #caecdc; }
.range-line span { color: #52627a; }

/* PDF deletion: selected pages remain visibly red against white. */
.pdf-empty { background: #fafbfd; color: #5f6e82; border-color: #e5ebf2; }
.pdf-empty span { color: #7194c7; }
.pdf-empty strong { color: #52627a; }
.pdf-toolbar strong { color: #24344e; }
.pdf-toolbar span { color: #5f6e82; }
.pdf-page-card { background: #f8fafc; border-color: #dce4ee; }
.pdf-page-card:hover { background: #eff6ff; border-color: #86adf4; }
.pdf-page-card.marked { background: #fff1f3; border-color: #eb8d9d; }
.pdf-page-card.marked:hover { background: #ffe8ed; border-color: #d96680; }
.pdf-page-preview { background: linear-gradient(145deg, #ffffff, #edf3fc); color: #526885; border: 1px solid #e5ebf2; }
.pdf-page-meta { color: #334155; }
.pdf-page-meta small { color: #5f6e82; }

footer { color: #5f6e82; border-top: 1px solid #edf1f6; padding-top: 18px; font-size: 11px; }
footer span { color: #5f6e82; }

@media (max-width: 780px) {
  .shell { padding-top: 28px; }
  .hero-copy { font-size: 14px; }
  .mode-btn { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .primary-btn { transition: none; }
}