/* ==========================================================================
   Nightwave Plaza — Design Tokens
   Windows 9x / retro-desktop aesthetic. Extracted 1:1 from nightwaveplaza/plaza.
   All colors, gradients and bevel shadows are exact.

   Usage:
     <html> (default theme = classic Win98 teal/navy)
     <div data-theme="theme-slate"> ... </div>   (scoped alternate themes)

   Every visual is built from CSS variables below + the 3D bevel shadows.
   ========================================================================== */

/* ---- Global primitives (not theme-dependent) ---------------------------- */
:root {
  --font-family: Tahoma, Verdana, Segoe, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --font-size: 11px;          /* base UI text — everything is tiny by design  */
  --font-size-header: 12px;   /* window title bars                            */
  --font-size-startmenu: 13px;/* start-menu items                             */
  --margin-base: 3px;         /* the atomic spacing unit                      */

  --desktop-bg: teal;         /* #008080 classic desktop backdrop            */
}

/* ==========================================================================
   DEFAULT THEME — Classic Windows 98 (navy title bar, silver chrome)
   Applied globally on :root so the whole app is themed by default.
   ========================================================================== */
:root {
  /* text */
  --color: #000000;
  --color-disabled: #808080;
  --color-link: #0645ad;
  --color-selected: #ffffff;

  /* selection / highlight */
  --bg-selected: #000080;

  /* buttons & chrome */
  --button-bg: #c0c0c0;                 /* the iconic "silver" surface       */
  --button-border-left: #ffffff;
  --button-border-right: #000000;
  --button-border-active: #000000;

  /* 3D raised button bevel (right, top, bottom, left) */
  --button-shadow:
    inset -1px  0   0 0 #808080,
    inset -1px  1px 0 0 #dfdfdf,
    inset -1px -1px 0 0 #808080,
    inset  0    0   0 1px #dfdfdf;
  /* pressed-in state */
  --button-active-shadow: inset 0 0 0 1px #808080;

  /* window frame */
  --window-border-left: #dfdfdf;
  --window-border-right: #000000;
  --window-shadow:
    inset -1px  0   0 0 #808080,
    inset -1px  1px 0 0 #ffffff,
    inset -1px -1px 0 0 #808080,
    inset  0    0   0 1px #ffffff;

  /* window title bar */
  --window-header-color: #ffffff;
  --window-header-color-inactive: #c0c0c0;
  --window-header-gradient: linear-gradient(to right, #000080, #1084d0);
  --window-header-gradient-inactive: linear-gradient(to right, #808080, #c0c0c0);

  /* title-bar control glyphs (inline SVG, never image files) */
  --window-header-button-max: url("data:image/svg+xml,%3Csvg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='9' style='fill:%23000'/%3E%3Crect x='0' y='0' width='9' height='2' style='fill:%23000'/%3E%3Crect x='8' y='0' width='1' height='9' style='fill:%23000'/%3E%3Crect x='0' y='8' width='9' height='1' style='fill:%23000'/%3E%3C/svg%3E");
  --window-header-button-min: url("data:image/svg+xml,%3Csvg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='7' width='6' height='2' style='fill:%23000'/%3E%3C/svg%3E");
  --window-header-button-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9' height='9'%3E%3Cline style='stroke:%23000' x1='1' y1='1' x2='8' y2='8'/%3E%3Cline style='stroke:%23000' x1='8' y1='1' x2='1' y2='8'/%3E%3C/svg%3E");

  /* inputs / sunken content areas */
  --input-bg: #ffffff;
  --forms-border-left: #808080;
  --forms-border-right: #ffffff;
  --forms-shadow:
    inset -1px  0   0 0 #dfdfdf,
    inset -1px  1px 0 0 #000000,
    inset -1px -1px 0 0 #dfdfdf,
    inset  0    0   0 1px #000000;

  /* taskbar */
  --taskbar-font-color: #000000;
  --taskbar-shadow-color: #ffffff;
  --taskbar-btn-shadow:
    inset -1px  0   0 0 #dfdfdf,
    inset -1px  1px 0 0 #808080,
    inset -1px -1px 0 0 #dfdfdf,
    inset  0    0   0 1px #808080;

  --select-dropdown-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Cpath d='M6.19 8.51L4 6.01L8.38 6L12.76 6L10.57 8.5L8.38 11L6.19 8.51Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ==========================================================================
   ALTERNATE THEMES  — scope with  data-theme="theme-<name>"
   Only the tokens that change per theme are overridden; the bevel structure
   is identical across all of them. Values are exact from the source.
   ========================================================================== */

[data-theme="theme-slate"] {
  --color: #000000; --color-disabled: #558097; --color-link: #0645ad;
  --bg-selected: #558097;
  --button-bg: #9db9c8; --button-border-left: #cedce3; --button-border-right: #000000; --button-border-active: #000000;
  --button-shadow: inset -1px 0 0 0 #558097, inset -1px 1px 0 0 #9db9c8, inset -1px -1px 0 0 #558097, inset 0 0 0 1px #9db9c8;
  --button-active-shadow: inset 0 0 0 1px #558097;
  --window-border-left: #9db9c8; --window-border-right: #000000;
  --window-shadow: inset -1px 0 0 0 #558097, inset -1px 1px 0 0 #cedce3, inset -1px -1px 0 0 #558097, inset 0 0 0 1px #cedce3;
  --window-header-color: #ffffff;
  --window-header-gradient: linear-gradient(to right, #558097, #7da8bf);
  --window-header-gradient-inactive: linear-gradient(to right, #808080, #a3a3a3);
  --forms-border-left: #558097; --forms-border-right: #cedce3;
  --forms-shadow: inset -1px 0 0 0 #cedce3, inset -1px 1px 0 0 #000000, inset -1px -1px 0 0 #9db9c8, inset 0 0 0 1px #000000;
  --taskbar-shadow-color: #cedce3;
  --taskbar-btn-shadow: inset -1px 0 0 0 #9db9c8, inset -1px 1px 0 0 #558097, inset -1px -1px 0 0 #9db9c8, inset 0 0 0 1px #558097;
}

[data-theme="theme-rose"] {
  --color: #000000; --color-disabled: #9f6070; --color-link: #0645ad;
  --bg-selected: #9f6070;
  --button-bg: #cfafb7; --button-border-left: #e7d8dc; --button-border-right: #000000; --button-border-active: #000000;
  --button-shadow: inset -1px 0 0 0 #9f6070, inset -1px 1px 0 0 #cfafb7, inset -1px -1px 0 0 #9f6070, inset 0 0 0 1px #cfafb7;
  --button-active-shadow: inset 0 0 0 1px #9f6070;
  --window-border-left: #cfafb7; --window-border-right: #000000;
  --window-shadow: inset -1px 0 0 0 #9f6070, inset -1px 1px 0 0 #e7d8dc, inset -1px -1px 0 0 #9f6070, inset 0 0 0 1px #e7d8dc;
  --window-header-color: #ffffff; --window-header-color-inactive: #606068;
  --window-header-gradient: linear-gradient(to right, #9f6070, #c78898);
  --window-header-gradient-inactive: linear-gradient(to right, #a0a0a4, #c8c8cc);
  --forms-border-left: #9f6070; --forms-border-right: #e7d8dc;
  --forms-shadow: inset -1px 0 0 0 #ceadb8, inset -1px 1px 0 0 #000000, inset -1px -1px 0 0 #ceadb8, inset 0 0 0 1px #000000;
  --taskbar-shadow-color: #e9d6dc;
  --taskbar-btn-shadow: inset -1px 0 0 0 #e7d8dc, inset -1px 1px 0 0 #9f6170, inset -1px -1px 0 0 #e7d8dc, inset 0 0 0 1px #9f6170;
}

[data-theme="theme-desert"] {
  --color: #000000; --bg-selected: #008080; --button-bg: #d5ccbb;
  --window-header-gradient: linear-gradient(to right, #008080, #2eb2b2);
}

[data-theme="theme-spruce"] {
  --color: #000000; --bg-selected: #a0a848; --button-bg: #a2c8a9;
  --window-header-gradient: linear-gradient(to right, #599764, #81bf8c);
}

[data-theme="theme-lilac"] {
  --color: #000000; --bg-selected: #7830d0; --button-bg: #aea8d9;
  --window-header-gradient: linear-gradient(to right, #5a4eb1, #7b6fd3);
}

[data-theme="theme-rainy"] {
  --color: #000000; --bg-selected: #506478; --button-bg: #8098b0;
  --window-header-gradient: linear-gradient(to right, #4f647f, #778ca7);
}

/* High-contrast accessibility themes */
[data-theme="theme-contrast"] {
  --color: #ffffff; --bg-selected: #008000; --button-bg: #000000;
  --window-header-gradient: linear-gradient(to right, #0000ff, #0000ff);
}
[data-theme="theme-contrast_2"] {
  --color: #00ff00; --bg-selected: #0000ff; --button-bg: #000000;
  --window-header-gradient: linear-gradient(to right, #00ffff, #00ffff);
}
[data-theme="theme-contrast_w"] {
  --color: #000000; --bg-selected: #000000; --button-bg: #ffffff;
  --window-header-gradient: linear-gradient(to right, #000000, #000000);
}