/* Load last. These tokens belong to application chrome, never to artwork,
   custom paper/desk colors, image pixels, or the color wheel itself. */
:root{--ui-ink:#111;--ui-muted:#666;--ui-faint:#888;--ui-line:#00000010;--ui-tray:#0000000a;--ui-white:#fff}

.glass,.panel,.modal,.overview-dialog,.paper-image-opacity,.text-box-toolbar{
  color:var(--ui-ink);color-scheme:light;
  background:linear-gradient(135deg,#ffffffeb,#ffffffd6);
  border-color:#ffffffc9;
  box-shadow:0 0 0 1px #0000000d,inset 0 1px 0 #fffffff2,0 8px 32px #0000001a,0 4px 16px #0000000f;
}
.panel-heading,.modal-heading,.page-overview-header,.panel-footer{border-color:var(--ui-line)}
.panel h2,.modal h2,.page-overview-header h2,.account-email,.setting-value{color:var(--ui-ink)}
.setting-label,.modal-body>label,.color-controls label,.range-fields label,
.panel-note,.small-note,.account-link,.search-result span,.page-overview-subtitle,
.page-overview-current,.page-overview-empty{color:var(--ui-muted)}

.segments{background:var(--ui-tray)}
.segments button{color:var(--ui-muted)}
.segments button:hover{color:var(--ui-ink)}
.segments button[aria-pressed=true]{color:var(--ui-ink);background:var(--ui-white);box-shadow:0 2px 8px #00000012}
.panel-footer button{color:#444;background:var(--ui-tray)}
.panel-footer button:hover,.secondary-button:hover{background:#00000010}
.secondary-button{color:var(--ui-ink);background:#ffffffb3;border-color:#00000018}
.primary-button,.modal .primary-button,.glass .primary-button{color:#fff;background:#111}
.primary-button:hover,.modal .primary-button:hover,.glass .primary-button:hover{background:#000}

.panel input:not([type=color]):not([type=range]),.modal input:not([type=color]):not([type=range]):not([type=file]),
.modal select,.glass select{color:var(--ui-ink);background:#ffffffcc;border-color:#00000014}
.panel input:not([type=color]):not([type=range]):focus,.modal input:not([type=color]):not([type=range]):focus,
.modal select:focus,.glass select:focus{box-shadow:0 0 0 2px #0000001a}
.color-controls input[type=color]{background:#ffffffb3;border-color:#00000014}
input::placeholder,textarea::placeholder{color:#888}
input[type=file]::file-selector-button{font:inherit;color:#111;background:#fff;border:1px solid #00000018;border-radius:9px;padding:8px 11px;margin-right:10px}
input[type=checkbox],input[type=radio]{accent-color:#111}

.tool-tray{background:#0000000a;border-color:#00000010}
.tool-tray .selected,.tool-tray .selected:hover{color:#111;background:#fff}
.circle.selected,.dark .circle.selected{color:#111;background:#fff;box-shadow:0 2px 10px #00000012,inset 0 1px 0 #fff}
.dark .tool-tray{background:#ffffff10;border-color:#ffffff33}
.tool-divider{background:currentColor}
.quiet-button:hover{background:#0000000a}
.dark .quiet-button:hover{background:#ffffff1a}
#cloud-status[data-state=conflict],#cloud-status[data-state=error],#cloud-status[data-state=offline]{color:var(--rail-ink,#111)}
#toast{color:#fff;background:#111111f2;box-shadow:0 4px 16px #0000001a}
#save-warning{color:#111;background:#fffffff2;border-color:#00000040;box-shadow:0 3px 14px #00000012}
#save-warning button{color:#111}

.paper-image-opacity{color:#111}
.paper-image-opacity label,.paper-image-opacity output{color:#444}
.paper-image.paper-image-selected{outline-color:#111}
.paper-image-resize>span{background:#fff;border-color:#111;box-shadow:0 1px 4px #00000020}
.text-box-boundary{border-color:#00000040}
.text-box-surface .text-box.is-selected{outline-color:#111}
.text-box-handle::after,.text-box-rotation-handle::after{background:#fff;border-color:#111;box-shadow:0 1px 3px #0000001a}
.text-box-toolbar{color:#111}
.text-box-toolbar button{color:#111}
.text-box-toolbar button:hover{background:#0000000a}
.page-overview-card,.page-overview-caption{color:#444}
.page-overview-card[aria-current=page] .page-overview-preview{outline-color:#111}
.page-overview-current{background:#00000007}
.page-overview-close{color:#111;background:#ffffff99}
.page-overview-close:hover{background:#fff}
.page-overview-image-placeholder{color:#888;border-color:#00000030}
/* These labels sit directly on the user's desk, rather than on white chrome. */
.page-overview .page-overview-header h2,.page-overview .page-overview-card,
.page-overview .page-overview-caption,.page-overview .page-overview-subtitle,
.page-overview .page-overview-current,.page-overview .page-overview-empty{color:var(--rail-ink,#111)}
.page-overview .page-overview-current{background:transparent}
.dark .page-overview :is(button,a):focus-visible{outline-color:#fff!important}
.page-overview .page-overview-card[aria-current=page] .page-overview-preview{outline-color:var(--rail-ink,#111)}

/* A 24px input hit area surrounds a 2px black track. Native color inputs and
   canvas/SVG color wheels are deliberately outside these range-only rules. */
input[type=range],.panel input[type=range],.modal input[type=range],.paper-image-opacity input[type=range]{
  -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box;
  width:100%;height:24px!important;min-height:24px;padding:0!important;margin:0;
  border:0!important;border-radius:0!important;accent-color:#111!important;
  background:linear-gradient(#111,#111) center/100% 2px no-repeat!important;
  background-color:transparent!important;box-shadow:none!important;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  -webkit-appearance:none;height:2px;border:0;border-radius:1px;
  background:#111!important;background-image:none!important;box-shadow:none!important;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box;
  width:18px;height:18px;margin-top:-8px;border:1px solid #00000010;border-radius:50%;
  background:#fff!important;box-shadow:0 2px 5px #00000020,0 1px 2px #00000012!important;
}
input[type=range]::-moz-range-track{
  height:2px;border:0;border-radius:1px;background:#111!important;
  background-image:none!important;box-shadow:none!important;
}
input[type=range]::-moz-range-progress{height:2px;border:0;border-radius:1px;background:#111!important}
input[type=range]::-moz-range-thumb{
  appearance:none!important;box-sizing:border-box;width:18px;height:18px;
  border:1px solid #00000010;border-radius:50%;background:#fff!important;
  box-shadow:0 2px 5px #00000020,0 1px 2px #00000012!important;
}
input[type=range]:disabled{cursor:default;opacity:.35}
:is(button,input,select,a,[tabindex]):focus-visible{outline-color:#111!important}
.text-box-toolbar button:focus-visible,.text-box-rotation-handle:focus-visible,
.page-overview-close:focus-visible,.page-overview-card:focus-visible{outline-color:#111}
@media(any-pointer:coarse){
  input[type=range],.panel input[type=range],.modal input[type=range],.paper-image-opacity input[type=range]{height:28px!important;min-height:28px}
}
@media(prefers-reduced-transparency:reduce){
  .glass,.panel,.modal,.overview-dialog,.paper-image-opacity,.text-box-toolbar{background:#fff;backdrop-filter:none}
}