Remote-Terminal-for-MeshCore/frontend/src/themes.css

/* ============================================================
   Theme overrides
   Each [data-theme] block overrides the :root custom properties
   defined in index.css. "Original" is the default (no attribute).
   ============================================================ */

/* ── Light ("Bleached Linen") ──────────────────────────────── */
:root[data-theme='light'] {
  --background: 40 18% 97%;
  --foreground: 220 20% 14%;
  --card: 0 0% 100%;
  --card-foreground: 220 20% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 14%;
  --primary: 153 65% 30%;
  --primary-foreground: 0 0% 100%;
  --secondary: 36 12% 92%;
  --secondary-foreground: 220 15% 28%;
  --muted: 40 10% 94%;
  --muted-foreground: 220 8% 46%;
  --accent: 36 14% 90%;
  --accent-foreground: 220 20% 14%;
  --destructive: 0 84% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 36 10% 84%;
  --input: 36 10% 84%;
  --ring: 153 65% 30%;
  --msg-outgoing: 153 18% 92%;
  --msg-incoming: 40 8% 95%;
  --status-connected: 145 63% 38%;
  --status-disconnected: 220 8% 64%;
  --warning: 38 92% 45%;
  --warning-foreground: 38 92% 14%;
  --success: 145 63% 32%;
  --success-foreground: 0 0% 100%;
  --info: 217 91% 48%;
  --info-foreground: 0 0% 100%;
  --favorite: 43 96% 50%;
  --console: 153 50% 22%;
  --console-command: 153 55% 18%;
  --console-bg: 40 10% 94%;
  --toast-error: 0 40% 96%;
  --toast-error-foreground: 0 70% 38%;
  --toast-error-border: 0 30% 86%;
  --code-editor-bg: 40 8% 94%;
  --scrollbar: 36 8% 76%;
  --scrollbar-hover: 36 8% 64%;
  --overlay: 220 20% 10%;
}

/* ── Cyberpunk ("Neon Bleed") ──────────────────────────────── */
:root[data-theme='cyberpunk'] {
  --background: 210 18% 3%;
  --foreground: 120 8% 82%;
  --card: 180 12% 6%;
  --card-foreground: 120 8% 82%;
  --popover: 180 12% 7%;
  --popover-foreground: 120 8% 82%;
  --primary: 135 100% 50%;
  --primary-foreground: 135 100% 6%;
  --secondary: 150 10% 10%;
  --secondary-foreground: 120 12% 72%;
  --muted: 160 6% 9%;
  --muted-foreground: 120 8% 48%;
  --accent: 150 14% 12%;
  --accent-foreground: 120 8% 82%;
  --destructive: 340 100% 59%;
  --destructive-foreground: 0 0% 100%;
  --border: 135 30% 14%;
  --input: 135 30% 14%;
  --ring: 135 100% 50%;
  --radius: 0px;
  --msg-outgoing: 135 28% 7%;
  --msg-incoming: 210 10% 6%;
  --status-connected: 135 100% 45%;
  --status-disconnected: 135 8% 32%;
  --warning: 62 100% 49%;
  --warning-foreground: 62 100% 8%;
  --success: 135 100% 42%;
  --success-foreground: 135 100% 6%;
  --info: 185 100% 42%;
  --info-foreground: 185 100% 6%;
  --favorite: 62 100% 52%;
  --console: 135 100% 50%;
  --console-command: 135 100% 62%;
  --console-bg: 0 0% 1%;
  --toast-error: 340 50% 10%;
  --toast-error-foreground: 340 80% 72%;
  --toast-error-border: 340 40% 18%;
  --code-editor-bg: 150 12% 5%;
  --font-mono: 'Courier New', 'Lucida Console', monospace;
  --scrollbar: 135 20% 12%;
  --scrollbar-hover: 135 30% 18%;
  --overlay: 0 0% 0%;
}

