/* ==========================================================================
   Theme: Retro Web, a polished nod to early desktop computing.
   Beveled panels, terminal type, one patient loading bar.
   ========================================================================== */

[data-theme="retro"] {
  --bg: #dcd8cb;
  --bg-soft: #cfcaba;
  --surface: #f1eee3;
  --ink: #21201c;
  --muted: #555248;
  --accent: #1d3ad1;
  --accent-ink: #ffffff;
  --accent-2: #b3261e;
  --line: #a39d8c;
  --border-w: 2px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: 1px 1px 0 0 #5b564a;
  --shadow-strong: 2px 2px 0 0 #5b564a;

  --font-display: "IBM Plex Mono", monospace;
  --h-weight: 600;
  --h-tracking: -0.01em;
  --h-transform: none;
  --kicker-font: "VT323", monospace;
  --btn-radius: 0px;
  --font-body: Tahoma, Verdana, "Segoe UI", sans-serif;
}

/* Beveled "raised panel" treatment, shared by cards and buttons */
[data-theme="retro"] .svc-card, [data-theme="retro"] .why-card,
[data-theme="retro"] .step, [data-theme="retro"] .demo-card,
[data-theme="retro"] .price-card, [data-theme="retro"] .form,
[data-theme="retro"] .win, [data-theme="retro"] .hp,
[data-theme="retro"] .car-btn, [data-theme="retro"] .lang-btn {
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
  box-shadow: 1px 1px 0 0 #5b564a;
  background: var(--surface);
}

[data-theme="retro"] .kicker { font-size: 1.05rem; letter-spacing: 0.08em; color: var(--accent); }
[data-theme="retro"] .kicker::before { content: "> "; }

/* Blinking terminal cursor after the headline */
[data-theme="retro"] .ht-l2::after {
  content: "_";
  color: var(--accent);
  animation: retro-blink 1.1s steps(1) infinite;
}
@keyframes retro-blink { 50% { opacity: 0; } }
[data-theme="retro"] .hero-title em { color: var(--accent); }

