@layer theme {
  :where(html) {
    color-scheme: light;

    /* Windows 95 Color Palette */
    --win95-teal: #008080;
    --win95-silver: #c0c0c0;
    --win95-dark-gray: #808080;
    --win95-white: #ffffff;
    --win95-black: #000000;
    --win95-blue: #000080;
    --win95-light-gray: #dfdfdf;

    /* Primary Colors */
    --primary: var(--win95-teal);
    --primary-light: #00a0a0;
    --primary-dark: #006060;
    --primary-contrast: var(--win95-white);

    /* Text */
    --text-color-1: var(--win95-black);
    --text-color-2: var(--win95-black);

    /* Surface */
    --surface-default: var(--win95-teal);
    --surface-filled: var(--win95-silver);
    --surface-tonal: var(--win95-light-gray);
    --surface-elevated: var(--win95-white);

    /* Borders */
    --border-color: var(--win95-dark-gray);
    --border-radius: 0px;
    --border-width: 2px;

    /* Fields & Buttons */
    --field-border-color: var(--border-color);
    --field-border-radius: 0px;
    --field-border-width: 2px;
    --button-border-radius: 0px;

    /* Fonts */
    --font-sans: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    
    /* Windows 95 3D Effects */
    --inset-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
    --outset-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #dfdfdf, inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff;
    --window-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #dfdfdf, inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff;
  }
}


body {
  font-family: var(--font-sans);
  font-size: 11px;
  background: var(--surface-default);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  cursor: default;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  height: 100%;
}