/* SHAFER — design tokens
   Values verified against the built logo files. Do not drift them apart.  */

:root {
  /* ---- colour --------------------------------------------------------- */
  --shafer-ink:      #14130F;  /* warm near-black. All text, the wordmark   */
  --shafer-paper:    #F6F3EC;  /* warm bone. The ground, and reversed type  */
  --shafer-graphite: #4A4741;  /* secondary text on paper only              */
  --shafer-walnut:   #7C5540;  /* the single accent                         */
  --shafer-rule:     #DAD4C8;  /* hairlines and borders. NEVER text         */

  /* Contrast, measured (WCAG 2.1):
       ink      on paper  16.77:1  AAA
       paper    on ink    16.77:1  AAA
       graphite on paper   8.35:1  AAA
       walnut   on paper   5.87:1  AA   — body text OK, AAA not met
       walnut   on ink     2.86:1  FAIL — never set text in walnut on ink
       graphite on ink     2.01:1  FAIL — on ink, text is paper or nothing
       rule     on paper   1.33:1  FAIL — decorative hairlines only         */

  /* ---- type ----------------------------------------------------------- */
  --shafer-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --shafer-text:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Bodoni Moda is optically sized. Below ~400px the H crossbar and A apex
     are hairlines and drop out — the wordmark renders as "SIIAFER". Pin the
     optical size; do not let the browser pick.                             */
  --shafer-display-opsz: 44;   /* everywhere                                */
  --shafer-display-opsz-xl: 96; /* sign scale / hero only, above ~400px     */

  --shafer-track-display: 0.26em; /* the wordmark's letterspacing           */
  --shafer-track-label:   0.38em; /* descriptors, eyebrows, small caps      */
  --shafer-track-colophon: 0.27em;

  /* ---- measure -------------------------------------------------------- */
  --shafer-rule-weight: 1px;
  --shafer-measure: 62ch;      /* max line length for long-form copy        */
}

/* Optical sizing must be explicit — `auto` is what breaks the wordmark. */
.shafer-display {
  font-family: var(--shafer-display);
  font-variation-settings: "opsz" 44, "wght" 500;
  font-optical-sizing: none;
  letter-spacing: var(--shafer-track-display);
  text-transform: uppercase;
  color: var(--shafer-ink);
}

.shafer-display--xl {           /* above ~400px rendered size only */
  font-variation-settings: "opsz" 96, "wght" 400;
}

.shafer-label {
  font-family: var(--shafer-text);
  font-weight: 500;
  letter-spacing: var(--shafer-track-label);
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--shafer-ink);
}

/* Tracked uppercase adds a trailing letterspace after the last glyph, which
   pushes optically-centred lines to the left. Pull it back. */
.shafer-label--centred {
  text-indent: var(--shafer-track-label);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shafer-bg: var(--shafer-ink);
    --shafer-fg: var(--shafer-paper);
    /* walnut stays decorative on dark — it cannot carry text there */
  }
}