[data-theme="retro"] .btn {
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
  box-shadow: 1px 1px 0 0 #5b564a;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
}
[data-theme="retro"] .btn--primary { background: var(--accent); color: #fff; border-color: #6c82e8 #101e6e #101e6e #6c82e8; }
[data-theme="retro"] .btn--primary:hover { background: #2647e8; }
[data-theme="retro"] .btn:active { border-color: #8e887a #fbf9f1 #fbf9f1 #8e887a; transform: translate(1px, 1px); box-shadow: none; }
[data-theme="retro"] .btn--ghost:hover { background: #fbf9f1; color: var(--ink); }

[data-theme="retro"] .site-header { border-bottom: 2px solid #8e887a; background: var(--surface); }
[data-theme="retro"] .nav-link { color: var(--accent); text-decoration: underline; }
[data-theme="retro"] .nav-link:hover { color: var(--accent-2); }
[data-theme="retro"] .hp { font-family: "VT323", monospace; font-size: 1rem; border-radius: 0; }

/* Hero: stacked windows + a loading bar that never quite finishes */
[data-theme="retro"] .ha-1 {
  opacity: 1; width: 72%; height: 58%;
  background: var(--bg-soft);
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
  top: 2%; right: 0;
}
[data-theme="retro"] .ha-2 {
  opacity: 1; width: 2.6rem; height: 2.6rem;
  background: var(--accent-2);
  border: 2px solid;
  border-color: #e88f8a #6e120d #6e120d #e88f8a;
  bottom: 4%; left: 2%;
}
[data-theme="retro"] .win-bar {
  background: linear-gradient(180deg, #27408f, #3a5bd9);
  color: #fff;
  font-family: "VT323", monospace;
  font-size: 1rem;
  border-bottom: 2px solid #8e887a;
}
[data-theme="retro"] .win-dots i {
  width: 0.7rem; height: 0.6rem; border-radius: 0;
  background: var(--surface);
  border: 1px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
}
[data-theme="retro"] .ha-chip { background: var(--accent); border-radius: 0; }
[data-theme="retro"] .ha-chip--alt { background: var(--surface); border: 2px solid; border-color: #fbf9f1 #8e887a #8e887a #fbf9f1; }
[data-theme="retro"] .ha-line { background: #d9d4c4; border-radius: 0; }
[data-theme="retro"] .ha-bar {
  display: block;
  border: 2px solid;
  border-color: #8e887a #fbf9f1 #fbf9f1 #8e887a;
  border-radius: 0;
  background: #fff;
  height: 1rem;
}
[data-theme="retro"] .ha-bar i {
  background: repeating-linear-gradient(90deg, var(--accent) 0 0.55rem, transparent 0.55rem 0.75rem);
  animation: retro-load 4s steps(9) infinite;
}
@keyframes retro-load { 0% { width: 8%; } 100% { width: 92%; } }

[data-theme="retro"] .svc-card:hover, [data-theme="retro"] .demo-card:hover { transform: none; }
[data-theme="retro"] .svc-icon { color: var(--accent); }
[data-theme="retro"] .demo-thumb { border: 2px solid; border-color: #8e887a #fbf9f1 #fbf9f1 #8e887a; background: #fff; }

[data-theme="retro"] .why-num { font-family: "VT323", monospace; font-size: 1.3rem; }
[data-theme="retro"] .step-num {
  border-radius: 0;
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
  background: var(--bg-soft);
  font-family: "VT323", monospace;
  font-size: 1.15rem;
}
[data-theme="retro"] .demo-status { border-radius: 0; border: 1px solid #8e887a; font-family: "VT323", monospace; font-size: 0.95rem; }
[data-theme="retro"] .demo-status--prod { background: #1d3ad1; border-color: #1d3ad1; color: #fff; }

[data-theme="retro"] .price-badge { background: var(--accent-2); border-radius: 0; font-family: "VT323", monospace; font-size: 0.95rem; }
[data-theme="retro"] .price-list li::before { content: "■"; font-size: 0.65em; top: 0.4em; }
[data-theme="retro"] .price-amount { font-family: "VT323", monospace; font-weight: 400; }

[data-theme="retro"] .field input, [data-theme="retro"] .field select, [data-theme="retro"] .field textarea {
  background: #fff;
  border: 2px solid;
  border-color: #8e887a #fbf9f1 #fbf9f1 #8e887a;
  border-radius: 0;
}
[data-theme="retro"] .field label { font-family: "VT323", monospace; font-size: 1.05rem; letter-spacing: 0.05em; }
[data-theme="retro"] .site-footer { border-top: 2px solid #8e887a; background: var(--surface); }
[data-theme="retro"] .footer-nav a, [data-theme="retro"] .footer-meta a { color: var(--accent); text-decoration: underline; }

[data-theme="retro"] :focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }

/* Crisp, stepped reveal, no easing curves in 1997 */
[data-theme="retro"] .reveal { transform: none; transition: opacity 0.3s steps(3); }

/* Little web badges in the hero corner, like a 1998 footer */
[data-theme="retro"] .td-1 {
  display: block;
  bottom: -4%; right: 0;
  font-family: "VT323", monospace;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  background: var(--ink); color: #7df27d;
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
}
[data-theme="retro"] .td-1::before { content: "BEST VIEWED: ANY BROWSER"; }
[data-theme="retro"] .td-2 {
  display: block;
  top: -6%; left: 0;
  font-family: "VT323", monospace;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  background: var(--accent); color: #fff;
  border: 2px solid;
  border-color: #6c82e8 #101e6e #101e6e #6c82e8;
}
[data-theme="retro"] .td-2::before { content: "EST. 2026 ★ CHIANG MAI"; }

/* Ticker: the browser status bar, promoted */
[data-theme="retro"] { --tk-speed: 60; }
[data-theme="retro"] .ticker {
  background: var(--surface);
  border: 2px solid;
  border-color: #8e887a #fbf9f1 #fbf9f1 #8e887a;
  padding-block: 0.45rem;
}
[data-theme="retro"] .tk-item {
  font-family: "VT323", monospace;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--ink);
}
[data-theme="retro"] .tk-sep { color: var(--accent); }
[data-theme="retro"] .tk-sep::before { content: "|"; }

/* Philosophy panel: a system properties dialog */
[data-theme="retro"] .mode-panel {
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
  box-shadow: 1px 1px 0 0 #5b564a;
}
[data-theme="retro"] .mp-title::before { content: "C:\\> "; font-family: "VT323", monospace; color: var(--accent); font-size: 0.9em; }
[data-theme="retro"] .mp-label { font-family: "VT323", monospace; font-size: 0.95rem; }
[data-theme="retro"] .mp-dot { border-radius: 0; border: 1px solid #8e887a; }
[data-theme="retro"] .palette-pop {
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
  box-shadow: 2px 2px 0 0 #5b564a;
}

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="retro"] .mc-prev {
  background: #dcd8cb;
  border: 2px solid;
  border-color: #fbf9f1 #8e887a #8e887a #fbf9f1;
  border-radius: 0;
}
.mode-card[data-mode="retro"] .mp-a {
  left: 0.5rem; right: 0.5rem; top: 0.5rem; height: 1rem; width: auto;
  background: linear-gradient(180deg, #27408f, #3a5bd9);
}
.mode-card[data-mode="retro"] .mp-b {
  width: 0.55rem; height: 0.5rem; border-radius: 0;
  background: #f1eee3; right: 0.7rem; top: 0.75rem;
}
.mode-card[data-mode="retro"] .mp-c {
  left: 0.9rem; bottom: 0.7rem; width: 3.4rem; height: 0.7rem;
  background: repeating-linear-gradient(90deg, #1d3ad1 0 0.4rem, #ffffff 0.4rem 0.55rem);
  border: 1px solid #8e887a;
}
.mode-card[data-mode="retro"] .mc-aa {
  font-family: "VT323", monospace;
  color: #21201c; left: 0.8rem; top: 1.9rem; font-size: 1.6rem;
}