/* ============================================================
   K2B / Dealer Professional — Design Tokens
   Stylistic recreation of a late-1990s / early-2000s
   Windows business-application aesthetic.

   Three coexisting "skins":
     .dos      — character-mode terminal (core K2B modules)
     .win9x    — Win9x GUI port (DEALPROW, FIPROW, etc.)
     .bulletin — HTML message bulletins (year-end, holiday, etc.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Pixelify+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ── K2B Network Solutions brand identity ── from W26 splash ── */
  --k2b-navy:          #000080;   /* sign-on background, About box */
  --k2b-navy-deep:     #00137E;   /* "K2B Network Solutions" wordmark */
  --k2b-maroon:        #800000;   /* emphatic labels (dealer name, "Deal:") */
  --k2b-blue-data:     #0000FF;   /* data value text */
  --k2b-blue-data-dk:  #000080;   /* darker variant on light surfaces */
  --k2b-green:         #008000;   /* "EXPIRES" / positive system text */
  --k2b-cream:         #FFFFE1;   /* read-only display field background */
  --k2b-yellow:        #FFFF00;   /* active / lookup-key field highlight */
  --k2b-cheetah-tan:   #DCA628;   /* cheetah body — used in brand splashes */

  /* ── DOS character-mode palette (CGA / ANSI 16-color set) ── */
  --dos-bg:           #0000A8;  /* CGA blue background */
  --dos-bg-alt:       #000080;  /* dim blue fill (frames) */
  --dos-text:         #C0C0C0;  /* CGA light gray (foreground default) */
  --dos-text-bright:  #FFFFFF;  /* white highlight */
  --dos-yellow:       #FFFF55;  /* CGA bright yellow — headings / hot keys */
  --dos-yellow-dim:   #AAAA00;
  --dos-cyan:         #55FFFF;  /* CGA bright cyan — selected rows */
  --dos-green:        #55FF55;  /* CGA bright green — success / OK */
  --dos-red:          #FF5555;  /* CGA bright red — error / warning */
  --dos-status-bg:    #00AAAA;  /* dim cyan status strip */
  --dos-status-fg:    #000000;
  --dos-fkey-bg:      #AAAAAA;  /* light gray F-key chip */
  --dos-fkey-fg:      #000000;
  --dos-input-bg:     #000000;
  --dos-input-fg:     #FFFFFF;
  --dos-border:       #C0C0C0;

  /* ── Win9x GUI palette (Microsoft system color spec) ── */
  --win-face:         #C0C0C0;  /* COLOR_3DFACE / button face / dialog */
  --win-light:        #DFDFDF;  /* COLOR_3DLIGHT */
  --win-shadow:       #808080;  /* COLOR_3DSHADOW */
  --win-dk-shadow:    #000000;  /* COLOR_3DDKSHADOW */
  --win-hilight:      #FFFFFF;  /* COLOR_3DHIGHLIGHT */
  --win-window:       #FFFFFF;  /* COLOR_WINDOW (data area) */
  --win-window-text:  #000000;  /* COLOR_WINDOWTEXT */
  --win-active-cap:   #0A246A;  /* COLOR_ACTIVECAPTION */
  --win-active-cap2:  #A6CAF0;  /* gradient right stop (Win98 Plus!) */
  --win-inactive-cap: #808080;
  --win-inactive-cap2:#C0C0C0;
  --win-cap-text:     #FFFFFF;
  --win-menu:         #C0C0C0;
  --win-menu-text:    #000000;
  --win-hilight-bg:   #000080;  /* selected list / menu item */
  --win-hilight-fg:   #FFFFFF;
  --win-desktop:      #008080;  /* the iconic teal Win9x desktop */
  --win-disabled-txt: #808080;
  --win-disabled-hi:  #FFFFFF;
  --win-tooltip:      #FFFFE1;  /* the pale-yellow tooltip fill */
  --win-link:         #0000EE;
  --win-visited:      #551A8B;

  /* ── Semantic / status colors (data terminals & forms) ── */
  --sem-info:    #000080;
  --sem-ok:      #006000;
  --sem-warn:    #806000;
  --sem-error:   #800000;
  --sem-locked:  #4B0082;

  /* ── F&I Pro (fiprow.exe) palette ── derived from real screenshots.
     This is the same product family but a different visual era (XP-Luna-ish
     buttons + a programmatically-set pastel slate-blue form surface). The
     `.fipro` skin sits between `.win9x` and `.bulletin`. */
  --fipro-surface:     #99B4D1;  /* pastel slate-blue form background */
  --fipro-surface-dk:  #6B86A4;  /* darker variant for divider / lock band */
  --fipro-field-bg:    #FFFFE1;  /* cream resting field background */
  --fipro-field-hi:    #FFFF00;  /* active / lookup-key field highlight */
  --fipro-field-sel:   #316AC5;  /* keyboard-focused row (XP selection blue) */
  --fipro-field-sel-fg:#FFFFFF;
  --fipro-value:       #0000FF;  /* pure-blue value text */
  --fipro-label:       #000000;
  --fipro-big:         #6D6D6D;  /* italic payment headline */
  --fipro-btn:         #F0F0F0;
  --fipro-btn-shadow:  #909090;
  --fipro-btn-light:   #FFFFFF;
  --fipro-divider:     #FFFFFF;  /* the vertical column gap between sections */

  /* ── HTML bulletin palette (the 1996-style year-end notice) ── */
  --msg-bg:      #0000A0;
  --msg-card:    #C0C0C0;
  --msg-header:  #FFFF00;
  --msg-text:    #000000;
  --msg-border:  #000000;
  --msg-stamp:   #FFFF00;

  /* ── 3D bevel composites (Win9x button / panel chrome) ──
     Outset = raised face. Inset = sunken (pressed, fields). */
  --bevel-out:
      inset  1px  1px 0 var(--win-hilight),
      inset -1px -1px 0 var(--win-dk-shadow),
      inset  2px  2px 0 var(--win-light),
      inset -2px -2px 0 var(--win-shadow);

  --bevel-in:
      inset  1px  1px 0 var(--win-dk-shadow),
      inset -1px -1px 0 var(--win-hilight),
      inset  2px  2px 0 var(--win-shadow),
      inset -2px -2px 0 var(--win-light);

  --bevel-pressed:
      inset  1px  1px 0 var(--win-dk-shadow),
      inset  2px  2px 0 var(--win-shadow);

  --bevel-thin-out:
      inset  1px  1px 0 var(--win-hilight),
      inset -1px -1px 0 var(--win-shadow);

  --bevel-thin-in:
      inset  1px  1px 0 var(--win-shadow),
      inset -1px -1px 0 var(--win-hilight);

  --bevel-group:
      inset  1px  1px 0 var(--win-shadow),
      inset -1px -1px 0 var(--win-hilight);

  /* ── Typography ── */
  /* Note: real Win9x apps used MS Sans Serif / Microsoft Sans Serif /
     Tahoma at 8pt. We substitute web-safe Tahoma with system fallbacks,
     and pixel-display web fonts for character-mode authenticity. */
  --font-dos:   'VT323', 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --font-pixel: 'Pixelify Sans', 'Tahoma', sans-serif;
  --font-ui:    'Tahoma', 'Verdana', 'Arial', sans-serif;
  --font-data:  'IBM Plex Mono', 'Lucida Console', 'Courier New', monospace;

  /* Real Win9x default UI is 8pt @ 96dpi ≈ 11px. We use 11–13px
     for chrome, 12–14px for data, larger only for marketing/HTML. */
  --fs-xs:   10px;   /* status-bar microcopy */
  --fs-sm:   11px;   /* menus, buttons, field labels */
  --fs-base: 12px;   /* body data text */
  --fs-md:   13px;   /* dialog body */
  --fs-lg:   14px;   /* panel headers */
  --fs-xl:   18px;   /* splash / about */
  --fs-2xl:  24px;
  --fs-dos:  20px;   /* terminal lines (VT323 is loose) */
  --fs-dos-lg: 32px; /* DOS ASCII titles */

  /* spacing — these apps were DENSE; default to small */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  12px;
  --sp-6:  16px;
  --sp-7:  24px;
  --sp-8:  32px;

  /* radii — strictly 0. No rounding in this era. */
  --r-0: 0; /* @kind radius */

  /* fixed chrome dimensions (Win9x defaults) */
  --titlebar-h:   18px;
  --menu-h:       19px;
  --statusbar-h:  20px;
  --button-h:     23px;
  --field-h:      20px;
  --row-h:        18px;
  --tab-h:        22px;
  --scrollbar:    16px;
}

