/*
 * theme-preview.css — BiWize New Palette Preview
 * ─────────────────────────────────────────────────────────────────────────
 * LOCALHOST ONLY. Injected by server.js at request time.
 * Never shipped to production (GitHub Pages serves styles.css directly).
 *
 * What changes vs. the current palette
 * ─────────────────────────────────────
 *  Background    #04080c / #07111a  →  Deep Navy  #011122 / #0B1A2A
 *  Primary acct  Green   #84ef5a   →  Cyan        #00D5D8
 *  Secondary     Blue    #1698ff   →  Royal Blue  #005BFF
 *  NEW           —                 →  Pink        #F20577 (CTAs + gradient)
 *  NEW           —                 →  Intelligence gradient: blue→cyan→pink
 *
 * To approve: copy these overrides into styles.css, remove this file.
 * To revert:  delete this file (no other files modified).
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTY OVERRIDES
   All var(--*) usages in styles.css inherit these automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds — deeper, truer navy */
  --black:     #011122;
  --black-2:   #0B1A2A;
  --black-3:   #0F2234;
  --surface:   #0D1E30;
  --surface-2: #162640;

  /* Primary accent: cyan replaces green across the board */
  --green:      #00D5D8;
  --green-dim:  #00BFA6;
  --green-glow: rgba(0, 213, 216, 0.2);

  /* Blue → Royal Blue */
  --blue:       #005BFF;
  --blue-light: #1A63F4;
  --blue-glow:  rgba(0, 91, 255, 0.18);

  /* Text */
  --text:       #ffffff;
  --text-muted: #B9C5D2;

  /* Borders */
  --border:        rgba(0, 213, 216, 0.1);
  --border-accent: rgba(0, 91, 255, 0.28);

  /* Shadows */
  --shadow-soft: 0 18px 48px rgba(0, 10, 30, 0.32);
  --shadow-deep: 0 28px 80px rgba(0, 5, 20, 0.48);

  /* ── New tokens (not yet in styles.css) ──────── */
  --pink:             #F20577;
  --pink-glow:        rgba(242, 5, 119, 0.18);
  --teal:             #00BFA6;
  --cyan:             #00D5D8;
  --royal-blue:       #005BFF;
  --cobalt-blue:      #1A63F4;
  --deep-navy:        #011122;
  --navy-ink:         #0B1A2A;
  --gradient-intel:   linear-gradient(90deg, #005BFF 0%, #00D5D8 58%, #F20577 100%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BODY BACKGROUND
   Hardcoded hex values in styles.css need explicit rule overrides.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  background:
    radial-gradient(circle at top, rgba(0, 91, 255, 0.09), transparent 22%),
    linear-gradient(180deg, #011122 0%, #0B1A2A 52%, #011122 100%);
}

/* Atmosphere glow overlay — replace green/blue with cyan/blue */
body::before {
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 213, 216, 0.07), transparent 26%),
    radial-gradient(circle at 80% 0%,  rgba(0, 91, 255, 0.08),  transparent 24%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. NAV
   ═══════════════════════════════════════════════════════════════════════════ */

nav {
  background: rgba(1, 17, 34, 0.88);
  border-bottom-color: transparent;
}

/* Intelligence gradient bottom border */
nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #005BFF 0%, #00D5D8 58%, #F20577 100%);
  opacity: 0.7;
}

