/* RatLabs TUI Theme — demo override for ratlabs.tech
   Monochrome terminal aesthetic + muted green accent, dark/light
*/

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* ── DARK (default) ─────────────────────────────── */
:root {
  --bg:              #080808;
  --bg-alt:          #0e0e0e;
  --bg-primary:      #080808;
  --bg-surface:      #0e0e0e;
  --bg-panel:        #111111;
  --bg-panel-hover:  #171717;
  --surface:         #0e0e0e;

  --text:            #e8e8e8;
  --text-muted:      #aaaaaa;
  --text-faint:      #6a6a6a;
  --text-primary:    #e8e8e8;
  --text-secondary:  #aaaaaa;

  --accent:          #4a7c52;
  --accent-hover:    #6aad74;
  --accent-dim:      #2d4f33;
  --accent-glow:     rgba(74,124,82,0.06);
  --accent-glow-strong: rgba(74,124,82,0.14);

  --border:          #222222;
  --border-primary:  #222222;
  --border-subtle:   #181818;

  --code-bg:         #0d0d0d;
  --tag-bg:          #111111;
  --tag-border:      #2a2a2a;
  --tag-text:        #7a7a7a;

  --shadow-sm:       none;
  --shadow-md:       none;

  --radius:          0px;
  --radius-sm:       0px;
}

/* ── LIGHT ──────────────────────────────────────── */
[data-theme="light"] {
  --bg:              #f0eeea;
  --bg-alt:          #e6e3de;
  --bg-primary:      #f0eeea;
  --bg-surface:      #e6e3de;
  --bg-panel:        #dedad4;
  --bg-panel-hover:  #d4d0c8;
  --surface:         #e6e3de;

  --text:            #1a1a1a;
  --text-muted:      #4a4a4a;
  --text-faint:      #8a8a8a;
  --text-primary:    #1a1a1a;
  --text-secondary:  #4a4a4a;

  --accent:          #2d5016;
  --accent-hover:    #1a3009;
  --accent-dim:      #4a7c2a;
  --accent-glow:     rgba(45,80,22,0.06);
  --accent-glow-strong: rgba(45,80,22,0.13);

  --border:          #bebab2;
  --border-primary:  #bebab2;
  --border-subtle:   #d4d0c8;

  --code-bg:         #dedad4;
  --tag-bg:          #dedad4;
  --tag-border:      #c4c0b8;
  --tag-text:        #4a4a4a;
}

/* ── GLOBAL FONT ────────────────────────────────── */
*, *::before, *::after {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
               'Courier New', ui-monospace, monospace !important;
  border-radius: 0 !important;
}

/* ── SCANLINES ──────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
}
[data-theme="light"] body::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.03) 3px,
    rgba(0,0,0,0.03) 4px
  );
}

/* ── HEADER ─────────────────────────────────────── */
.site-header {
  border-bottom: 1px dashed var(--border) !important;
}
.site-logo {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.site-logo::after {
  content: '_';
  animation: blink 1.1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.site-nav a {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem !important;
}

/* ── HERO ───────────────────────────────────────── */
.hub-title {
  font-weight: 700;
  letter-spacing: 0.25em;
}
.hub-title::before { content: '[ '; color: var(--text-muted); }
.hub-title::after  { content: ' ]'; color: var(--text-muted); }

.hub-subtitle {
  letter-spacing: 0.08em;
  text-transform: lowercase;
}
.hub-tagline {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
}
.hub-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.62rem;
}
.hub-stat-val { font-weight: 700; }

/* ── SECTION BARS ───────────────────────────────── */
.section-bar-title {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  font-size: 0.75rem;
}
.section-bar-title::before { content: '// '; color: var(--accent); }
.section-bar-line {
  border-top: 1px dashed var(--border) !important;
}

/* ── CARDS ──────────────────────────────────────── */
.p-card {
  border: 1px dashed var(--border) !important;
}
.p-card:hover {
  border-color: var(--accent) !important;
  border-style: solid !important;
}
.p-card-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.p-card-links a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}

/* ── FEATURED / RXRADAR ─────────────────────────── */
.featured-card {
  border: 1px dashed var(--border) !important;
}
.featured-card:hover {
  border-color: var(--accent) !important;
  border-style: solid !important;
}

/* ── ABOUT ──────────────────────────────────────── */
.section-heading {
  letter-spacing: 0.1em;
  font-weight: 600;
}
.skill-tag {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  border: 1px dashed var(--tag-border) !important;
}

/* ── MERCH ──────────────────────────────────────── */
.merch-img-link {
  border: 1px dashed var(--border) !important;
}
.merch-cta {
  border-style: dashed !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
}

/* ── FOOTER ─────────────────────────────────────── */
#site-footer {
  border-top: 1px dashed var(--border) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

/* ── HERO RAT ────────────────────────────────────── */
.hero-rat-img {
  width: 140px;
  height: auto;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 1rem;
  opacity: 0.9;
}
[data-theme="light"] .hero-rat-img {
  filter: invert(0.15);
}

/* ── ABOUT PHOTO: pixelated render ─────────────── */
.about-photo {
  image-rendering: pixelated;
  filter: grayscale(40%);
}

/* ── CODE ───────────────────────────────────────── */
code {
  font-size: 0.85em;
  padding: 0.1em 0.3em;
  background: var(--code-bg);
  border: 1px solid var(--border);
}