/* Shared appearance for the designer and its embedded documents.
   Follow the OS/browser preference, including changes while the page is open.
   Artwork colours, materials and exported files are independent of this theme. */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edf0f2;
    --muted: #aab3bd;
    --line: #414b56;
    --panel: #20262d;
    --paper: #151a20;
    --accent: #ff8089;
    --shadow: 0 18px 55px rgba(0, 0, 0, .28);
    --surface: #29323c;
    --field: #181f27;
    --hover: #35414d;
    --disabled: #7f8995;
    --accent-fill: #b3131b;
    --accent-soft: #3c252d;
  }

  /* Main canvas surround and cards. The WebGL scene remains unchanged. */
  body { background: radial-gradient(circle at 10% 0, #27313b 0, transparent 28rem), var(--paper); }
  .viewer-card, .controls-card, .url-card { border-color: var(--line); }
  #viewer { background: radial-gradient(ellipse at center, #46515e 0, #2d3640 58%, #202730 100%); }
  .version-mark { color: #aab3bd; text-shadow: 0 -1px 1px #000, 0 1px 1px #414b56; }
  .viewer-hint, .model-switch { color: var(--muted); }
  .status i { background: #67d394; box-shadow: 0 0 0 4px #233c30; }
  .expired-notice { background: #3d321e; border-color: #76623b; color: #f5d17d; }
  .viewer-footer #viewerNotifications.is-warning { color: var(--accent); }

  /* Inputs, selection states and keyboard focus. */
  button, input, select, textarea { color: inherit; }
  .text-input-group > input[type="text"], .field input, .field select,
  .font-field select, .svg-options select, .share-actions > input,
  .svg-export-options select { background: var(--field); color: var(--ink); }
  .text-input-group > input[type="text"]:focus, .field input:focus,
  .field select:focus, .font-field select:focus, .share-actions > input:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
  .segmented, .type-editor, .file-button { background: var(--surface); }
  .segmented span { color: var(--muted); }
  .segmented input:checked + span { background: var(--hover); color: var(--ink); }
  .segmented input:focus-visible + span, .swatches input:focus-visible + i {
    outline: 2px solid var(--accent); outline-offset: 3px;
  }
  .alignment-buttons button { background: var(--field); color: var(--muted); }
  .alignment-buttons button:hover { background: var(--hover); color: var(--ink); }
  .alignment-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .split-visual div { background: var(--surface); border-color: var(--line); color: var(--ink); }
  .upload-box { border-color: #677583; }
  .swatches i { border-color: var(--panel); }
  .field input:disabled, .editor-tabs button:disabled {
    background: var(--surface); color: var(--disabled);
  }
  .quiet-button:disabled { color: var(--disabled); }

  /* Button fills are separate from the brighter accent used for text. */
  .toolbar-button { border-color: var(--line); background: var(--surface); color: var(--ink); }
  .toolbar-button:hover { border-color: #71808f; background: var(--hover); color: var(--ink); }
  .primary-button { background: #e0e6eb; color: #151a20; }
  .create-own-button:hover { background: #fff; color: #151a20; }
  .primary-button.copied { background: #287747; color: #fff; }
  .export-button, .toolbar-button-primary {
    background: var(--accent-fill); border-color: #cc414a; color: #fff;
  }
  .toolbar-button-primary:hover { background: #ca222d; border-color: var(--accent); color: #fff; }
  .primary-button:disabled, .export-button:disabled, .toolbar-button:disabled {
    background: var(--surface); border-color: var(--line); color: var(--disabled); box-shadow: none;
  }
  .model-switch i { background: #677583; }
  .model-switch input:checked + i { background: var(--accent-fill); }
  #social-links a:hover { background: var(--accent-soft); }

  /* Sharing, exports, progress and resource dialogs. */
  .share-modal-card { background: var(--panel); border-color: var(--line); }
  .share-modal-close, .resource-dialog-header button { background: var(--surface); color: var(--ink); }
  .share-link-row input { background: var(--field); color: var(--ink); }
  .resource-dialog iframe { background: var(--panel); }
  .share-modal-backdrop, .resource-dialog::backdrop { background: rgba(0, 0, 0, .72); }
  .format-grid label:has(input:checked) { background: var(--accent-soft); }
  .format-grid label.is-fixed { background: var(--surface); border-color: #677583; }
  .export-progress-card > .export-wait-note, .export-status { background: var(--surface); color: var(--ink); }
  .export-status.success { background: #203b2e; color: #8de0af; }
  .export-status.error { background: #42252d; color: #ff9da5; }

  /* Standalone or embedded reference documents. */
  .default { background: var(--accent-soft); }
  .compatibility-table-wrap { background: var(--panel); }
  .compatibility-table thead th { background: var(--surface); color: var(--muted); }
  .compatibility-table tbody tr:nth-child(even):not(.compatibility-suggest-row) td { background: #252d36; }
  .compatibility-table tbody tr:hover:not(.compatibility-suggest-row) td { background: var(--hover); }
  .compatibility-suggest-row td { background: var(--surface); }
  .compatibility-status[data-status="0"] { background: #42252d; color: #ff9da5; }
  .compatibility-status[data-status="1"] { background: #35414d; color: #d2dae2; }
  .compatibility-status[data-status="2"] { background: #44371c; color: #f5d17d; }
  .compatibility-status[data-status="3"] { background: #203b2e; color: #8de0af; }
}

/* Keep paper output readable regardless of the device appearance. */
@media print {
  :root { color-scheme: light; --ink: #171a1d; --muted: #50565b; --line: #dfe2e4; --panel: #fff; --paper: #fff; --accent: #b3131b; --surface: #f2f3f3; --hover: #f2f3f3; --accent-soft: #ffe8ea; }
  html, body { background: #fff; color: #171a1d; }
  .compatibility-table tbody td { background: #fff !important; color: #171a1d; }
  .compatibility-status { background: #f2f3f3 !important; color: #171a1d !important; }
}