/* strengthinthecity.com design tokens. Draft for step 2 (the look), Nov 10 2026.
   Every value names its source in brand/playbook/. Values marked PROPOSED are web
   values the playbook does not set yet; each is listed in DESIGN.md, "Proposed
   additions to the guidelines". Built from the playbook files directly. */

@font-face { font-family: "Poppins"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b7982e1b1efb1db2506_Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b79cbe82572bf119032_Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b797974bf059860ebdf_Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b7940294b72a8dc75df_Poppins-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Seaweed Script"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b7aaa00290065a487f9_SeaweedScript-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b7a9c16ba74a113b011_NotoSerifDisplay.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
@font-face { font-family: "Elsie"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b7ab0c13f89d4f6b5ab_Elsie-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Cognito Scripto"; src: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b7030ac59bce63ba28e_CognitoScripto.woff2") format("woff2"); font-display: swap; }

:root {
  /* Color: main look (look-main.md, Colors) */
  --red: #C62A27;          /* STRENGTH red: the heart, one band, accents */
  --red-text: #9C2721;     /* red for small text */
  --black: #171F1E;        /* text, pin on light */
  --white: #F2F0EA;        /* the page; never pure white */
  --warm-grey: #E4E2DD;    /* quiet grounds and panels */

  /* Color: STRNGTH. (look-strngth.md, Colors), always in this order */
  --s-red: #C62A27; --t-teal: #00968F; --r-yellow: #E4BE22; --n-pink: #FF48B0;
  --g-blue: #2F4FC0; --t-orange: #FF6C2F; --h-green: #7E9424;
  --kraft: #F0E9DC;

  /* Color: Collective (look-collective.md, Colors) */
  --cream: #FAF6F0; --sand: #E2D7C8; --taupe: #B9A795; --taupe-text: #5B5048;
  --mocha: #6B4F3A; --brown: #3B1F07;

  /* Spacing: one unit U = 8 px; steps 1,2,3,4,6,8,12,16 U (layout.md, Spacing) */
  --u1: 8px; --u2: 16px; --u3: 24px; --u4: 32px; --u6: 48px; --u8: 64px; --u12: 96px; --u16: 128px;

  /* Grid (layout.md, Web, Grid) */
  --content-max: 1200px;
  --gutter: 24px;
  --margin: 48px;          /* desktop: 48 or more; tablet 32; phone 16 (set below) */
  --section-gap: var(--u12);  /* 96 desktop, 64 phone */

  /* Type scale (type.md, Sizes per format): web desktop and web phone.
     Fluid between 390 and 1440 wide: PROPOSED (the playbook gives the two ends only). */
  --fs-display: clamp(40px, calc(26.6px + 3.43vw), 76px);
  --fs-h1: clamp(28px, calc(22.4px + 1.43vw), 43px);
  --fs-h2: clamp(23px, calc(19.7px + 0.86vw), 32px);
  --fs-sub: clamp(19px, calc(17.1px + 0.48vw), 24px);
  --fs-body: clamp(16px, calc(15.12px + 0.225vw), 18px);   /* 16 at 390, 18 from 1280 (layout-and-spacing.md, part 6) */
  --fs-caption: clamp(13px, calc(12.6px + 0.1vw), 14px);

  /* Type styles (type.md, Type styles) */
  --lh-display: 1.0;  --ls-display: -0.02em;
  --lh-h1: 1.05;      --ls-h1: -0.01em;
  --lh-h2: 1.15;
  --lh-sub: 1.3;
  --lh-body: 1.5;
  --lh-caption: 1.4;  --ls-caption: 0.01em;
  --ls-button: 0.01em;
  --ls-label: 0.12em;
  --measure: 70ch;    /* Body longest line: 70 characters */

  /* Collective headline (look-collective.md, Fonts) */
  --ls-col-caps: 0.08em; --lh-col-caps: 1.15; --lh-col-long: 1.1;

  /* Header (layout.md, Web, Header) */
  --header-h: 80px;            /* 64 on phones */
  --lettering-size: 32px;      /* 26 on phones; see PROPOSED phone size in DESIGN.md */
  --nav-gap: 32px;

  /* Buttons (layout.md, Web, Buttons) */
  --btn-h: 48px; --btn-pad: 24px; --btn-outline: 2px;
  --radius-main: 0;            /* main look and STRNGTH.: square */
  --radius-collective: 999px;  /* Collective: fully round */

  /* Links and focus (layout.md, Web, Links and focus) */
  --link-underline: 1px; --link-underline-hover: 2px; --link-offset: 3px;
  --focus-width: 2px; --focus-offset: 2px;

  /* Depth */
  --strngth-paper-shadow: 3px 6px 6px rgba(23, 31, 30, 0.25); /* look-strngth.md: 4/8/8 at 1080; scaled to web PROPOSED */
  --collective-block-offset: 24px;                             /* 3 U, look-collective.md, Depth */
  --collective-shadow: 0 24px 48px rgba(59, 31, 7, 0.12);      /* down 3 U, blur 6 U, Brown 12% */

  /* Pin in the name lettering (logo-and-names.md, The name lettering): Poppins capital height is about 0.7 em */
  --cap: 0.7em;
  --pin-h: calc(var(--cap) * 0.5);   /* Elliot, Nov 11 night: closer to a period than a letter */
  --pin-gap: calc(var(--cap) * 0.11);
  --name-gap: calc(var(--cap) / 3);

  /* Motion: PROPOSED (the playbook sets none) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 120ms; --dur-menu: 180ms; --dur-sheet: 240ms; --dur-hero: 600ms;

  /* Layers: PROPOSED */
  --z-header: 50; --z-menu: 60; --z-bar: 40;
}

@media (max-width: 1023px) { :root { --margin: 32px; } }
@media (max-width: 639px) {
  :root { --margin: 16px; --gutter: 16px; --section-gap: var(--u8); --header-h: 64px; --lettering-size: 22px; }
}