globals.css

@import "tailwindcss";

/* System preference dark mode for all dark: utilities */
@custom-variant dark (@media (prefers-color-scheme: dark));

/* ── Brand design tokens ─────────────────────────────────────── */
@theme {
  /* Primary accent — purple replaces orange entirely */
  --color-brand-purple:        #3b1445;
  --color-brand-purple-dark:   #2d0f36;
  --color-brand-purple-light:  #5c2070;
  --color-brand-purple-glow:   #c084d8;

  /* Terminal / status */
  --color-brand-green:         #00FF41;

  /* Surfaces — dark mode */
  --color-brand-dark:          #1a1a1a;
  --color-brand-deep:          #13091a;   /* deep purple-tinted dark — header/footer */
  --color-brand-surface:       #242424;
  --color-brand-surface-deep:  #1e1028;   /* purple-tinted card surface */
  --color-brand-border:        #1f1f1f;

  /* Surfaces — light mode */
  --color-brand-light-bg:      #ffffff;
  --color-brand-light-surface: #f5f5f5;
  --color-brand-light-border:  #e5e5e5;

  /* Fonts */
  --font-display: var(--font-barlow-condensed), 'Barlow Condensed', sans-serif;
  --font-mono:    var(--font-space-mono), ui-monospace, monospace;
  --font-sans:    var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}

/* ── Project brand typefaces ─────────────────────────────────── */
/* Bridge Officer (Iconian Fonts) — Mujina wordmark. */
@font-face {
  font-family: 'Bridge Officer';
  src: url('/fonts/bridge-officer.woff2') format('woff2');
  font-display: swap;
}

/* ── Font utility classes ────────────────────────────────────── */
.font-display {
  font-family: var(--font-display);
}

.font-bridge-officer {
  font-family: 'Bridge Officer', var(--font-display);
}

/* ── Base styles ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #1a1a1a;
  color: #f0f0f0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #242424;
  }
}

/* ── Scrollbar (dark theme) ──────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3b1445;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes pcb-pulse {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.14; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(59, 20, 69, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(59, 20, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 20, 69, 0); }
}

.pcb-animated {
  animation: pcb-pulse 4s ease-in-out infinite;
}

.countdown-separator {
  animation: blink 1s step-end infinite;
}

.cursor-blink {
  animation: cursor-blink 1.2s step-end infinite;
}

.animate-fade-up {
  animation: fade-up 0.6s ease forwards;
}

.animate-fade-in {
  animation: fade-in 0.8s ease forwards;
}

.animate-pulse-ring {
  animation: pulse-ring 2s ease-in-out infinite;
}

/* ── Focus ring ──────────────────────────────────────────────── */
/* Unlayered on purpose: this beats Tailwind's utility layer, so the ring is
   consistent sitewide and can't be knocked out by a stray focus- utility.
   Light mode narrows the color further in the light-mode block below. */
:focus-visible {
  outline: 2px solid #3b1445;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  /* #3b1445 on the #1a1a1a page background is ~1.4:1 — effectively invisible.
     Use the dark-mode accent instead. */
  :focus-visible {
    outline-color: #c084d8;
  }
}

/* ── Purple glow utilities ───────────────────────────────────── */
.glow-purple {
  box-shadow: 0 0 24px rgba(59, 20, 69, 0.3), 0 0 48px rgba(59, 20, 69, 0.15);
}

.glow-purple-sm {
  box-shadow: 0 0 12px rgba(59, 20, 69, 0.35);
}

/* Dark mode: use lighter tint for visibility on dark bg */
@media (prefers-color-scheme: dark) {
  .glow-purple {
    box-shadow: 0 0 28px rgba(192, 132, 216, 0.18), 0 0 56px rgba(192, 132, 216, 0.08);
  }
  .glow-purple-sm {
    box-shadow: 0 0 14px rgba(192, 132, 216, 0.22);
  }
}

.glow-green {
  text-shadow: 0 0 20px #00FF41;
}

/* ── Selection ───────────────────────────────────────────────── */
::selection {
  background: rgba(59, 20, 69, 0.15);
  color: #3b1445;
}

@media (prefers-color-scheme: dark) {
  ::selection {
    background: rgba(192, 132, 216, 0.25);
    color: #c084d8;
  }
}

/* ── Logo utilities ──────────────────────────────────────────── */

/* White silhouette — for dark backgrounds */
.logo-invert {
  filter: brightness(0) invert(1);
}

/* Metallic shimmer — echoes the logo's chrome/bevel effect */
.text-metallic {
  background: linear-gradient(160deg, #ffffff 0%, #a0a0a0 35%, #ffffff 55%, #707070 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── TeleHash extension coexistence ──────────────────────────── */
/* The TeleHash Chrome extension injects a fixed 115px topbar at z-index INT32_MAX.
   --ext-offset is set to 0px by default; TelehashExtensionDetector.tsx sets it
   to 115px at runtime when the extension is detected. All fixed site elements
   (accent line, header) read this var so they shift below the extension overlay
   while leaving the layout completely unchanged for users without the extension. */
:root {
  --ext-offset: 0px;
}

/* main padding: just the fixed header height (4rem).
   When the TeleHash extension is active it adds its own body margin-top (115px),
   so the body is already shifted — we must NOT add --ext-offset here again. */
.site-main {
  padding-top: 4rem;
}

/* ── Announcement banner marquee (mobile only) ───────────────── */
@keyframes banner-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 639px) {
  .banner-marquee {
    display: inline-block;
    animation: banner-marquee 12s linear infinite;
  }
}

/* ── Newsroom article body ───────────────────────────────────── */
.newsroom-body img { width: 100%; height: auto; display: block; margin: 1.5rem 0; border: 1px solid #e5e5e5; }
.newsroom-body p { margin-bottom: 1.25rem; }
.newsroom-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; color: #111; margin-top: 2rem; margin-bottom: 0.75rem; }
.newsroom-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; color: #111; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.newsroom-body a { color: #3b1445; text-decoration: none; }
.newsroom-body a:hover { text-decoration: underline; }
.newsroom-body strong { font-weight: 700; color: #111; }
.newsroom-body ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.newsroom-body ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.newsroom-body li { margin-bottom: 0.4rem; }
.newsroom-body blockquote { border-left: 3px solid #3b1445; padding-left: 1rem; margin: 1.5rem 0; color: #555; font-style: italic; }
.newsroom-body hr { border: none; border-top: 1px solid #e5e5e5; margin: 2rem 0; }
.newsroom-body code { font-family: var(--font-mono); font-size: 0.85em; background: #f5f5f5; padding: 0.15em 0.35em; border-radius: 2px; }

@media (prefers-color-scheme: dark) {
  .newsroom-body img { border-color: #1f1f1f; }
  .newsroom-body h2 { color: #f0f0f0; }
  .newsroom-body h3 { color: #f0f0f0; }
  .newsroom-body strong { color: #f0f0f0; }
  .newsroom-body a { color: #c084d8; }
  .newsroom-body blockquote { border-color: #c084d8; color: #999; }
  .newsroom-body hr { border-color: #1f1f1f; }
  .newsroom-body code { background: #242424; }
}

/* ── Light mode overrides ────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  ::-webkit-scrollbar-track {
    background: #f5f5f5;
  }
  ::-webkit-scrollbar-thumb {
    background: #d4d4d4;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #5c2070;
  }

  :focus-visible {
    outline-color: #5c2070;
  }

  ::selection {
    background: rgba(59, 20, 69, 0.2);
    color: #3b1445;
  }
}