/* ============================================================
   TK FITNESS PGH, design tokens
   ACSS-mappable: every value here maps to an Automatic.css
   variable or a Bricks global variable at convert time.
   Palette source: the real TK Fitness logo (white high-contrast
   serif on black). Monochrome ink/bone plus one signal accent.
   ============================================================ */
:root{
  /* --- ink scale (maps to ACSS shade-*) --- */
  --ink:            #101215;
  --ink-2:          #1B1E22;
  --ink-3:          #26272B;
  --ink-line:       #33373D;
  --ink-muted:      #63686E;

  /* --- paper scale (maps to ACSS base-*) --- */
  --bone:           #F5F2EC;
  --bone-2:         #EBE6DD;
  --paper:          #FFFFFF;

  /* --- accent (ACSS action / primary) ---
     Sampled from the client's own flyer, 2026-08-25: #71C8D0. His whole brand system is
     monochrome plus this one cyan, so the site now matches the print material already in
     circulation instead of an accent we picked.
     Note the inversion from every previous palette here: cyan is LIGHT, so buttons carry
     INK text, not white. White on cyan measures 1.93:1 and is not usable.
     --flame       decorative (rules, icons, borders on dark)
     --flame-btn   filled-button ground, with ink text on it = 10.87:1
     --flame-text  small accent TEXT on a LIGHT ground, darkened to clear AA = 4.83:1
     --flame-soft  accent on the ink ground = 9.38:1 */
  --flame:          #71C8D0;
  --flame-btn:      #71C8D0;
  --flame-btn-hover:#8FD8DE;
  --flame-text:     #2F6F76;
  --flame-deep:     #2F6F76;
  --flame-soft:     #71C8D0;
  --on-accent:      #101215;

  /* --- semantic --- */
  --rule:           rgba(11,11,12,.14);
  --rule-dark:      rgba(245,242,236,.16);
  --good:           #4E9A6A;

  /* --- type (ACSS font stacks) --- */
  --f-display:      "Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:         "Archivo","Helvetica Neue",Arial,sans-serif;

  /* --- scale --- */
  --container:      1240px;
  --container-tight:940px;
  --radius:         4px;
  --radius-lg:      10px;

  /* --- elevation --- */
  --shadow-sm:      0 4px 16px rgba(11,11,12,.10);
  --shadow-md:      0 18px 44px rgba(11,11,12,.20);
  --shadow-flame:   0 10px 26px rgba(113,200,208,.30);

  /* --- rhythm --- */
  --section-y:      96px;
  --section-y-sm:   58px;
}