/* site/assets/css/tokens.css
   Read from Monoflo's compiled theme.css on 2026-09-15. Every brand value below
   is a literal declaration in their shipped CSS, not an eyeballed approximation.
   These custom property names are the contract every later phase styles against. */
:root {
  /* Brand, from their own CSS custom properties */
  --mf-blue:          #00529b;  /* --bs-monoflo-blue: logo, h2, card borders */
  --mf-green:         #24c111;  /* --bs-bright-green: accent, the hover fill */
  --mf-bright-blue:   #006cff;  /* --bs-bright-blue: links, primary buttons */

  /* Heavily used, but never given a variable on their own site */
  --mf-navy:          #002f5d;
  --mf-navy-deep:     #001c37;

  /* Neutrals */
  --mf-slate:         #4da3d2;
  --mf-grey:          #999b9e;
  --mf-grey-dark:     #77787b;
  --mf-ink:           #2c2c2c;

  /* Type. EXTENDED widths only. Their site ships no normal-width face.
     The width is the distinctive thing about Monoflo's identity and never
     changes. The WEIGHT is a scale, not a single value: Black Extended set
     everywhere reads as shouting, so 900 and 800 are reserved for the brand
     lockup and the one hero headline, headings run at Medium Extended, and
     body, labels and specs sit at Extended or Light Extended. */
  --mf-font: "Helvetica Neue LT Pro", "HelveticaNeueLTPro-Ex", Arial, sans-serif;
  --mf-weight-display: 900;   /* hero headline only */
  --mf-weight-lockup:  800;   /* the tagline that sits with the monogram */
  --mf-weight-heading: 500;   /* every h2 and h3 on the site */
  --mf-weight-body:    400;
  --mf-weight-quiet:   300;

  /* Signature pill button */
  --mf-radius-pill:   2em;
  --mf-border-btn:    3px;

  /* Their 7px colour-coded card top-border system */
  --mf-card-rule:     7px;

  /* Extensions of the above, added here so later phases have one source.
     Tracking: their .btn and .display-7 both declare `letter-spacing: 5%`,
     which is not a valid CSS length, so browsers discard it and their buttons
     ship at normal tracking. 0.05em is the value that was meant. */
  --mf-tracking-btn:  0.05em;

  /* Fluid heading sizes, matching their clamp() overrides */
  --mf-size-h1:       clamp(1.6rem, 3vw, 2.75rem);
  --mf-size-h2:       clamp(1.25rem, 1.9vw, 1.75rem);
  --mf-size-h3:       clamp(1.0625rem, 1.3vw, 1.25rem);
  --mf-size-body:     1rem;
  --mf-size-small:    0.8125rem;
  --mf-leading-head:  1.2;
  --mf-leading-body:  1.5;

  /* Bootstrap's spacer scale, which their theme leaves unmodified */
  --mf-space-1:       0.25rem;
  --mf-space-2:       0.5rem;
  --mf-space-3:       1rem;
  --mf-space-4:       1.5rem;
  --mf-space-5:       3rem;
  --mf-gutter:        2rem;   /* they override Bootstrap's 1.5rem */
  --mf-measure:       64ch;   /* prose line length ceiling */

  /* Focus ring, read from their theme */
  --mf-focus-ring:    0 0 0 0.25rem rgba(0, 108, 255, 0.35);
}

/* Reverse-on-dark is Monoflo's primary lockup: the white wordmark is what their
   own header loads, because that header sits on a dark gradient. Dark is
   therefore the default surface here, not an alternate theme. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --mf-surface:        var(--mf-navy-deep);
  --mf-surface-raised: var(--mf-navy);
  --mf-on-surface:     #ffffff;
  --mf-on-surface-dim: var(--mf-grey);
  --mf-rule:           rgba(255, 255, 255, 0.14);
  --mf-link:           #5ea0ff;   /* #006cff fails contrast on #001c37 */
}

:root[data-theme="light"] {
  --mf-surface:        #ffffff;
  --mf-surface-raised: #f5f5f5;
  --mf-on-surface:     #000000;
  --mf-on-surface-dim: var(--mf-grey-dark);
  --mf-rule:           #dee2e6;
  --mf-link:           var(--mf-bright-blue);
}