/* =========================================================
   sibansal · Dark Teal Theme — Core Design Tokens & Base
   Extracted from sibansal/portfolio (v3.0)
   ========================================================= */

:root {
  /* Brand Teal Palette */
  --bg: #061316;
  --primary: #538e97;
  --accent-100: #DCEBED;
  --accent-200: #BDD7DB;
  --accent-300: #9CC2C8;
  --accent-400: #79AAB2;
  --accent-500: #4F8C96;
  --accent-600: #437882;
  --accent-700: #37666D;
  --accent-800: #294C52;

  /* Raw Card & Surface Tokens */
  --card-bg: #080e1a;
  --card-border: rgba(32, 160, 160, 0.35);
  --card-hover-border: #538e97;
  --portrait-border: rgba(32, 160, 160, 0.35);
  --strip-bg: #060b11;
  --strip-border-top: rgba(32, 160, 160, 0.25);
  --pill-text: #7ecece;
  --pill-bg: rgba(8, 22, 36, 0.85);
  --pill-border: rgba(32, 160, 160, 0.3);
  --status-text: #c8d8e4;
  --text-muted: #849ca0;
  --text-dim: #5c7478;

  /* Glow & Shadow Tokens */
  --card-elevated-shadow: 0 20px 60px -10px rgba(132, 190, 194, 0.25);
  --btn-glow: 0 0 20px rgba(132, 190, 194, 0.3);
  --btn-glow-hover: 0 0 32px rgba(132, 190, 194, 0.5);

  --max-w: 1140px;
}

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

::selection {
  background: var(--primary);
  color: #ffffff;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: #f1f5f9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

body {
  background-color: var(--bg);
  color: #e2e8f0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Ambient Background Glows */
.bg-glow-tl {
  position: fixed;
  top: -20%;
  left: -10%;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: rgba(67, 120, 130, 0.12);
  filter: blur(130px);
  pointer-events: none;
  z-index: 0;
}

.bg-glow-br {
  position: fixed;
  bottom: -20%;
  right: -10%;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: rgba(79, 140, 150, 0.12);
  filter: blur(130px);
  pointer-events: none;
  z-index: 0;
}

.bg-grid-faint {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.container {
  width: min(var(--max-w), calc(100% - 48px));
  margin-inline: auto;
  position: relative;
  z-index: 10;
}

/* Common Dot Badges */
.green-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px 2px rgba(52, 211, 153, 0.55);
  animation: pulse-dot 2.5s infinite;
  display: inline-block;
  flex-shrink: 0;
}

.yellow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3b634;
  box-shadow: 0 0 8px 2px rgba(211, 182, 52, 0.55);
  display: inline-block;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* Common Monospace Tags */
.tag-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(8, 22, 36, 0.9);
  border: 1px solid rgba(41, 76, 82, 0.6);
  color: var(--accent-300);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tag-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}