/* Type16 — Brand tokens */
:root {
  /* Brand */
  --primary: #3D2B7A;
  --primary-2: #5B4299;
  --primary-soft: #ECE7F8;
  --accent: #F59E0B;
  --accent-soft: #FEF3C7;

  /* Surfaces */
  --bg: #F8F7FC;
  --surface: #FFFFFF;
  --surface-2: #F1EFF7;

  /* Text */
  --text: #1A1A2E;
  --text-2: #6B7280;
  --text-3: #9AA0AC;

  /* Lines */
  --border: #E5E1F0;
  --border-2: #EDEAF5;

  /* Semantic */
  --success: #10B981;
  --success-bg: #ECFDF5;
  --warn: #F59E0B;
  --warn-bg: #FEF3C7;
  --error: #EF4444;
  --error-bg: #FEF2F2;
  --info: #3B82F6;
  --info-bg: #EFF6FF;

  /* Radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(61, 43, 122, 0.06);
  --shadow-sm: 0 2px 8px rgba(61, 43, 122, 0.06);
  --shadow-md: 0 2px 12px rgba(61, 43, 122, 0.08);
  --shadow-lg: 0 12px 36px rgba(61, 43, 122, 0.14);
  --shadow-xl: 0 24px 60px rgba(20, 12, 46, 0.18);

  /* Spacing scale (mostly use rem/px directly) */
  --container: 1240px;
  --container-narrow: 760px;

  /* Type */
  --font-sans: 'Onest', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Density (overridden by tweaks) */
  --density: 1;
}

/* 16 type colors — grouped by temperament (4 hue families × 4 steps) */
:root {
  /* Analysts NT — indigo/purple */
  --t-INTJ: #3D2B7A;  --t-INTJ-fg: #FFFFFF;  --t-INTJ-soft: #E7E1F4;
  --t-INTP: #5B4299;  --t-INTP-fg: #FFFFFF;  --t-INTP-soft: #ECE6F7;
  --t-ENTJ: #7C5BC6;  --t-ENTJ-fg: #FFFFFF;  --t-ENTJ-soft: #F2EDFA;
  --t-ENTP: #9B82DA;  --t-ENTP-fg: #FFFFFF;  --t-ENTP-soft: #F4EFFC;

  /* Diplomats NF — teal/emerald */
  --t-INFJ: #0E7C66;  --t-INFJ-fg: #FFFFFF;  --t-INFJ-soft: #DCF1EC;
  --t-INFP: #16A085;  --t-INFP-fg: #FFFFFF;  --t-INFP-soft: #DEF3ED;
  --t-ENFJ: #3FBCA0;  --t-ENFJ-fg: #FFFFFF;  --t-ENFJ-soft: #DFF4EE;
  --t-ENFP: #6FD2BA;  --t-ENFP-fg: #0F3D34;  --t-ENFP-soft: #E5F5EF;

  /* Sentinels SJ — amber/ochre */
  --t-ISTJ: #B7791F;  --t-ISTJ-fg: #FFFFFF;  --t-ISTJ-soft: #FBEFD5;
  --t-ISFJ: #D08816;  --t-ISFJ-fg: #FFFFFF;  --t-ISFJ-soft: #FBEFD5;
  --t-ESTJ: #ED9C2A;  --t-ESTJ-fg: #2C1F00;  --t-ESTJ-soft: #FCEDD0;
  --t-ESFJ: #F4B454;  --t-ESFJ-fg: #2C1F00;  --t-ESFJ-soft: #FCEDD0;

  /* Explorers SP — rose/coral */
  --t-ISTP: #B23A6F;  --t-ISTP-fg: #FFFFFF;  --t-ISTP-soft: #F8DEE9;
  --t-ISFP: #CF4F86;  --t-ISFP-fg: #FFFFFF;  --t-ISFP-soft: #F9E1EA;
  --t-ESTP: #E36F9F;  --t-ESTP-fg: #FFFFFF;  --t-ESTP-soft: #FAE3EC;
  --t-ESFP: #F19BBC;  --t-ESFP-fg: #3B0F23;  --t-ESFP-soft: #FBE6EE;

  /* Temperament group colors */
  --g-NT: #3D2B7A;
  --g-NF: #16A085;
  --g-SJ: #B7791F;
  --g-SP: #B23A6F;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* Headings */
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(36px, 4.5vw, 56px); }
h2 { font-size: clamp(28px, 3vw, 36px); }
h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }

/* Utility */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--text-2); }
.center { text-align: center; }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.section { padding: calc(80px * var(--density)) 0; }
.section-tight { padding: calc(56px * var(--density)) 0; }
.section-dark { background: var(--text); color: #fff; }
.section-soft { background: var(--bg); }
.section-grad {
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-grad::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(245,158,11,0.12), transparent 60%),
    radial-gradient(600px 300px at 10% 80%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}
.section-grad > * { position: relative; }