/* ── High Contrast ("Beacon") ──────────────────────────────── */
:root[data-theme='high-contrast'] {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 100%;
  --primary: 212 100% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 92%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 66%;
  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 100%;
  --destructive: 355 100% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 22%;
  --input: 0 0% 22%;
  --ring: 212 100% 62%;
  --radius: 1rem;
  --msg-outgoing: 212 30% 10%;
  --msg-incoming: 0 0% 8%;
  --status-connected: 140 72% 48%;
  --status-disconnected: 0 0% 50%;
  --warning: 43 100% 50%;
  --warning-foreground: 43 100% 8%;
  --success: 140 72% 44%;
  --success-foreground: 0 0% 100%;
  --info: 212 100% 58%;
  --info-foreground: 0 0% 100%;
  --favorite: 43 100% 54%;
  --console: 212 100% 62%;
  --console-command: 212 100% 74%;
  --console-bg: 0 0% 2%;
  --toast-error: 355 40% 10%;
  --toast-error-foreground: 355 80% 72%;
  --toast-error-border: 355 30% 20%;
  --code-editor-bg: 0 0% 6%;
  --font-sans: Verdana, Geneva, 'DejaVu Sans', sans-serif;
  --font-mono: 'Lucida Console', 'Cascadia Mono', 'Courier New', monospace;
  --scrollbar: 0 0% 24%;
  --scrollbar-hover: 0 0% 36%;
  --overlay: 0 0% 0%;
}

/* ── Obsidian Glass ("Noir Lustre") ────────────────────────── */
:root[data-theme='obsidian-glass'] {
  --background: 220 16% 5%;
  --foreground: 30 10% 85%;
  --card: 224 14% 10%;
  --card-foreground: 30 10% 85%;
  --popover: 224 14% 11%;
  --popover-foreground: 30 10% 85%;
  --primary: 30 50% 62%;
  --primary-foreground: 30 50% 8%;
  --secondary: 220 12% 13%;
  --secondary-foreground: 30 8% 72%;
  --muted: 220 10% 11%;
  --muted-foreground: 220 6% 50%;
  --accent: 224 12% 15%;
  --accent-foreground: 30 10% 85%;
  --destructive: 0 62% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 224 12% 18%;
  --input: 224 12% 18%;
  --ring: 30 50% 62%;
  --msg-outgoing: 30 14% 11%;
  --msg-incoming: 220 12% 9%;
  --status-connected: 148 52% 44%;
  --status-disconnected: 220 6% 40%;
  --warning: 38 80% 52%;
  --warning-foreground: 38 80% 8%;
  --success: 148 52% 40%;
  --success-foreground: 0 0% 100%;
  --info: 210 50% 56%;
  --info-foreground: 0 0% 100%;
  --favorite: 38 70% 56%;
  --console: 30 40% 58%;
  --console-command: 30 40% 70%;
  --console-bg: 220 16% 3%;
  --toast-error: 0 26% 12%;
  --toast-error-foreground: 0 50% 68%;
  --toast-error-border: 0 20% 20%;
  --code-editor-bg: 224 14% 7%;
  --scrollbar: 224 10% 16%;
  --scrollbar-hover: 224 10% 24%;
  --overlay: 220 20% 2%;
}

/* ── Obsidian Glass: gradient surface overrides ──────────── */
[data-theme='obsidian-glass'] .bg-card {
  background: linear-gradient(135deg, hsl(224 14% 9%), hsl(232 12% 12%));
}

[data-theme='obsidian-glass'] .bg-popover {
  background: linear-gradient(135deg, hsl(224 14% 10%), hsl(232 12% 13%));
}

[data-theme='obsidian-glass'] .bg-msg-outgoing {
  background: linear-gradient(135deg, hsl(30 16% 10%), hsl(350 10% 9%));
}

[data-theme='obsidian-glass'] .bg-msg-incoming {
  background: linear-gradient(135deg, hsl(220 14% 8%), hsl(232 10% 10%));
}

[data-theme='obsidian-glass'] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(30 14% 18%), hsl(224 10% 14%));
}

[data-theme='obsidian-glass'] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, hsl(30 14% 24%), hsl(224 10% 20%));
}

/* ── Solar Flare ("Plasma Burn") ─────────────────────────── */

@keyframes sf-glow-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 4px hsl(338 100% 50% / 0.3));
  }
  50% {
    filter: drop-shadow(0 0 10px hsl(338 100% 50% / 0.5))
      drop-shadow(0 0 20px hsl(24 100% 50% / 0.2));
  }
}

@keyframes sf-msg-highlight {
  0% {
    box-shadow:
      0 0 0 2px hsl(338 100% 50%),
      0 0 20px hsl(338 100% 50% / 0.4);
  }
  100% {
    box-shadow:
      0 0 0 2px transparent,
      0 0 0 transparent;
  }
}

