:root {
  --bg: #0A0F17;
  --panel: #0E1723;
  --panel-2: #121C2B;
  --panel-hi: #17212F;
  --border: #1E2A3C;
  --border-soft: #141F2E;
  --divider: rgba(232, 237, 243, 0.06);
  --text: #E8EDF3;
  --text-dim: #8593A3;
  --text-muted: #5A6775;
  --text-faint: #3F4B5A;
  --accent: #6BA4F8;
  --accent-hi: #8BB8FB;
  --accent-dim: rgba(107, 164, 248, 0.16);
  --accent-line: rgba(107, 164, 248, 0.32);
  --green: #3EE8A4;
  --amber: #F5A623;
  --violet: #A78BFA;
  --red: #F77171;

  /* Category mapping (Tanzu = green, Homelab = violet) */
  --cat-tas: var(--green);
  --cat-tas-bg: rgba(62, 232, 164, 0.10);
  --cat-tas-border: rgba(62, 232, 164, 0.28);
  --cat-homelab: var(--violet);
  --cat-homelab-bg: rgba(167, 139, 250, 0.10);
  --cat-homelab-border: rgba(167, 139, 250, 0.30);

  /* Type stack */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --container-max: 1320px;
  --container-narrow: 760px;
  --header-height: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 200ms ease;
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  font-feature-settings: "ss01", "cv11";
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

em, i { font-style: normal; font-weight: 500; }
a { color: inherit; text-decoration: none; }

/* Background grid texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.013) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  top: -30%;
  left: -10%;
  right: -10%;
  height: 80vh;
  background: radial-gradient(ellipse at 50% 0%, rgba(107, 164, 248, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}