/* Logo accent text — gradient instead of flat cyan */
.nav-logo-text span {
  background: linear-gradient(90deg, #005BFF, #00D5D8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. PAGE HERO BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════════════ */

.page-hero {
  background:
    radial-gradient(circle at top right, rgba(0, 213, 216, 0.09), transparent 34%),
    radial-gradient(circle at top left,  rgba(0, 91, 255, 0.08),  transparent 28%),
    linear-gradient(180deg, var(--black-2) 0%, var(--black) 100%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. CTA BUTTONS
   Green → Royal Blue. Text flips from dark #031018 to white.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary {
  background: #005BFF;
  color: #ffffff;
  box-shadow: 0 16px 28px rgba(0, 91, 255, 0.3);
}
.btn-primary:hover {
  background: #1A6FFF;
  color: #ffffff;
  box-shadow: 0 18px 34px rgba(0, 91, 255, 0.22);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. CHIPS / BADGES / TAGS
   ═══════════════════════════════════════════════════════════════════════════ */

.tag.blue {
  background:   rgba(0, 91, 255, 0.12);
  border-color: rgba(0, 91, 255, 0.28);
  color: #00D5D8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. TAB INTERFACE
   Active tab: green bg + dark text → royal blue bg + white text
   ═══════════════════════════════════════════════════════════════════════════ */

.tab-btn.active {
  background:   #005BFF;
  color:        #ffffff;
  border-color: #005BFF;
  box-shadow:   0 4px 16px rgba(0, 91, 255, 0.28);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

footer {
  background:   #011122;
  border-top-color: transparent;
  position: relative;
}

/* Intelligence gradient top border on footer */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #005BFF 0%, #00D5D8 58%, #F20577 100%);
  opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. PULSE-BORDER ANIMATION
   Redefine keyframe with new cyan color (keyframes can't be overridden,
   they must be re-declared to take effect).
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes pulse-border {
  0%, 100% { border-color: var(--border-accent); }
  50% {
    border-color: #00D5D8;
    box-shadow: 0 0 0 4px rgba(0, 213, 216, 0.12);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. UTILITY: INTELLIGENCE GRADIENT TEXT
   Apply class="gradient-intel" to any element to get the tri-colour gradient.
   ═══════════════════════════════════════════════════════════════════════════ */

.gradient-intel {
  background: linear-gradient(90deg, #005BFF 0%, #00D5D8 58%, #F20577 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. PILL / VERSION CHIP (used on product pages)
   ═══════════════════════════════════════════════════════════════════════════ */

.version-pill,
.chip {
  border-color: rgba(0, 213, 216, 0.28);
  color: #00D5D8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. UBUNTU TERMINAL
   Authentic Ubuntu Unity terminal look (as in the reference screenshot).
   Title bar: orange/brown gradient, controls RIGHT, title centered.
   Menu bar: dark, File/Edit/View/Search/Terminal/Help.
   Body:      near-black #300a24, bright green prompt, white text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer window ─────────────────────────────────────────────── */
.hero-terminal {
  background: #300a24;
  border: none;
  border-radius: 6px 6px 4px 4px;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

/* Hide original traffic-light markup */
.terminal-bar,
.terminal-dot,
.terminal-title { display: none !important; }

/* ── Unity title bar ──────────────────────────────────────────── */
.ubuntu-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 28px;
  padding: 0 10px;
  /* Classic Ubuntu Unity orange-brown gradient */
  background: linear-gradient(to bottom,
    #f0813a 0%,
    #c9561a 35%,
    #9e3800 70%,
    #7a2400 100%);
  border-bottom: 1px solid #5a1500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.ubuntu-titlebar-title {
  font-family: 'Ubuntu', 'Noto Sans', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* Window control buttons — right side */
.ubuntu-wm-btns {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ubuntu-wm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  cursor: default;
  font-weight: 700;
  transition: filter 0.12s;
  user-select: none;
  /* Subtle dark button base */
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  color: rgba(255, 255, 255, 0.7);
}
.ubuntu-wm-close {
  background: #c0392b;
  border-color: #922b21;
  color: rgba(255,255,255,0.9);
}
.ubuntu-wm-btn:hover { filter: brightness(1.2); }

/* ── Menu bar ─────────────────────────────────────────────────── */
.ubuntu-menubar {
  display: flex;
  align-items: center;
  gap: 0;
  height: 24px;
  padding: 0 6px;
  background: #1a0a12;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ubuntu-menubar span {
  font-family: 'Ubuntu', 'Noto Sans', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  padding: 0 8px;
  line-height: 24px;
  cursor: default;
  border-radius: 3px;
  user-select: none;
  transition: background 0.12s;
}
.ubuntu-menubar span:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Scrollbar illusion on right edge ─────────────────────────── */
.hero-terminal::after {
  content: '';
  position: absolute;
  right: 0;
  top: 52px;    /* below titlebar + menubar */
  bottom: 0;
  width: 12px;
  background: linear-gradient(to bottom, #4a1830, #2a0e1c);
  border-left: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

/* ── Hero eyebrow — update colours to match new palette ───────── */
.hero-eyebrow {
  background: rgba(0, 213, 216, 0.06);
  border-color: rgba(0, 213, 216, 0.28);
  color: #00D5D8;
}
.hero-eyebrow .dot {
  background: #00D5D8;
  box-shadow: 0 0 8px #00D5D8;
}

/* Hero h1 accent span */
.hero h1 .accent {
  color: #00D5D8;
  text-shadow: 0 0 20px rgba(0, 213, 216, 0.28);
}