/* ── Skin defaults ────────────────────────────────────────── */
.dos {
  background: var(--dos-bg);
  color: var(--dos-text);
  font-family: var(--font-dos);
  font-size: var(--fs-dos);
  line-height: 1.0;
  letter-spacing: 0;
  font-feature-settings: "kern" 0;
}

.win9x {
  background: var(--win-face);
  color: var(--win-window-text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.25;
}

.bulletin {
  background: var(--msg-bg);
  color: var(--msg-text);
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 14px;
}

.fipro {
  background: var(--fipro-surface);
  color: var(--fipro-label);
  font-family: 'Courier Prime', 'Courier New', 'Lucida Console', monospace;
  font-size: 14px;
  line-height: 1.15;
}

/* ── Type roles ───────────────────────────────────────────── */
h1, .h1 { font-family: var(--font-ui); font-size: var(--fs-2xl); font-weight: 700; margin: 0; }
h2, .h2 { font-family: var(--font-ui); font-size: var(--fs-xl);  font-weight: 700; margin: 0; }
h3, .h3 { font-family: var(--font-ui); font-size: var(--fs-lg);  font-weight: 700; margin: 0; }
.titlebar-text { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; color: var(--win-cap-text); }
.menu-text     { font-family: var(--font-ui); font-size: var(--fs-sm); }
.field-text    { font-family: var(--font-data); font-size: var(--fs-base); }
.data          { font-family: var(--font-data); font-size: var(--fs-base); white-space: pre; }
.mono, code    { font-family: var(--font-data); font-size: var(--fs-sm); }
.terminal      { font-family: var(--font-dos); font-size: var(--fs-dos); }