/* styles/tokens.css */

:root {
  /* Font Family - Comic Sans for maximum meme value */
  --font-ui: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive, sans-serif;

  /* Color Palette - Windows 95 Classic Gray & Teal colors */
  --color-surface-0: #008080;      /* Classic Teal background */
  --color-surface-1: #c0c0c0;      /* Standard light gray window body */
  --color-surface-2: #dfdfdf;      /* Light gray for highlight edges / fields */
  --color-surface-3: #808080;      /* Dark gray for shadow edges / inactive elements */
  --color-surface-3-hover: #d5d5d5;
  --color-surface-3-active: #909090;

  /* Accent Color - Navy Blue (Classic Titlebar) */
  --color-accent: #000080;        
  --color-accent-hover: #1084d0;  
  --color-accent-active: #0000ff; 
  --color-accent-disabled: #808080;

  /* Typography Colors */
  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  --color-text-disabled: #808080;
  --color-text-accent: #ffffff;

  /* Acrylic and Mica transparent layer effects - disabled for classic solid look */
  --acrylic-bg: #c0c0c0;
  --acrylic-blur: none;
  --acrylic-border: 1px solid #ffffff;

  /* Geometry & Corner Radii - sharp retro corners */
  --radius-window: 0px;
  --radius-button: 0px;
  --radius-input: 0px;
  --radius-tooltip: 0px;

  /* Shadows - replaced with flat 3D borders, so shadows are empty/sharp */
  --shadow-window: 1px 1px 0px #000, 2px 2px 0px rgba(0, 0, 0, 0.5);
  --shadow-flyout: 1px 1px 0px #000, 2px 2px 0px rgba(0, 0, 0, 0.5);
  --shadow-tooltip: 1px 1px 0px #000;

  /* Standardized Shell Border */
  --border-color-subtle: #ffffff;
  --border-color-strong: #808080;

  /* Z-Index Hierarchy scale */
  --z-desktop: 0;
  --z-windows: 100;
  --z-taskbar: 1000;
  --z-overlay: 2000;
  --z-notifications: 3000;

  /* Retro snappy transitions */
  --ease-fluent: steps(2, end);
  --duration-short: 50ms;
  --duration-medium: 100ms;
}

/* Retro Grey Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-1) var(--color-surface-2);
}

/* WebKit-based browsers */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: #dfdfdf;
  box-shadow: inset 1px 1px 0px #808080;
}

::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-top: 1.5px solid #fff;
  border-left: 1.5px solid #fff;
  border-right: 1.5px solid #808080;
  border-bottom: 1.5px solid #808080;
  box-shadow: inset 1px 1px 0 #dfdfdf;
}

::-webkit-scrollbar-thumb:hover {
  background: #d0d0d0;
}

::-webkit-scrollbar-thumb:active {
  background: #b0b0b0;
  border-top: 1.5px solid #808080;
  border-left: 1.5px solid #808080;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
}

/* Keep Light/Dark Theme override consistent with Retro Style */
:root.os-theme-light {
  --color-surface-0: #008080;
  --color-surface-1: #c0c0c0;
  --color-surface-2: #dfdfdf;
  --color-surface-3: #808080;

  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  --color-text-disabled: #808080;

  --acrylic-bg: #c0c0c0;
  --acrylic-border: 1px solid #ffffff;
  
  --shadow-window: 1px 1px 0px #000, 2px 2px 0px rgba(0, 0, 0, 0.5);
  --shadow-flyout: 1px 1px 0px #000, 2px 2px 0px rgba(0, 0, 0, 0.5);
}