/* DESIGN TOKENS
   palette: desktop teal #008080, window face #c0c0c0, bevel light #fff/#dfdfdf, bevel dark #808080/#000,
            titlebar gradient #000080 -> #1084d0, canvas white, accent lime #CCFF00 (palette swatch + active tool ring only)
   type: Pixelify Sans (chrome/menu/toolbar), JetBrains Mono (CA + coordinate readout, real case)
   spacing: 2px bevel borders, 4px/8px paddings
   radius: 0 everywhere (authentic OS chrome)
   motion: cursor swap on tool click + live coordinate readout, nothing else
*/

@font-face { font-family: 'Pixelify Sans'; src: url('assets/fonts/pixelify-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('assets/fonts/pixelify-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('assets/fonts/pixelify-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #008080;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelify Sans', sans-serif;
}

.win-raised {
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px 0 1px #808080, inset 1px 1px 0 1px #dfdfdf;
  background: #c0c0c0;
}
.win-sunken {
  border: 2px solid;
  border-color: #000 #fff #fff #000;
  box-shadow: inset -1px -1px 0 1px #dfdfdf, inset 1px 1px 0 1px #808080;
  background: #c0c0c0;
}

.paint-window {
  width: min(96vw, 900px);
  aspect-ratio: 6 / 5;
  max-height: 94vh;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset -1px -1px 0 1px #808080, inset 1px 1px 0 1px #fff, 6px 6px 0 rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
}

.titlebar {
  height: 26px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, #000080, #1084d0 65%, #1084d0);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.titlebar-icon { flex: 0 0 auto; }
.titlebar-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titlebar-controls { display: flex; gap: 3px; flex: 0 0 auto; }
.win-btn {
  width: 18px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.win-btn:active { border-color: #000 #fff #fff #000; box-shadow: inset -1px -1px 0 1px #dfdfdf, inset 1px 1px 0 1px #808080; }

.menubar {
  flex: 0 0 auto;
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  display: flex;
  gap: 14px;
  padding: 3px 8px;
  font-size: 12px;
}
.menubar span { color: #000; }

.workspace {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.toolbox {
  flex: 0 0 auto;
  width: 60px;
  background: #c0c0c0;
  border-right: 1px solid #808080;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 3px;
  align-content: start;
}
.tool {
  width: 26px;
  height: 24px;
  padding: 0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px 0 1px #808080, inset 1px 1px 0 1px #dfdfdf;
  background: #c0c0c0;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tool:active, .tool.active {
  border-color: #000 #fff #fff #000;
  box-shadow: inset -1px -1px 0 1px #dfdfdf, inset 1px 1px 0 1px #808080, 0 0 0 1px #CCFF00 inset;
}

.canvas-area {
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid #000;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.drawing {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.palette {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 24px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
}
.swatch { border: 1px solid rgba(0,0,0,0.25); }

.statusbar {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 3px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.status-cell {
  padding: 2px 8px;
  color: #000;
}
.ca-cell {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  border: none;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}
.ca-cell:hover { background: #d8d8d8; }
#caLabel { font-family: 'Pixelify Sans', sans-serif; font-size: 11px; flex: 0 0 auto; }
#caValue {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coord-cell {
  flex: 0 0 auto;
  min-width: 84px;
  text-align: right;
}

@media (max-width: 640px) {
  .paint-window { width: 100vw; max-height: 100vh; }
  .toolbox { width: 50px; }
  .tool { width: 21px; height: 20px; }
  .titlebar-text { font-size: 11px; }
  .palette { grid-template-columns: repeat(14, 1fr); }
  .statusbar { font-size: 10px; }
  #caLabel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}