/* Perception Workshop - Design Tokens */

:root {
  /* Brand Colors (PM Brand Guidelines v5) */
  --p-red: #E5223B;       /* Spark, urgency. Headlines, CTAs, the forge heat. */
  --p-blue: #0359A7;      /* Foundation, trust. Secondary elements. */
  --p-green: #5BBA47;     /* RESULTS ONLY. Nexus stage, closing CTAs, case studies. Sniper, not spray. */
  --p-black: #0E0E0E;     /* Authority. Backgrounds. */
  --p-dark: #1A1A1A;      /* Raised surfaces, cards. */
  --p-gray: #2A2A2A;      /* Borders, hairlines. */
  --p-gray-light: #888888;/* Utility, captions, muted copy. */
  --p-white: #F5F5F5;     /* Space, clarity. */
  --p-ember: #FF2E47;     /* Hot glow red for the "forge heat" signature (shadow -> light). */

  /* Typography */
  --font-headline: 'Monument Extended', 'Arial Black', sans-serif;
  --font-body: 'Satoshi', Arial, sans-serif;
  --font-display: 'Monument Extended', 'Arial Black', sans-serif;
  --font-hairline: 'NH Display XXThin', 'Helvetica Neue', Arial, sans-serif; /* statements, subs, quotes */

  /* Type scale: six sizes, T8 with K3 titles. Monument for headings, the hairline for statements, Satoshi for reading. */
  --t-display:   clamp(44px, 8vw, 136px);   /* Monument 900 caps: chapter headlines */
  --t-display-2: clamp(32px, 4.6vw, 72px);  /* Monument 900 caps: figures, panel names */
  --t-statement: clamp(40px, 5vw, 72px);    /* Hairline, sentence case, 1.08: statements, subs, quotes, big links */
  --t-title:     clamp(18px, 1.6vw, 24px);  /* Monument 300 caps (K3): H3s, item titles. 24 from 1500 up */
  --t-body:      19px;                      /* Satoshi 400 (500 for emphasis): reading text. 19, not 18, so bold red links pass as large text */
  --t-small:     14px;                      /* Satoshi 400/700: labels, captions, meta */

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 160px;

  /* Proximity law (design-systems/perception/system.md, section 4). Mobile values; desktop below. */
  --gap-bound: 8px;
  --gap-grouped: 16px;
  --gap-siblings: 56px;
  --gap-blocks: 80px;
  --gap-sections: 128px;

  /* Grid (section 2). Mobile values; tablet and desktop below. */
  --grid-cols: 4;
  --grid-gutter: 16px;
  --grid-margin: 20px;
  --grid-max: 1440px;
}

@media (min-width: 744px) {
  :root { --grid-cols: 8; --grid-gutter: 24px; --grid-margin: 40px; }
}
@media (min-width: 1200px) {
  :root { --grid-cols: 12; --grid-margin: 64px;
    --gap-grouped: 24px; --gap-siblings: 96px; --gap-blocks: 144px; --gap-sections: 224px; }
}

/* No widows, anywhere: short lines balance, paragraphs never end on one stranded word. */
h1, h2, h3, h4, h5, h6, blockquote, figcaption, label, button, .title, .stmt, .pq { text-wrap: balance; }
p, li, dd, td { text-wrap: pretty; }