/* RetroOS - Authentic Windows 95 / 98 Design System */
:root {
  /* Iconic Windows 95 Color Palette */
  --win-bg: #008080;                /* Classic Desktop Teal */
  --win-face: #c0c0c0;              /* 3D UI Surface Gray */
  --win-light: #ffffff;             /* Top/Left 3D Highlight Edge */
  --win-dark: #808080;              /* Inner Shadow Edge */
  --win-darker: #000000;            /* Pure Black Outer Shadow Edge */
  --win-title-active: linear-gradient(90deg, #000080 0%, #1084d0 100%); /* Active Win95 Blue */
  --win-title-inactive: #808080;    /* Inactive Gray Titlebar */
  --win-text: #000000;              /* UI Pure Black Text */
  --win-text-active: #ffffff;       /* Titlebar Active White Text */
  --win-text-disabled: #808080;     /* Muted Disabled Text */
  --win-selection: #000080;         /* Win95 Selection Blue */

  /* Legacy Compatibility Variables mapped to Win95 */
  --bg-dark: var(--win-bg);
  --surface: var(--win-face);
  --surface-raised: var(--win-face);
  --surface-dark: #e0e0e0;
  --accent-steel: #000080;
  --accent-grape: #1084d0;
  --accent-sand: #000000;
  --accent-ash: #808080;
  --accent-orchid: #000080;
  --border-bevel-light: var(--win-light);
  --border-bevel-dark: var(--win-dark);
  --border-bevel-darker: var(--win-darker);
  --crt-color: #008080;
  --theme-bg: var(--win-bg);
  --color-sand-dune: #000000;
  --color-ash-grey: #808080;
  --color-steel-blue: #000080;
  --color-dusty-grape: #1084d0;
  --color-velvet-orchid: #000080;

  /* Fonts */
  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'VT323', monospace;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--win-bg);
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--win-text);
  user-select: none;
  -webkit-user-select: none;
}

.hidden {
  display: none !important;
}

/* Classic Windows 95 3D Scrollbars */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: #dfdfdf;
  background-image: repeating-linear-gradient(45deg, #c0c0c0 25%, transparent 25%, transparent 75%, #c0c0c0 75%, #c0c0c0), repeating-linear-gradient(45deg, #c0c0c0 25%, #ffffff 25%, #ffffff 75%, #c0c0c0 75%, #c0c0c0);
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--win-face);
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-right: 2px solid var(--win-darker);
  border-bottom: 2px solid var(--win-darker);
  box-shadow: inset -1px -1px 0px var(--win-dark);
}

::-webkit-scrollbar-thumb:active {
  border-top: 2px solid var(--win-darker);
  border-left: 2px solid var(--win-darker);
  border-right: 2px solid var(--win-light);
  border-bottom: 2px solid var(--win-light);
  box-shadow: inset 1px 1px 0px var(--win-dark);
}