/* ============================================================================
   THE PROJECT — Shared Brand System
   Foundations: color + type tokens for The Health Project & The Growth Project
   ----------------------------------------------------------------------------
   One identity, two accents. Switch the whole system between brands by setting
   data-brand="health" or data-brand="growth" on a container (defaults to ink).
   The font is genuine Outfit, served from Google Fonts.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---- Brand anchors -------------------------------------------------- */
  --ink:           #1A1A1A;  /* ink black — "The" + "Project", primary text  */
  --health:        #7AA7C9;  /* Health blue                                  */
  --growth:        #2F8F6B;  /* Growth green                                 */

  /* ---- Health blue scale --------------------------------------------- */
  --health-50:   #EEF4F8;
  --health-100:  #DCEAF1;
  --health-200:  #BDD6E5;
  --health-300:  #9CBFD7;
  --health-400:  #7AA7C9;  /* core */
  --health-500:  #5E8FB5;
  --health-600:  #47769C;  /* text / actions on white — AA on white */
  --health-700:  #395F7E;
  --health-800:  #2C495F;
  --health-900:  #1F3342;

  /* ---- Growth green scale -------------------------------------------- */
  --growth-50:   #E9F4EF;
  --growth-100:  #D2E9DF;
  --growth-200:  #A7D3BF;
  --growth-300:  #6FB698;
  --growth-400:  #459C77;
  --growth-500:  #2F8F6B;  /* core */
  --growth-600:  #277659;
  --growth-700:  #1F5E47;
  --growth-800:  #194B39;
  --growth-900:  #12382B;

  /* ---- Neutral scale (cool ink-grey) --------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBFCFD;
  --neutral-50:  #F6F8F9;
  --neutral-100: #EEF1F3;
  --neutral-200: #E2E6EA;
  --neutral-300: #CDD4DA;
  --neutral-400: #A7B1B9;
  --neutral-500: #79838B;
  --neutral-600: #545C63;
  --neutral-700: #3C434A;
  --neutral-800: #292E33;
  --neutral-900: #1A1A1A;

  /* ---- Semantic surfaces & text -------------------------------------- */
  --paper:        var(--neutral-0);    /* base canvas                      */
  --surface:      var(--neutral-50);   /* raised / sectioned background    */
  --surface-2:    var(--neutral-100);  /* deeper inset                     */
  --line:         var(--neutral-200);  /* hairline borders                 */
  --line-strong:  var(--neutral-300);  /* emphasised borders               */

  --fg-1:         var(--ink);          /* primary text                     */
  --fg-2:         var(--neutral-600);  /* secondary text                   */
  --fg-3:         var(--neutral-500);  /* muted / captions                 */
  --fg-on-accent: #FFFFFF;             /* text on a filled accent          */
  --fg-inverse:   #FFFFFF;             /* text on ink surfaces             */

  /* ---- Status -------------------------------------------------------- */
  --success:      #2F8F6B;
  --warning:      #C98A2B;
  --danger:       #C9514A;
  --info:         #47769C;
  --success-tint: #E9F4EF;
  --warning-tint: #F8EFDC;
  --danger-tint:  #F7E7E5;

  /* ---- Accent (brand-neutral default = ink) -------------------------- */
  --accent:        var(--ink);
  --accent-ink:    var(--ink);
  --accent-strong: #000000;
  --accent-tint:   var(--neutral-100);
  --accent-tint-2: var(--neutral-200);
  --on-accent:     #FFFFFF;

  /* ---- Type ---------------------------------------------------------- */
  --font-brand: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:  'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weights — Outfit */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 800;   /* logo + display weight */

  /* Display + heading ramp (modular ~1.22) */
  --text-hero:    72px;
  --text-display: 56px;
  --text-h1:      44px;
  --text-h2:      34px;
  --text-h3:      26px;
  --text-h4:      21px;
  --text-h5:      18px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-sm:      14px;
  --text-caption: 13px;
  --text-overline:12px;

  --lh-tight:   1.04;
  --lh-snug:    1.16;
  --lh-normal:  1.45;
  --lh-relaxed: 1.62;

  --tracking-tight:   -0.022em;  /* logo + display headings */
  --tracking-snug:    -0.012em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-overline:0.14em;    /* uppercase labels */

  /* ---- Radii --------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* ---- Spacing (4px base) ------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Elevation (soft, low-contrast, ink-based) -------------------- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,.06);
  --shadow-sm: 0 2px 6px rgba(26,26,26,.07);
  --shadow:    0 6px 18px rgba(26,26,26,.08);
  --shadow-md: 0 12px 32px rgba(26,26,26,.10);
  --shadow-lg: 0 24px 60px rgba(26,26,26,.14);
  --shadow-accent: 0 10px 28px rgba(26,26,26,.10);

  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;
  --ease:     cubic-bezier(.2, .7, .2, 1);   /* gentle, confident */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Brand themes: set data-brand on any container --------------------- */
