/*
Variable names should follow the format

  - element
  - category
  - property
  - variant
  - state
  - scale

  --window-font-color-error-small
  --button-color-background-error-hover
*/

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("./fonts/ms-sans-serif/ms-sans-serif.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("./fonts/ms-sans-serif-bold/ms-sans-serif-bold.otf")
    format("opentype");
  font-weight: bold;
  font-style: normal;
}

:root {
  /* Base styles */
  --font-primary: "Pixelated MS Sans Serif", Verdana;
  --font-primary-letter-spacing: 0.05em;

  --font-size-100: 1rem;
  --font-size-200: calc((21 / 16) * 1rem);
  --font-size-300: calc((24 / 16) * 1rem);
  --font-size-400: calc((36 / 16) * 1rem);
  --font-size-500: calc((48 / 16) * 1rem);
  --font-size-600: calc((64 / 16) * 1rem);

  --cursor-default: url("cursors/default.svg") 0 0, default;
  --cursor-grab: url("cursors/grab.svg") 0 0, grab;
  --cursor-grabbing: url("cursors/grabbing.svg") 0 0, grabbing;
  --cursor-pointer: url("cursors/pointer.svg") 0 0, pointer;
  --cursor-wait: url("cursors/wait.svg") 0 0, wait;

  --font-weight-regular: 400;
  --font-weight-heavy: 600;

  --spacing-unit: 8px;

  --spacing-50: calc(var(--spacing-unit) / 2);
  --spacing-100: var(--spacing-unit);
  --spacing-150: calc(var(--spacing-unit) * 1.5);
  --spacing-200: calc(var(--spacing-unit) * 2);
  --spacing-300: calc(var(--spacing-unit) * 3);
  --spacing-400: calc(var(--spacing-unit) * 4);
  --spacing-500: calc(var(--spacing-unit) * 5);
  --spacing-600: calc(var(--spacing-unit) * 6);
  --spacing-700: calc(var(--spacing-unit) * 7);
  --spacing-800: calc(var(--spacing-unit) * 8);
  --spacing-1200: calc(var(--spacing-unit) * 12);
  --spacing-1600: calc(var(--spacing-unit) * 16);

  --color-black: hsl(0deg, 0%, 0%);
  --color-gray-300: hsl(0deg, 0%, 46%);
  --color-gray-400: hsl(0deg, 0%, 64%);
  --color-gray-500: hsl(0deg, 0%, 73%);
  --color-gray-550: hsl(0deg, 0%, 78%);
  --color-gray-600: hsl(42deg, 4%, 82%);
  --color-gray-700: hsl(45deg, 11%, 86%);
  --color-gray-800: hsl(36deg, 12%, 92%);
  --color-white: hsl(0deg, 0%, 96%);

  --color-red-100: hsl(22deg, 95%, 25%);
  --color-red-300: hsl(22deg, 95%, 34%);
  --color-red-500: hsl(22deg, 95%, 44%);
  --color-red-700: hsl(22deg, 95%, 56%);
  --color-red-900: hsl(22deg, 95%, 71%);

  --color-yellow-100: hsl(47, 100%, 31%);
  --color-yellow-300: hsl(47, 100%, 41%);
  --color-yellow-500: hsl(47, 100%, 50%);
  --color-yellow-700: hsl(47, 100%, 65%);
  --color-yellow-900: hsl(47, 100%, 77%);

  --color-blue-100: hsl(212deg, 50%, 27%);
  --color-blue-300: hsl(212deg, 50%, 40%);
  --color-blue-700: hsl(212deg, 100%, 64%);
  --color-blue-900: hsl(212deg, 50%, 79%);

  --blue-gradient: linear-gradient(
    90deg,
    var(--color-blue-100) 0%,
    var(--color-blue-700) 100%
  );

  --border-width: 2px;

  --border-light: var(--border-width) solid var(--color-gray-700);
  --border-medium: var(--border-width) solid var(--color-gray-400);
  --shadow-heavy: 2px 2px var(--color-black);

  --shadow-light: -1px -1px var(--color-white);
  --shadow-inset-light: inset 2px 2px var(--color-white);
  --shadow-inset-medium: inset -1px -1px var(--color-white),
    inset 2px 2px var(--color-gray-400);
  --shadow-inset-heavy: inset 1px 1px var(--color-black);

  --outline-color-focus: var(--color-blue-300);
  --outline-offset-focus: var(--spacing-50);

  --font-color: var(--color-black);

  --link-font-color: var(--color-blue-100);

  /* Element styles */
  --desktop-background: var(--color-blue-300);
  --desktop-icon-width: var(--spacing-1600);

  --desktop-icon-padding: var(--spacing-200);
  --desktop-icon-flex-gap: var(--spacing-100);
  --desktop-icon-text-size: var(--font-size-200);
  --desktop-icon-text-color: var(--color-white);
  --desktop-icon-text-color-focus: var(--color-white);
  --desktop-icon-text-padding: var(--spacing-50);
  --desktop-icon-text-outline-focus: 1px dotted var(--color-white);
  --desktop-icon-text-background-color-focus: var(--color-blue-100);

  --stack-spacing-top: var(--spacing-100);

  --button-color-background: var(--color-gray-550);
  --button-font-color: var(--color-black);
  --button-padding: var(--spacing-100) var(--spacing-150);
  --button-padding-small: var(--spacing-50);
  --button-padding-large: var(--spacing-200) var(--spacing-300);
  --button-font-weight: var(--font-weight-heavy);
  --button-shadow-light: -0.5px -0.5px 0 0.5px var(--color-white);
  --button-shadow-heavy: 0px 0px 0 1px var(--color-black);
  --button-small-shadow: var(--button-shadow-light), var(--button-shadow-heavy);
  --button-small-shadow-active: inset 0.5px 0.5px 0 var(--color-black),
    inset -0.5px -0.5px 0 var(--color-white),
    0px 0px 0 0.5px var(--color-gray-550);
  --button-outline-offset: 2px;
  --button-font-family: var(--font-primary);
  --button-font-size-large: var(--font-size-200);

  --button-border: var(--border-medium);
  --button-border-width: 1px 0 0 1px;
  --button-border-style: dotted;
  --button-border-color: var(--color-white);
  --button-border-color-active: var(--color-black);
  --button-shadow: -1px 0 var(--color-white), 0px -1px 0 var(--color-white),
    var(--shadow-heavy);
  --button-shadow-active: 1px 0 var(--color-white), 0px 1px 0 var(--color-white),
    var(--shadow-inset-heavy);

  --startup-progress-bar-width: min(600px, 90%);
  --startup-background: var(--color-black);

  --marquee-background: var(--color-yellow-500);
  --marquee-animation-duration: 15s;

  --taskbar-border: var(--border-medium);
  --taskbar-shadow: var(--shadow-inset-light), var(--shadow-heavy);
  --taskbar-color-background: var(--color-gray-600);
  --taskbar-height: var(--spacing-700);
  --taskbar-padding: var(--spacing-50);
  --taskbar-content-gap: var(--spacing-100);
  --taskbar-utility-bar-shadow: var(--shadow-inset-medium);

  --select-height: var(--spacing-400);
  --select-padding-inline: var(--spacing-100);
  --select-min-width: 184px;
  --select-border: var(--shadow-inset-heavy);

  --select-background-color: var(--color-white);
  --select-option-color-hover: var(--color-blue-100);

  --select-label-width: var(--spacing-1200);
  --select-label-min-width: fit-content;

  --select-border-top: 2px solid var(--color-black);
  --select-border-left: 2px solid var(--color-black);
  --select-border-bottom: 2px solid var(--color-gray-400);
  --select-border-right: 2px solid var(--color-gray-400);

  --start-menu-strip-background-gradient: linear-gradient(
    var(--color-blue-100) 0%,
    var(--color-blue-700) 100%
  );

  --start-menu-height: 200px;

  --start-menu-item-height: var(--spacing-500);
  --start-menu-item-padding: var(--spacing-100);
  --start-menu-item-gap: var(--spacing-150);
  --start-menu-background: var(--color-gray-600);
  --start-menu-background-hover: var(--color-blue-100);
  --start-menu-icon-size: var(--spacing-400);
  --start-menu-item-text-color-hover: var(--color-white);

  --progress-shadow: inset 0 -1px var(--color-white),
    inset 2px 2px var(--color-gray-400);
  --progress-height: 28px;
  --progress-border-right: 1px solid var(--color-white);
  --progress-contents-gap: calc(var(--spacing-50) / 2);

  --progress-unit-width: var(--spacing-150);
  --progress-unit-background: var(--color-blue-100);

  --text-field-padding-inline: var(--spacing-100);
  --text-field-border: var(--shadow-inset-heavy);
  --text-field-border-top: 2px solid black;
  --text-field-border-left: 2px solid black;
  --text-field-border-bottom: 2px solid var(--color-gray-400);
  --text-field-border-right: 2px solid var(--color-gray-400);
  --text-field-font-size: var(--font-size-100);
  --text-field-height: var(--spacing-400);

  --panel-border: var(--border-light);
  --panel-color-background: var(--color-gray-500);
  --panel-shadow: var(--shadow-inset-light), var(--shadow-heavy);

  --window-spacing-horizontal: var(--spacing-200);
  --window-width: 80ch;

  --window-topbar-heading-font-size: var(--font-size-100);
  --window-topbar-heading-color: var(--color-white);
  --window-topbar-heading-color-inactive: var(--color-gray-700);
  --window-topbar-background: var(--blue-gradient);
  --window-topbar-background-inactive: var(--color-gray-300);
  --window-topbar-height: 28px;

  --window-toolbar-item-color-background: var(--color-gray-550);

  --blue-screen-color-background: hsl(240deg, 100%, 24%);
  --blue-screen-font-weight: var(--font-weight-regular);
  --blue-screen-font-color: var(--color-white);
  --blue-screen-font-size: var(--font-size-200);
}

body {
  color: var(--font-color);
  background: var(--color-white);
  font-size: 1rem;
  font-family: var(--font-primary);
  line-height: 1.4;
  letter-spacing: var(--font-primary-letter-spacing);
}

::-webkit-scrollbar {
  width: var(--spacing-300);
  height: var(--spacing-300);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-550);
  border: var(--border-medium);

  border-bottom: 2px solid var(--color-gray-300);
  border-right: 2px solid var(--color-gray-300);
  border-top: 2px solid var(--color-gray-550);
  border-left: 2px solid var(--color-gray-550);
  box-shadow: var(--shadow-inset-light);
}

::-webkit-scrollbar-track {
  background: url(patterns/scroll-track.svg);
}

a {
  color: --color-blue-300;
}

a:hover {
  cursor: var(--cursor-pointer);
}

a:visited {
  color: purple;
}

/* Utilities */
.fixed-container {
  background: black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}