/* PINK MATTER · Design Tokens v1.0 */
/* Every value here is load-bearing. If you change one, you change the brand. */

:root {
  /* ── GROUND ─────────────────────────────────────────────────────── */
  --pm-ink-900: #0D0D12;        /* near-black · primary type + ground */
  --pm-ink-800: #15151C;        /* secondary ground · cards on dark */
  --pm-ink-700: #1A1A2E;        /* charcoal · from brand bible */
  --pm-ink-600: #2B2B3A;        /* borders on dark */
  --pm-ink-500: #4A4A5C;        /* tertiary type on dark */
  --pm-ink-400: #6F6F82;        /* disabled / captions */
  --pm-ink-300: #9A9AAE;
  --pm-ink-200: #C9C9D4;
  --pm-ink-100: #E6E5E0;        /* hairlines on paper */

  /* ── PAPER ──────────────────────────────────────────────────────── */
  --pm-paper: #F6F3EE;          /* warm editorial paper · NOT sterile white */
  --pm-paper-raised: #FBF9F5;
  --pm-paper-ink: #1A1A2E;      /* body on paper */
  --pm-white: #FFFFFF;          /* pure white for data surfaces only */

  /* ── PINK · the only accent that matters ────────────────────────── */
  --pm-pink-500: #FF1464;       /* signature pink · aggressive, surgical */
  --pm-pink-400: #FF3E7F;       /* hover state */
  --pm-pink-600: #E00A55;       /* active / pressed */
  --pm-pink-300: #FF7AA3;       /* tints on dark */
  --pm-pink-200: #FFC3D5;       /* tints on paper */
  --pm-pink-100: #FFE3EC;       /* backgrounds on paper */
  --pm-pink-glow: 255 20 100;   /* raw RGB for rgba() alpha */

  /* ── SCIENTIFIC TEAL · validation / live / passing ──────────────── */
  --pm-teal-500: #00D4B8;
  --pm-teal-600: #00A693;
  --pm-teal-100: #CFF7EF;

  /* ── AMBER · attention / perception gap ─────────────────────────── */
  --pm-amber-500: #FFB800;
  --pm-amber-100: #FFF0C4;

  /* ── CRITICAL · low scores / failure states ─────────────────────── */
  --pm-crit-500: #FF4530;
  --pm-crit-100: #FFD5CF;

  /* ── LVI SCORE BAND COLOURS ─────────────────────────────────────── */
  /* Critical 0-40 · Developing 41-70 · Established 71-100            */
  /* Advanced 101-130 · Leading 131-160 · Exceptional 161-200         */
  --pm-band-critical: #FF4530;
  --pm-band-developing: #FF8A3D;
  --pm-band-established: #FFB800;
  --pm-band-advanced: #64C9A8;
  --pm-band-leading: #00D4B8;
  --pm-band-exceptional: #FF1464;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
  --pm-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --pm-font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --pm-font-mono: "JetBrains Mono", "DM Mono", ui-monospace, "SF Mono", monospace;
  --pm-font-serif: "Fraunces", "Iowan Old Style", "PT Serif", Georgia, serif; /* editorial moments only */

  /* Display scale — editorial, NOT a tech-startup ramp */
  --pm-fs-mega: clamp(56px, 8vw, 120px);
  --pm-fs-hero: clamp(44px, 6vw, 88px);
  --pm-fs-h1: 56px;
  --pm-fs-h2: 40px;
  --pm-fs-h3: 28px;
  --pm-fs-h4: 20px;
  --pm-fs-body: 17px;
  --pm-fs-small: 14px;
  --pm-fs-caption: 12px;
  --pm-fs-micro: 10px;

  /* Tracking — tight on display, open on labels */
  --pm-tr-display: -0.04em;
  --pm-tr-body: -0.01em;
  --pm-tr-label: 0.12em;      /* ALL-CAPS labels, wide */
  --pm-tr-mono: -0.01em;

  --pm-lh-display: 0.92;
  --pm-lh-heading: 1.04;
  --pm-lh-body: 1.5;
  --pm-lh-tight: 1.1;

  /* ── SPACING · 4px base ─────────────────────────────────────────── */
  --pm-s-1: 4px;
  --pm-s-2: 8px;
  --pm-s-3: 12px;
  --pm-s-4: 16px;
  --pm-s-5: 24px;
  --pm-s-6: 32px;
  --pm-s-7: 48px;
  --pm-s-8: 64px;
  --pm-s-9: 96px;
  --pm-s-10: 128px;

  /* ── RADII · restrained ─────────────────────────────────────────── */
  --pm-r-0: 0;
  --pm-r-1: 2px;       /* default */
  --pm-r-2: 4px;
  --pm-r-3: 8px;       /* upper ceiling — no pill-shaped anything */
  --pm-r-full: 999px;  /* reserved for dots + percentile rings only */

  /* ── BORDERS ─────────────────────────────────────────────────────── */
  --pm-hairline: 1px solid var(--pm-ink-100);
  --pm-hairline-dark: 1px solid var(--pm-ink-600);
  --pm-rule: 2px solid var(--pm-ink-900);

  /* ── GRID ───────────────────────────────────────────────────────── */
  --pm-grid-max: 1320px;
  --pm-grid-cols: 12;
  --pm-grid-gutter: 24px;

  /* ── MOTION ─────────────────────────────────────────────────────── */
  --pm-ease-default: cubic-bezier(0.2, 0, 0, 1);        /* Stripe-ish */
  --pm-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pm-dur-fast: 120ms;
  --pm-dur-base: 200ms;
  --pm-dur-slow: 400ms;

  /* ── Z-INDEX ─────────────────────────────────────────────────────── */
  --pm-z-base: 1;
  --pm-z-sticky: 10;
  --pm-z-overlay: 100;
  --pm-z-modal: 1000;
  --pm-z-toast: 10000;
}

/* ── BASE RESET — scoped, utility ───────────────────────────────────── */
.pm-root, .pm-root * { box-sizing: border-box; }
.pm-root {
  font-family: var(--pm-font-body);
  font-size: var(--pm-fs-body);
  line-height: var(--pm-lh-body);
  letter-spacing: var(--pm-tr-body);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.pm-mono { font-family: var(--pm-font-mono); font-feature-settings: "tnum", "zero"; font-variant-numeric: tabular-nums slashed-zero; }
.pm-tnum { font-variant-numeric: tabular-nums; }
.pm-serif { font-family: var(--pm-font-serif); font-style: italic; }

/* UTILITIES */
.pm-label {
  font-family: var(--pm-font-mono);
  font-size: var(--pm-fs-micro);
  letter-spacing: var(--pm-tr-label);
  text-transform: uppercase;
  font-weight: 500;
}
.pm-rule { height: 2px; background: currentColor; }
.pm-hairline { height: 1px; background: var(--pm-ink-100); }
.pm-hairline-dark { height: 1px; background: var(--pm-ink-600); }

/* HALFTONE · noise texture for hero moments */
.pm-halftone {
  background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 1px);
  background-size: 6px 6px;
}
.pm-halftone-dense { background-size: 4px 4px; }
.pm-halftone-loose { background-size: 10px 10px; }

/* PILCROW · editorial drop-caps, footnote markers */
.pm-asterism::before { content: "⁂"; color: var(--pm-pink-500); margin-right: 0.5em; }
.pm-pilcrow::before { content: "¶ "; color: var(--pm-ink-400); font-family: var(--pm-font-serif); }