/* ==========================================================================
   DMT Bodywork & Muscular Therapy - design tokens
   Source of truth: Design/README.md (concept handoff, 23 Aug 2026)
   Do not invent values. Every colour, size and space below is drawn from
   DMT Concept.dc.html. Zero radius, no shadows, anywhere.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --dmt-navy:        #121121; /* header, footer, hero bands, reviews band   */
  --dmt-navy-lift:   #1E1C33; /* cards and dropdown panels sitting on navy  */
  --dmt-olive:       #788C16; /* CTA on light, eyebrows, numerals, rules    */
  --dmt-green:       #158158; /* CTA on navy, links, active nav underline   */
  --dmt-grey:        #F2F2F2; /* page background                            */
  --dmt-white:       #FFFFFF; /* cards, alternating full width sections     */

  /* Text on light surfaces */
  --dmt-text:        #121121;
  --dmt-text-body:   #3A3850;
  --dmt-text-meta:   #6B6A7D;

  /* Text on navy surfaces */
  --dmt-on-navy:       #EDEAE3; /* 14.1:1 on navy */
  --dmt-on-navy-body:  #C9C6D4;
  --dmt-on-navy-meta:  #8B8A9C;
  --dmt-on-navy-fine:  #5D5C70;

  /* Borders */
  --dmt-border-card:    rgba(18, 17, 33, .12);
  --dmt-border-strong:  rgba(18, 17, 33, .22); /* secondary buttons, chips */
  --dmt-border-navy:    rgba(237, 234, 227, .10); /* header bottom rule */
  --dmt-border-navy-btn:rgba(237, 234, 227, .28); /* secondary button on navy */

  /* --- Typography -------------------------------------------------------- */
  --dmt-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dmt-font-body:    "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dmt-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --dmt-h1:        56px;  --dmt-h1-lh:   1.05;
  --dmt-h1-hero:   62px;
  --dmt-h2:        34px;  --dmt-h2-lh:   1.15;
  --dmt-h3:        19px;  --dmt-h3-lh:   1.30;
  --dmt-lead:      19px;  --dmt-lead-lh: 1.70;
  --dmt-body:      17px;  --dmt-body-lh: 1.70;
  --dmt-small:     14px;
  --dmt-eyebrow:   11px;
  --dmt-label:     11px;
  --dmt-button:    13px;
  --dmt-meta:      11px;

  /* --- Spacing, 8px base ------------------------------------------------- */
  --dmt-space-1:  8px;
  --dmt-space-2:  16px;
  --dmt-space-3:  24px;
  --dmt-space-4:  32px;
  --dmt-space-5:  44px;
  --dmt-space-6:  64px;
  --dmt-space-7:  96px;

  /* --- Layout ------------------------------------------------------------ */
  --dmt-max:          1280px;
  --dmt-measure:      700px; /* body copy column cap */
  --dmt-measure-tight:660px;
  --dmt-gutter:       44px;  /* desktop side padding */
  --dmt-section-y:    64px;  /* desktop section rhythm */
  --dmt-gap-card:     20px;
  --dmt-gap-blog:     24px;
  --dmt-gap-column:   56px;

  /* --- Shape ------------------------------------------------------------- */
  --dmt-radius: 0;           /* deliberate. Only review avatars are round.  */
  --dmt-header-h:      86px;
  --dmt-header-h-slim: 64px;
}

@media (max-width: 1199px) { /* laptop */
  :root { --dmt-gutter: 32px; --dmt-h1: 46px; --dmt-h1-hero: 52px; }
}

@media (max-width: 767px) { /* mobile */
  :root {
    --dmt-gutter: 20px;
    --dmt-section-y: 40px;
    --dmt-h1: 36px;  --dmt-h1-lh: 1.10;
    --dmt-h1-hero: 36px;
    --dmt-h2: 26px;  --dmt-h2-lh: 1.20;
    --dmt-h3: 17px;
    --dmt-lead: 16px;
    --dmt-body: 15px;
    --dmt-eyebrow: 10px;
    --dmt-header-h: var(--dmt-header-h-slim);
  }
}