:root[data-theme='solar-flare'] {
  --background: 350 28% 4%;
  --foreground: 38 18% 92%;
  --card: 345 22% 7%;
  --card-foreground: 38 18% 92%;
  --popover: 345 22% 8%;
  --popover-foreground: 38 18% 92%;
  --primary: 338 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 346 18% 12%;
  --secondary-foreground: 38 14% 78%;
  --muted: 346 16% 10%;
  --muted-foreground: 348 10% 50%;
  --accent: 346 20% 15%;
  --accent-foreground: 38 18% 92%;
  --destructive: 0 85% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 342 18% 18%;
  --input: 342 18% 18%;
  --ring: 338 100% 50%;
  --radius: 0px;
  --msg-outgoing: 338 26% 10%;
  --msg-incoming: 345 16% 8%;
  --status-connected: 82 80% 48%;
  --status-disconnected: 348 12% 38%;
  --warning: 30 100% 54%;
  --warning-foreground: 30 100% 6%;
  --success: 82 80% 44%;
  --success-foreground: 0 0% 100%;
  --info: 198 80% 54%;
  --info-foreground: 0 0% 100%;
  --favorite: 46 100% 54%;
  --console: 338 100% 54%;
  --console-command: 338 100% 68%;
  --console-bg: 0 0% 1%;
  --toast-error: 0 38% 10%;
  --toast-error-foreground: 0 66% 72%;
  --toast-error-border: 0 32% 20%;
  --code-editor-bg: 345 20% 5%;
  --font-mono: 'Courier New', 'Lucida Console', monospace;
  --scrollbar: 338 28% 16%;
  --scrollbar-hover: 338 38% 24%;
  --overlay: 350 30% 2%;
}

/* Solar Flare: Scan-line background texture */
[data-theme='solar-flare'] body {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      hsl(338 100% 50% / 0.015) 3px,
      hsl(338 100% 50% / 0.015) 4px
    ),
    hsl(350 28% 4%);
}

/* Solar Flare: Gradient surfaces */
[data-theme='solar-flare'] .bg-card {
  background: linear-gradient(145deg, hsl(345 22% 7%), hsl(338 18% 9%));
}

[data-theme='solar-flare'] .bg-popover {
  background: linear-gradient(145deg, hsl(345 22% 8%), hsl(338 18% 10%));
}

[data-theme='solar-flare'] .bg-msg-outgoing {
  background: linear-gradient(135deg, hsl(338 28% 10%), hsl(350 20% 8%));
  border-left: 2px solid hsl(338 100% 50% / 0.5);
}

[data-theme='solar-flare'] .bg-msg-incoming {
  background: linear-gradient(135deg, hsl(345 16% 8%), hsl(352 12% 7%));
  border-left: 2px solid hsl(24 80% 50% / 0.25);
}

/* Solar Flare: Primary elements get magenta-to-orange gradient */
[data-theme='solar-flare'] .bg-primary {
  background: linear-gradient(135deg, hsl(338 100% 48%), hsl(355 90% 46%), hsl(14 90% 48%));
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.4s ease;
}

[data-theme='solar-flare'] .bg-primary:hover {
  background-position: 100% 50%;
}

/* Solar Flare: Chamfered button corners + hover glow */
[data-theme='solar-flare'] button {
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition:
    filter 0.2s ease,
    transform 0.12s ease,
    background-color 0.15s ease,
    background-position 0.4s ease,
    color 0.15s ease;
}

[data-theme='solar-flare'] button:hover {
  filter: drop-shadow(0 0 6px hsl(338 100% 50% / 0.45)) drop-shadow(0 0 14px hsl(24 100% 50% / 0.2));
  transform: scale(1.02);
}

[data-theme='solar-flare'] button:active {
  transform: scale(0.97);
  filter: drop-shadow(0 0 3px hsl(338 100% 50% / 0.5));
}

/* Solar Flare: Input focus glow */
[data-theme='solar-flare'] input:focus,
[data-theme='solar-flare'] textarea:focus {
  box-shadow:
    0 0 0 1px hsl(338 100% 50% / 0.5),
    0 0 10px hsl(338 100% 50% / 0.2);
  outline: none;
}

/* Solar Flare: Primary text glow */
[data-theme='solar-flare'] .text-primary {
  text-shadow: 0 0 10px hsl(338 100% 50% / 0.3);
}

/* Solar Flare: Enhanced jump-to-message highlight */
[data-theme='solar-flare'] .message-highlight {
  animation: sf-msg-highlight 2s ease-out forwards;
}

/* Solar Flare: Gradient scrollbar */
[data-theme='solar-flare'] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(338 80% 36%), hsl(24 80% 36%));
}

[data-theme='solar-flare'] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, hsl(338 90% 48%), hsl(24 90% 48%));
}