[data-brand="health"] {
  --accent:        var(--health-400);
  --accent-ink:    var(--health-600);
  --accent-strong: var(--health-700);
  --accent-tint:   var(--health-50);
  --accent-tint-2: var(--health-100);
  --on-accent:     #FFFFFF;
  --shadow-accent: 0 12px 30px rgba(71,118,156,.22);
}
[data-brand="growth"] {
  --accent:        var(--growth-500);
  --accent-ink:    var(--growth-600);
  --accent-strong: var(--growth-700);
  --accent-tint:   var(--growth-50);
  --accent-tint-2: var(--growth-100);
  --on-accent:     #FFFFFF;
  --shadow-accent: 0 12px 30px rgba(31,94,71,.22);
}

/* ============================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================== */
.t-hero, .t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
  font-family: var(--font-brand);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.t-hero    { font-size: var(--text-hero);    font-weight: var(--w-black);    line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-display { font-size: var(--text-display); font-weight: var(--w-black);    line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h1      { font-size: var(--text-h1);      font-weight: var(--w-bold);     line-height: var(--lh-snug);  letter-spacing: var(--tracking-snug); }
.t-h2      { font-size: var(--text-h2);      font-weight: var(--w-bold);     line-height: var(--lh-snug);  letter-spacing: var(--tracking-snug); }
.t-h3      { font-size: var(--text-h3);      font-weight: var(--w-semibold); line-height: var(--lh-snug);  letter-spacing: var(--tracking-snug); }
.t-h4      { font-size: var(--text-h4);      font-weight: var(--w-semibold); line-height: var(--lh-normal); }
.t-h5      { font-size: var(--text-h5);      font-weight: var(--w-semibold); line-height: var(--lh-normal); }

.t-body-lg { font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }
.t-body    { font-family: var(--font-body); font-size: var(--text-body);    font-weight: var(--w-regular); line-height: var(--lh-normal);  color: var(--fg-2); margin: 0; }
.t-sm      { font-family: var(--font-body); font-size: var(--text-sm);      font-weight: var(--w-regular); line-height: var(--lh-normal);  color: var(--fg-2); margin: 0; }
.t-caption { font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--w-medium);  line-height: var(--lh-normal);  color: var(--fg-3); margin: 0; }
.t-overline{ font-family: var(--font-brand); font-size: var(--text-overline); font-weight: var(--w-bold); line-height: 1; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--fg-3); margin: 0; }

/* ============================================================================
   THE LOGO  —  one tight unit, pure Outfit 800 type. NEVER an image file.
   Markup:
     <span class="tp-lock">
       <span class="out">The</span><span class="mid h">Health</span
       ><span class="out">Project</span><span class="dot h">.</span>
     </span>
   "The"/"Project" = ink · middle word + period = accent · middle ~1.55× outer ·
   no spaces between words. Sister = swap middle word + accent class (.h / .g).
   Dark backgrounds: add .on-dark to flip the outer words to white.
   Scale the whole mark from the single `font-size` knob on .tp-lock.
   ========================================================================== */
.tp-lock {
  font-family: var(--font-brand);
  font-weight: var(--w-black);
  font-size: 64px;          /* the ONE size knob — scale the whole logo here */
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -.005em;
  display: inline-block;
  color: var(--ink);
}
.tp-lock .out { font-size: 1.12em; color: var(--ink); }   /* "The" + "Project" */
.tp-lock .mid { font-size: 1.74em; }                       /* middle word (accent) */
.tp-lock .dot { font-size: 1.74em; margin-left: -.1em; }   /* period (accent)   */
.tp-lock .h   { color: var(--health-400); }                /* Health blue       */
.tp-lock .g   { color: var(--growth-500); }                /* Growth green      */
.tp-lock.on-dark .out { color: #FFFFFF; }                  /* reversed for dark */
.tp-lock.mono .out,
.tp-lock.mono .mid,
.tp-lock.mono .dot { color: #FFFFFF; }                     /* all-white, for use ON a solid accent fill */

/* data-brand convenience: colour .mid/.dot from the active theme accent */
[data-brand] .tp-lock .acc { color: var(--accent); }

/* Reset-ish helpers for kit pages */
* { box-sizing: border-box; }