/* Design Journey — brand tokens + webfonts (self-contained). */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/Outfit-VariableFont_wght.ttf') format('truetype');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype');}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:100 900;font-display:swap;src:url('assets/fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype');}

:root{
  /* brand */
  --magenta:#CC0079; --magenta-deep:#A8005F; --magenta-wash:#FCEAF3;
  --blue:#005AA7; --blue-deep:#004886; --blue-wash:#E7F0F8;
  --teal:#00A7A2; --teal-wash:#E4F5F4;
  --purple:#7C2A8F; --lavender:#C4AFF2; --lavender-wash:#F2ECFB;
  --green:#1F8A5B; --green-wash:#E5F3EC;
  --yellow:#FFC800; --yellow-chip:#C48319; --yellow-wash:#FBF1DC;
  /* neutrals */
  --ink:#16131A; --ink-2:#433E4C; --muted:#736E7B; --faint:#A39EAC;
  --line:#E7E3EC; --line-soft:#F0EDF4; --paper:#FBFAFC; --surface:#FFFFFF; --wash:#F6F3F9;
  /* slate (neutral grey-blue) — used by the "add a phase" adder */
  --slate:#3E4A5C; --slate-2:#5B677A; --slate-wash:#EDF1F6;
  /* Stakeholder type families — each TYPE owns a hue family; the 4 tints inside it tell
     individual stakeholders of that type apart. Deliberately off the phase hues, and dark
     enough that white avatar initials stay legible. */
  --stk-primary-1:oklch(.50 .17 342); --stk-primary-2:oklch(.57 .15 351); --stk-primary-3:oklch(.45 .17 0);   --stk-primary-4:oklch(.54 .16 8);   --stk-primary-5:oklch(.48 .15 16);
  --stk-primary-6:oklch(.56 .14 26);  --stk-primary-7:oklch(.46 .13 38);  --stk-primary-8:oklch(.53 .12 50);  --stk-primary-9:oklch(.50 .12 62);
  --stk-secondary-1:oklch(.58 .13 240); --stk-secondary-2:oklch(.50 .15 250); --stk-secondary-3:oklch(.55 .14 260); --stk-secondary-4:oklch(.46 .16 270); --stk-secondary-5:oklch(.54 .15 279);
  --stk-secondary-6:oklch(.48 .14 289); --stk-secondary-7:oklch(.56 .13 298); --stk-secondary-8:oklch(.46 .15 307); --stk-secondary-9:oklch(.52 .14 316);
  --stk-tertiary-1:oklch(.58 .12 95);  --stk-tertiary-2:oklch(.56 .13 103); --stk-tertiary-3:oklch(.54 .13 110); --stk-tertiary-4:oklch(.55 .14 117); --stk-tertiary-5:oklch(.51 .14 124);
  --stk-tertiary-6:oklch(.53 .14 131); --stk-tertiary-7:oklch(.49 .14 139); --stk-tertiary-8:oklch(.51 .15 146); --stk-tertiary-9:oklch(.47 .15 153);
  /* phase identity (shared across variants; each variant picks a subset) */
  --phase-empathise:#CC0079; --phase-discover:#CC0079;
  --phase-define:#005AA7;
  --phase-ideate:#00A7A2; --phase-develop:#00A7A2;
  --phase-prototype:#7C2A8F;
  --phase-test:#C48319; --phase-deliver:#7C2A8F;
  --phase-understand:#CC0079; --phase-sketch:#00A7A2; --phase-decide:#C48319; --phase-validate:#1F8A5B;
  --phase-bookend:#433E4C;
  /* type */
  --display:'Outfit',system-ui,sans-serif; --text:'Hanken Grotesk',system-ui,sans-serif;
  /* shape + elevation */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(22,19,26,.05),0 1px 3px rgba(22,19,26,.04);
  --shadow:0 4px 14px rgba(22,19,26,.07),0 2px 6px rgba(22,19,26,.04);
  --shadow-lg:0 18px 48px rgba(22,19,26,.12),0 6px 16px rgba(22,19,26,.06);
  --icon-stroke:1.5;
  /* spacing rhythm — lightweight, clean, natural. Use these, not ad-hoc px. */
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:24px; --sp-6:32px; --sp-7:44px;
  /* dotted connector (phase→phase rule): real round dots, generous gap */
  --rule-color:var(--faint); --rule-dot:1.5px; --rule-gap:7px;
}
/* Reusable dotted connector — round dots spaced by --rule-gap. Always use this
   for phase/step rules so connectors stay consistent across the system. */
.dj-rule{height:var(--rule-dot);flex:1;min-width:24px;
  background-image:radial-gradient(circle,var(--rule-color) calc(var(--rule-dot)/2),transparent calc(var(--rule-dot)/2 + .6px));
  background-size:var(--rule-gap) var(--rule-dot);background-repeat:repeat-x;background-position:left center;opacity:.9;}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--text);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0}