/* ============================================================
   theme.css — Design tokens + the Win98/XP "bevel engine"
   Authentic XP Luna chrome, gradients & polish.
   ============================================================ */

/* Embed Tahoma (the XP system UI font) so it looks right off-Windows too.
   Only the regular face ships; bold is browser-synthesized (faux-bold). */
@font-face {
  font-family: "Tahoma";
  src: url("../assets/Tahoma.ttf") format("truetype");
  font-weight: normal;   /* only the regular face ships → bold is synthesized */
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Surface colors (XP Luna face) --- */
  --silver: #ece9d8;        /* XP Luna control/window face */
  --silver-light: #f6f4ec;
  --white: #ffffff;
  --gray: #aca899;
  --gray-dark: #404040;
  --black: #0a0a0a;

  /* --- Bevel edge colors --- */
  --edge-light: #ffffff;
  --edge-face: #f1efe2;
  --edge-shadow: #aca899;
  --edge-dark: #716f64;

  /* --- XP Luna window frame --- */
  --luna-frame: #0a51e0;          /* the blue window frame */
  --luna-frame-edge: #001ca0;     /* dark outline around the frame */
  --luna-face: #ece9d8;

  /* --- XP Luna title bar gradients --- */
  --title-active: linear-gradient(180deg, #3d92f5 0%, #1b6fe8 6%, #0b56e2 14%, #0a52e0 44%, #0d5be6 80%, #1d72ec 90%, #0c57e2 94%, #0848d6 100%);
  --title-active-hi: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
  --title-active-flat: #0a52e0;
  --title-inactive: linear-gradient(180deg, #7ba2e7 0%, #7397e3 6%, #6e90da 25%, #6d8fda 56%, #6d8fda 81%, #92aae8 90%, #6d8fda 97%, #5e85d8 100%);
  --title-active-text: #ffffff;
  --title-inactive-text: #d6e2ff;

  /* --- XP control accents --- */
  --xp-btn-border: #003c74;
  --xp-field-border: #7f9db9;
  --xp-field-focus: #2e6bc6;

  /* --- Desktop / wallpaper --- */
  --desktop-teal: #3a8a8a;

  /* --- Taskbar (XP Luna blue) --- */
  --taskbar-grad: linear-gradient(180deg, #3168d5 0%, #2761d3 3%, #2c68d8 6%, #3a82e5 10%, #2a6ad9 14%, #2360d6 47%, #2059d2 90%, #2a66d8 94%, #2b75e3 97%, #1f53cd 100%);
  --taskbar-top-line: #0455e7;
  --start-grad: linear-gradient(180deg, #5eb04e 0%, #50a83f 8%, #429b32 40%, #2f8722 60%, #36912a 92%, #277a1c 100%);
  --start-grad-hover: linear-gradient(180deg, #6fc15f 0%, #5fb84e 40%, #3c9a2f 92%, #2f8722 100%);

  /* --- Accents --- */
  --select-blue: #0a64ad;
  --select-blue-soft: #316ac5;
  --link: #0033cc;

  /* CRT phosphor stripe colors (tray CRT toggle) */
  --crt-red: rgb(218, 49, 49);
  --crt-green: rgb(112, 159, 115);
  --crt-blue: rgb(40, 129, 206);

  /* --- Type --- */
  --ui-font: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --sys-font: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --title-font: "Trebuchet MS", Tahoma, "Segoe UI", sans-serif;
  --mono-font: "Lucida Console", "Courier New", monospace;

  --titlebar-h: 29px;
  --taskbar-h: 30px;
}

/* ---- Bevel helpers (classic 98.css technique) ---- */
.bevel-raised {
  box-shadow:
    inset -1px -1px var(--edge-dark),
    inset 1px 1px var(--edge-light),
    inset -2px -2px var(--edge-shadow),
    inset 2px 2px var(--edge-face);
}
.bevel-sunken {
  box-shadow:
    inset -1px -1px var(--edge-light),
    inset 1px 1px var(--edge-shadow),
    inset -2px -2px var(--edge-face),
    inset 2px 2px var(--edge-dark);
}
.bevel-thin-sunken {
  box-shadow:
    inset -1px -1px var(--edge-light),
    inset 1px 1px var(--edge-shadow);
}
.bevel-thin-raised {
  box-shadow:
    inset -1px -1px var(--edge-shadow),
    inset 1px 1px var(--edge-light);
}

/* ============================================================
   Base reset
   ============================================================ */
* { box-sizing: border-box; }
/* The [hidden] attribute must always win, even over class display rules */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* keep iOS from re-flowing our fixed-size UI on rotate, and drop the
     gray/blue flash that fires on every tap (we draw our own pressed states) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  overflow: hidden;
  background: #1a1a1a;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;   /* no rubber-band scroll exposing the page behind */
}
img { image-rendering: -webkit-optimize-contrast; }
button { font-family: var(--ui-font); }

/* Unstyled buttons: strip the native chrome (gray face/border) so it doesn't
   show as a box behind icons/menu items. Components re-add their own look. */
.unstyled {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
}

/* Real (raster) icons fill their fixed-size container, smoothly scaled */
.ico-img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; image-rendering: auto; pointer-events: none;
}

/* ============================================================
   Generic XP-Luna controls
   ============================================================ */
.win-btn,
.window-body button:not(.unstyled),
.dialog button {
  font-family: var(--ui-font);
  font-size: 13px;
  min-width: 73px;
  padding: 4px 12px;
  color: var(--black);
  border: 1px solid var(--xp-btn-border);
  border-radius: 3px;
  background: linear-gradient(180deg, #fdfdfc 0%, #f1efe3 45%, #e6e2d2 52%, #ecead9 90%, #dcd6c3 100%);
  box-shadow: inset 0 0 0 1px #fdfdfb, 0 1px 0 rgba(0,0,0,.04);
  cursor: pointer;
}
.win-btn:hover,
.window-body button:not(.unstyled):hover {
  border-color: var(--xp-btn-border);
  box-shadow: inset 0 0 0 1px #fdfdfb, inset 0 0 4px 1px #ffd271, 0 0 0 1px #e7a900;
}
.win-btn:active,
.window-body button:not(.unstyled):active,
.win-btn.is-active {
  background: linear-gradient(180deg, #d9d4c4 0%, #e7e3d4 40%, #efedde 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}
.win-btn:focus-visible,
.window-body button:focus-visible {
  outline: 1px dotted #2a2a2a;
  outline-offset: -4px;
}
/* default / primary button gets the XP blue keyline */
.win-btn.primary {
  font-weight: 400;
  box-shadow: inset 0 0 0 1px #fdfdfb, 0 0 0 1px #2360c9;
  border-color: #2360c9;
}

/* Text inputs / textareas (XP flat field) */
.win-input, .win-textarea, .window-body input[type="text"],
.window-body input[type="email"], .window-body textarea {
  font-family: var(--sys-font);
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--xp-field-border);
  border-radius: 0;
  padding: 3px 5px;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.06);
}
.win-input:focus, .window-body input:focus, .window-body textarea:focus {
  outline: none; border-color: var(--xp-field-focus);
}
.win-textarea, .window-body textarea { resize: none; }

/* Sunken inset panel (used for content wells) */
.well {
  background: #fff;
  box-shadow:
    inset -1px -1px var(--edge-light),
    inset 1px 1px var(--edge-shadow),
    inset -2px -2px var(--edge-face),
    inset 2px 2px var(--edge-dark);
}

/* Group box (fieldset look) */
.groupbox {
  border: 1px solid var(--edge-shadow);
  border-right-color: var(--edge-light);
  border-bottom-color: var(--edge-light);
  position: relative;
  padding: 14px 12px 12px;
  margin-top: 8px;
}
.groupbox > legend, .groupbox > .legend {
  position: absolute; top: -8px; left: 8px;
  background: var(--silver);
  padding: 0 4px;
  font-size: 12px;
}

/* ============================================================
   Retro scrollbars
   ============================================================ */
.scroll, .window-body {
  scrollbar-width: auto;
  scrollbar-color: var(--silver) var(--silver-light);
}
.window-body::-webkit-scrollbar,
.scroll::-webkit-scrollbar { width: 17px; height: 17px; }
.window-body::-webkit-scrollbar-track,
.scroll::-webkit-scrollbar-track {
  background:
    repeating-conic-gradient(#fff 0% 25%, #cfd3d7 0% 50%) 50% / 2px 2px;
}
.window-body::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-thumb {
  background: var(--silver);
  box-shadow:
    inset -1px -1px var(--edge-dark),
    inset 1px 1px var(--edge-light),
    inset -2px -2px var(--edge-shadow),
    inset 2px 2px var(--edge-face);
}
.window-body::-webkit-scrollbar-button,
.scroll::-webkit-scrollbar-button {
  background: var(--silver);
  height: 17px; width: 17px;
  box-shadow:
    inset -1px -1px var(--edge-dark),
    inset 1px 1px var(--edge-light),
    inset -2px -2px var(--edge-shadow),
    inset 2px 2px var(--edge-face);
}

/* Utility */
.row { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1 1 auto; }
a.win-link { color: var(--link); text-decoration: underline; cursor: pointer; }
a.win-link:hover { color: #ff3300; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}