/* ============================================================
   Mighty & True — Design Tokens v2
   Palette: WINNER — cyan · green · hot pink · cream
   Backgrounds: warm near-black
   Type: DM Serif Display + Sora + JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Sora:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ── Backgrounds ─────────────────────────────────── */
  --color-bg:        #111318;   /* primary page bg */
  --color-bg-alt:    #1A1B1E;   /* alternate section bg */
  --color-surface:   #202228;   /* card / panel */
  --color-surface-2: #27292F;   /* elevated surface */
  --color-border:    #2E3039;   /* default border */
  --color-border-sub:#1C1E24;   /* subtle divider */

  /* ── Light section backgrounds & text ───────────────────── */
  --color-bg-light:             #F5F0E8;   /* light section background */
  --color-heading-light:        #1a1b1e;   /* headings on light sections */
  --color-text-light:           #6b7280;   /* body copy on light sections */
  --color-text-light-secondary: #9ca3af;   /* secondary/placeholder on light */
  --color-card-light:           #ffffff;   /* card bg within light sections */

  /* ── Text ────────────────────────────────────────── */
  --color-cream:     #F5F0E8;   /* primary text — warm off-white */
  --color-text-mid:  #8A8F9E;   /* secondary */
  --color-text-prose:#C0BCB0;   /* long-form article body — warmer than text-mid, dimmed cream */
  --color-text-muted:#4A5060;   /* tertiary / placeholder */

  /* ── Brand Accents — WINNER palette ─────────────── */
  --color-cyan:         #15C8F2;
  --color-cyan-dim:     rgba(21,200,242,0.10);
  --color-cyan-border:  rgba(21,200,242,0.25);
  --color-cyan-glow:    rgba(21,200,242,0.06);   /* subtle section glow — use on ::before/::after section atmosphere */

  --color-green:        #4BAF78;
  --color-green-dim:    rgba(75,175,120,0.10);
  --color-green-border: rgba(75,175,120,0.25);

  --color-pink:         #F01070;
  --color-pink-hover:   #CC0E5F;
  --color-pink-dim:     rgba(240,16,112,0.10);
  --color-pink-border:  rgba(240,16,112,0.25);

  /* DEPRECATED — use --color-pink instead. Will be removed in a future version. */
  --color-coral:   var(--color-pink);
  --color-magenta: var(--color-pink);

  /* ── Semantic ────────────────────────────────────── */
  --color-success: #4BAF78;
  --color-warning: #FBBF24;

  /* ── Light section accent (teal — for use on cream/light bg only) */
  --color-light-accent:        #076B82;
  --color-light-accent-dim:    rgba(7,107,130,0.08);
  --color-light-accent-border: rgba(7,107,130,0.20);

  /* ── Typography ──────────────────────────────────── */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'Sora', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:      0.75rem;
  --text-eyebrow: 11px;
  --text-sm:      0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tightest: 1.0;
  --leading-display:  1.1;   /* H1 / large display */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  --letter-spacing-h3: -0.015em; /* H3 / card titles */
  --letter-spacing-h1:      -0.03em;  /* display / hero H1 */
  --letter-spacing-h2:      -0.03em;  /* section headings */
  --letter-spacing-body:     0;
  --letter-spacing-mono:     0.08em;

  /* ── Spacing (4px base unit) ─────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Border radius ───────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.7);
  --shadow-cyan:    0 0 32px rgba(21,200,242,0.20);
  --shadow-magenta: 0 0 32px rgba(240,16,112,0.20);

  /* ── Transitions ─────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   380ms ease;
  --transition-appear: 350ms cubic-bezier(0.16, 1, 0.3, 1); /* enter */
  --transition-leave:  120ms ease-in;                        /* exit */

  /* ── Layout ──────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  900px;
  --container-lg:  1200px;
  --container-max: 1200px;   /* alias */
  --nav-height:    68px;
  --prose-width:   800px;    /* long-form article body */

  /* ── Section padding (CF-aligned utility scale) ──────── */
  --padding-section-sm:  3rem;
  --padding-section-md:  5rem;
  --padding-section-lg:  7rem;
  --padding-band:        var(--space-12);   /* compact strips: stats, proof, callout bands */

  /* ── Global horizontal padding (fluid) ───────────────── */
  --padding-global: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Texture ─────────────────────────────────────── */
  --texture-dot-grid: radial-gradient(circle, rgba(245,240,232,0.04) 1px, transparent 1px);
  --texture-dot-size: 22px 22px;
}

/* ── Pill — reusable category/tag chip ─────────────
   Cyan accent, muted fill. Use on cards, section tags, metadata labels.
*/
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cyan);
  background: var(--color-cyan-dim);
  border: 1px solid var(--color-cyan-border);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pill + .pill { margin-left: var(--space-2); }

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.pill-group .pill + .pill { margin-left: 0; }