/* =============================================
   BASE — Variables, Reset, Typography, Elements
   ============================================= */

/* ----- CSS Custom Properties ----- */
:root {
  color-scheme: dark;

  /* Colors — Background */
  --color-bg:         #0a0a0f;
  --color-bg-raised:  #12121a;
  --color-bg-card:    #1a1a25;
  --color-surface:    #22222f;
  --color-border:     #2a2a3a;

  /* Colors — Text */
  --color-text:       #e0e0e8;
  --color-text-muted: #8888a0;

  /* Colors — Accent & Semantic */
  --color-accent:     #00e88f;
  --color-accent-dim: #00e88f33;
  --color-accent-hover: #00ffaa;
  --color-warn:       #ffb347;
  --color-error:      #ff6b6b;
  --color-info:       #64b5f6;

  /* Shared Theme Tokens */
  --nav-bg: rgba(10, 10, 15, 0.85);
  --terminal-bg: #0d0d14;
  --terminal-header-bg: #12121a;
  --shadow-accent-soft: 0 12px 40px rgba(0, 232, 143, 0.08);
  --shadow-accent-strong: 0 16px 50px rgba(0, 232, 143, 0.08);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.28);
  --theme-flash-start: rgba(255, 255, 255, 0.12);
  --theme-flash-end: rgba(0, 232, 143, 0.18);

  /* Reading Mode */
  --reading-bg: #0f1117;
  --reading-border: #27303d;
  --reading-subtle: #161b22;
  --reading-chip-bg: #171d26;
  --reading-inline-bg: #1a202a;
  --reading-code-bg: #090b10;
  --reading-text: #d7dfeb;
  --reading-heading: #f3f6fb;
  --reading-muted: #99a6b7;
  --reading-dim: #7f8b9d;
  --reading-accent: #00e88f;
  --reading-accent-soft: rgba(0, 232, 143, 0.25);
  --reading-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);

  --pipeline-grid: rgba(0, 232, 143, 0.05);
  --pipeline-header: rgba(0, 232, 143, 0.24);
  --pipeline-step-no: rgba(136, 136, 160, 0.32);
  --pipeline-subtext: rgba(136, 136, 160, 0.48);
  --pipeline-hint: rgba(0, 232, 143, 0.2);
  --pipeline-mid: rgba(0, 232, 143, 0.18);
  --pipeline-card-bg: rgba(18, 18, 26, 0.94);
  --pipeline-card-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --pipeline-card-border: rgba(0, 232, 143, 0.12);
  --pipeline-cyan: #64b5f6;
  --pipeline-mint: #00e88f;
  --pipeline-amber: #ffb347;
  --pipeline-violet: #9f7aea;
  --pipeline-coral: #ff6b6b;
  --pipeline-teal: #33c6b2;
  --pipeline-gold: #d6b25e;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-body: 'Outfit', system-ui, sans-serif;

  /* Spacing & Layout */
  --max-width: 900px;

  /* Transitions */
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme='light'] {
  color-scheme: light;

  --color-bg: #f6f1e8;
  --color-bg-raised: #fdfaf4;
  --color-bg-card: #fffdf9;
  --color-surface: #f1eadf;
  --color-border: #d8d0c3;

  --color-text: #171713;
  --color-text-muted: #655f57;

  --color-accent: #0e8f61;
  --color-accent-dim: rgba(14, 143, 97, 0.12);
  --color-accent-hover: #12a56f;
  --color-warn: #c57d1f;
  --color-error: #c84a4a;
  --color-info: #2f7bcc;

  --nav-bg: rgba(246, 241, 232, 0.88);
  --terminal-bg: #fffaf1;
  --terminal-header-bg: #efe6d7;
  --shadow-accent-soft: 0 12px 40px rgba(14, 143, 97, 0.1);
  --shadow-accent-strong: 0 16px 50px rgba(14, 143, 97, 0.12);
  --shadow-elevated: 0 20px 60px rgba(52, 43, 30, 0.1);
  --theme-flash-start: rgba(255, 255, 255, 0.4);
  --theme-flash-end: rgba(14, 143, 97, 0.18);

  --reading-bg: #faf8f5;
  --reading-border: #e8e4df;
  --reading-subtle: #f3efe9;
  --reading-chip-bg: #f0ebe5;
  --reading-inline-bg: #eee9e2;
  --reading-code-bg: #1a1a25;
  --reading-text: #2d2d2d;
  --reading-heading: #1a1a1a;
  --reading-muted: #6b6b6b;
  --reading-dim: #8a8580;
  --reading-accent: #0a7d52;
  --reading-accent-soft: rgba(10, 125, 82, 0.27);
  --reading-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  --pipeline-grid: rgba(14, 143, 97, 0.05);
  --pipeline-header: rgba(14, 143, 97, 0.46);
  --pipeline-step-no: rgba(101, 95, 87, 0.5);
  --pipeline-subtext: rgba(101, 95, 87, 0.68);
  --pipeline-hint: rgba(14, 143, 97, 0.22);
  --pipeline-mid: rgba(14, 143, 97, 0.34);
  --pipeline-card-bg: rgba(255, 252, 246, 0.94);
  --pipeline-card-shadow: 0 24px 60px rgba(52, 43, 30, 0.1);
  --pipeline-card-border: rgba(14, 143, 97, 0.14);
  --pipeline-cyan: #246fbe;
  --pipeline-mint: #0b7f56;
  --pipeline-amber: #b86d12;
  --pipeline-violet: #6f57bb;
  --pipeline-coral: #bf4040;
  --pipeline-teal: #168d80;
  --pipeline-gold: #a97f20;
}


/* ----- Reset ----- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg);
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color 0.45s ease, color 0.45s ease;
}

.site-cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2105;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity 0.18s ease,
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
  contain: layout style paint;
  will-change: transform, opacity;
}

.site-cursor-label {
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(253, 250, 244, 0.94);
  border: 1px solid rgba(14, 143, 97, 0.18);
  color: rgba(32, 57, 47, 0.86);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  white-space: normal;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.site-cursor-label.visible {
  opacity: 1;
}

.site-cursor-label.is-active {
  opacity: 0.88;
}


/* ----- Selection ----- */
::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}


/* ----- Base Elements ----- */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

a:hover {
  opacity: 0.8;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* ----- Shared Button Styles ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition-base);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 232, 143, 0.25);
  opacity: 1;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  opacity: 1;
}


/* ----- Keyframes ----- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes line-appear {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.4; }
}