/* ==========================================================================
   BUMASS.STORE — base.css
   Design tokens, reset, typography, accessibility primitives.
   Everything visual downstream is built out of the variables in :root.
   ========================================================================== */

:root {
  /* --- Surfaces (Win9x system palette) ------------------------------- */
  --face:        #c0c0c0;
  --face-dim:    #a9a9a9;
  --hilite:      #ffffff;
  --light:       #dfdfdf;
  --shadow:      #808080;
  --shadow-deep: #0a0a0a;

  /* --- Ink ----------------------------------------------------------- */
  /* Muted/disabled inks are darker than the era would have used: these
     labels carry real information, so they clear 4.5:1 on --face. */
  --ink:         #000000;
  --ink-soft:    #3b3b3b;
  --ink-mute:    #474747;
  --ink-dis:     #4a4a4a;

  /* --- Title bars ---------------------------------------------------- */
  /* cap-a-2 is a shade darker than the authentic #1084d0, which only made
     4.0:1 with white caption text at the light end of the gradient. */
  --cap-a-1: #000080;
  --cap-a-2: #0e78c4;
  --cap-i-1: #6b6b6b;
  --cap-i-2: #8f8f8f;
  --cap-ink: #ffffff;

  /* --- Wells / fields ------------------------------------------------ */
  --well:     #ffffff;
  --well-alt: #f2f2ea;
  --sel:      #000080;
  --sel-ink:  #ffffff;

  /* --- Signal colours ------------------------------------------------ */
  --go:      #12b312;
  --go-lit:  #4dff4d;
  --warn:    #ffd400;
  --danger:  #9e0000;
  --danger-lit: #ff2a2a;
  --info:    #000080;

  /* --- Terminal ------------------------------------------------------ */
  --term-bg:  #000000;
  --term-ink: #2bff2b;
  --term-dim: #0f8a0f;

  /* --- Desktop ------------------------------------------------------- */
  --desk:     #0b6a6a;
  --desk-deep:#054747;

  /* --- Links --------------------------------------------------------- */
  --link:     #0000ee;
  --link-vis: #551a8b;

  /* --- Focus --------------------------------------------------------- */
  --focus: #000000;

  /* --- Bevels (the whole aesthetic lives here) ----------------------- */
  --bevel-out:
    inset -1px -1px 0 0 var(--shadow-deep),
    inset  1px  1px 0 0 var(--hilite),
    inset -2px -2px 0 0 var(--shadow),
    inset  2px  2px 0 0 var(--light);
  --bevel-in:
    inset  1px  1px 0 0 var(--shadow-deep),
    inset -1px -1px 0 0 var(--hilite),
    inset  2px  2px 0 0 var(--shadow),
    inset -2px -2px 0 0 var(--light);
  --bevel-well:
    inset  1px  1px 0 0 var(--shadow),
    inset -1px -1px 0 0 var(--hilite),
    inset  2px  2px 0 0 var(--shadow-deep),
    inset -2px -2px 0 0 var(--light);
  --bevel-thin-out:
    inset -1px -1px 0 0 var(--shadow),
    inset  1px  1px 0 0 var(--hilite);
  --bevel-thin-in:
    inset  1px  1px 0 0 var(--shadow),
    inset -1px -1px 0 0 var(--hilite);

  /* --- Type ---------------------------------------------------------- */
  --ui: Tahoma, "Segoe UI", Verdana, Geneva, "DejaVu Sans", sans-serif;
  --mono: "Lucida Console", "Courier New", Courier, monospace;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;

  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-lg:  15px;

  /* --- Metrics ------------------------------------------------------- */
  --gap:      12px;
  --gap-sm:    8px;
  --pad:      10px;
  --taskbar-h: 34px;
  --tap:      44px;   /* minimum touch target */
  --max:     1180px;
}

/* Effects kill switch — flipped by the tray toggle, persisted to storage. */
html[data-fx="off"] {
  --fx-scanline: 0;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--face) var(--face-dim);
  /* Safety net for decorative overflow. `clip` rather than `hidden` so it
     does not turn the root into a scroll container and kill position:sticky. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ui);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--desk);
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.07)      0 2px, transparent 2px 4px);
  /* Room for the fixed taskbar so nothing hides behind it. */
  padding-bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, canvas { max-width: 100%; height: auto; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

table { border-collapse: collapse; border-spacing: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  font-size: 1em;
}

a {
  color: var(--link);
  text-decoration: underline;
}
a:visited { color: var(--link-vis); }
a:hover   { text-decoration: none; background: var(--warn); color: #000; }

p + p { margin-top: .7em; }

code, kbd, samp, pre { font-family: var(--mono); font-size: var(--fs-sm); }

hr {
  border: 0;
  height: 2px;
  box-shadow: var(--bevel-thin-in);
  margin: var(--gap) 0;
}

/* Small caps-y label text used all over the chrome. */
.label {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.mono { font-family: var(--mono); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
  outline: 2px dotted var(--focus);
  outline-offset: 2px;
}

/* Skip link — visually hidden until focused, then a real Win98 button. */
.skip {
  position: fixed;
  top: 6px;
  left: 6px;
  z-index: 9999;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--face);
  box-shadow: var(--bevel-out);
  transform: translateY(-200%);
}
.skip:focus {
  transform: translateY(0);
  background: var(--warn);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* The joke never outranks the vestibular system. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Same treatment when the reader hits the FX switch in the taskbar. One rule,
   so no new animation can be added later and quietly escape the toggle. */
html[data-fx="off"] *,
html[data-fx="off"] *::before,
html[data-fx="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
}

/* Printing this would be a choice, but it should still work. */
@media print {
  body { background: #fff; padding: 0; }
  .taskbar, .crt, .adbar, .marquee { display: none !important; }
}