/* ============================================================
   CULT+MATH — Design Tokens
   Ipalibo Da-Wariboko · July 23, 2026 · CULT+MATH LLC

   Material Design 3 token structure, CULT+MATH palette and
   typefaces. Tokens only — no Material components, no Roboto,
   no JavaScript, no external dependencies.

   Reference: m3.material.io — type scale roles (display /
   headline / title / body / label x large / medium / small),
   tone-based surface containers, and contrast-paired color
   roles.

   RULE: nothing on this site sets a font-size, colour or
   weight directly. Everything reads a token from this file.
   If a value is missing here, add it here.
   ============================================================ */

:root {

  /* --- TYPEFACES ------------------------------------------
     MD3 maps two reference faces: "brand" carries display and
     headline; "plain" carries title, body and label. Ours are
     Playfair and DM Sans. Roboto is not used.               */

  --md-ref-typeface-brand: 'Playfair Display', Georgia, serif;
  --md-ref-typeface-plain: 'DM Sans', system-ui, -apple-system, sans-serif;
  --md-ref-typeface-mono:  'DM Mono', ui-monospace, monospace;

  /* --- TYPE SCALE -----------------------------------------
     MD3 baseline sizes. The floor is 11px (label small) and
     labels are 500 weight, never 300. Body is 400 — light
     weights thin out against dark surfaces.                 */

  /* Display — hero only. One per page, maximum.              */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size: clamp(38px, 6.4vw, 66px);
  --md-sys-typescale-display-large-line-height: 1.06;
  --md-sys-typescale-display-large-weight: 800;
  --md-sys-typescale-display-large-tracking: -0.025em;

  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size: clamp(30px, 4.4vw, 36px);
  --md-sys-typescale-display-small-line-height: 1.12;
  --md-sys-typescale-display-small-weight: 700;
  --md-sys-typescale-display-small-tracking: -0.02em;

  /* Headline — section openers.                             */
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 1.2;
  --md-sys-typescale-headline-medium-weight: 700;
  --md-sys-typescale-headline-medium-tracking: -0.01em;

  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 1.25;
  --md-sys-typescale-headline-small-weight: 700;
  --md-sys-typescale-headline-small-tracking: -0.01em;

  /* Title — card headings, sub-sections.                    */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 1.28;
  --md-sys-typescale-title-large-weight: 700;
  --md-sys-typescale-title-large-tracking: -0.008em;

  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size: 17px;
  --md-sys-typescale-title-medium-line-height: 1.4;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0;

  /* Body — everything a person actually reads.
     Body large is the marketing default. Reading measure is
     capped at --cm-measure; long-form uses --cm-measure-long. */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size: 17px;
  --md-sys-typescale-body-large-line-height: 1.75;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0;

  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: 15px;
  --md-sys-typescale-body-medium-line-height: 1.68;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-tracking: 0;

  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size: 13px;
  --md-sys-typescale-body-small-line-height: 1.6;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-tracking: 0;

  /* Label — eyebrows, tags, nav, buttons, meta.
     These were 9-11.5px. MD3's own floor is 11px, and label
     text is 500 weight. Tracking is reduced from 0.16em:
     uppercase + heavy tracking + small size is the exact
     combination that made the old site hard to read.        */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-mono);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 1.45;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.08em;

  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-mono);
  --md-sys-typescale-label-medium-size: 12.5px;
  --md-sys-typescale-label-medium-line-height: 1.5;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.09em;

  --md-sys-typescale-label-small-font: var(--md-ref-typeface-mono);
  --md-sys-typescale-label-small-size: 11.5px;
  --md-sys-typescale-label-small-line-height: 1.5;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-tracking: 0.09em;

  /* --- COLOR ROLES ----------------------------------------
     MD3 tone-based surfaces. The page stays #0A0A0A — the
     spec's argument against near-black is about bright
     imagery, and this site is text. What we do adopt is the
     container ladder: the old page-to-card step was too
     small to read as a container at all.

     Every pairing below is contrast-checked. The dimmest
     text on the lightest surface is 6.22:1 (AA needs 4.5).
     There is deliberately NO token for text dimmer than
     on-surface-variant. The old --muted (#7A7A7A) failed
     AA on cards at 4.29:1 and has been retired.            */

  --md-sys-color-surface: #0A0A0A;
  --md-sys-color-surface-container-lowest: #050505;
  --md-sys-color-surface-container-low: #131313;
  --md-sys-color-surface-container: #181818;
  --md-sys-color-surface-container-high: #1F1F1F;
  --md-sys-color-surface-container-highest: #262626;

  --md-sys-color-on-surface: #FAFAF8;          /* headings, emphasis  18.94:1 */
  --md-sys-color-on-surface-body: #D8D8D4;     /* reading text        13.85:1 */
  --md-sys-color-on-surface-variant: #A8A6A0;  /* meta, secondary      8.13:1 */

  --md-sys-color-primary: #00C96A;             /* accent               9.02:1 */
  --md-sys-color-on-primary: #0A0A0A;
  --md-sys-color-primary-container: #0D2E1A;
  --md-sys-color-on-primary-container: #AAEECA;

  --md-sys-color-error: #FF6B6B;
  --md-sys-color-error-container: #2A0A0A;

  --md-sys-color-outline: rgba(255, 255, 255, 0.14);
  --md-sys-color-outline-variant: rgba(255, 255, 255, 0.07);

  /* --- SHAPE + MEASURE ------------------------------------ */

  --md-sys-shape-corner-extra-small: 3px;
  --md-sys-shape-corner-small: 6px;
  --md-sys-shape-corner-medium: 10px;

  /* The reading measure. Body copy was running to 980px —
     about 115 characters a line, against a comfortable
     45-75. This is the blog's reading layer, promoted to
     apply everywhere.                                       */
  --cm-measure: 660px;
  --cm-measure-long: 680px;
  --cm-gutter: 30px;
  --cm-page-max: 1000px;

  /* --- LEGACY ALIASES -------------------------------------
     Existing rules across the site still reference these
     names. Mapped here so nothing breaks mid-refactor.
     Retire them file by file, then delete this block.       */

  --black: var(--md-sys-color-surface);
  --dark: var(--md-sys-color-surface-container-low);
  --surface: var(--md-sys-color-surface-container-high);
  --card: var(--md-sys-color-surface-container);
  --green: var(--md-sys-color-primary);
  --green-dim: var(--md-sys-color-primary-container);
  --green-text: var(--md-sys-color-on-primary-container);
  --white: var(--md-sys-color-on-surface);
  --body-text: var(--md-sys-color-on-surface-body);
  --muted-lt: var(--md-sys-color-on-surface-variant);
  --muted: var(--md-sys-color-on-surface-variant);   /* was #7A7A7A — failed AA */
  --border: var(--md-sys-color-outline-variant);
  --border-md: var(--md-sys-color-outline);
  --measure: var(--cm-measure-long);
  --serif: var(--md-ref-typeface-brand);
  --sans: var(--md-ref-typeface-plain);
  --mono: var(--md-ref-typeface-mono);
}

/* ============================================================
   BASE
   ============================================================ */

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-body);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPE ROLE CLASSES
   Apply these instead of setting sizes inline.
   ============================================================ */

.md-display-large,
.md-display-small,
.md-headline-medium,
.md-headline-small,
.md-title-large,
.md-title-medium,
.md-body-large,
.md-body-medium,
.md-body-small,
.md-label-large,
.md-label-medium,
.md-label-small { margin: 0; }

.md-display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  color: var(--md-sys-color-on-surface);
}

.md-display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  font-weight: var(--md-sys-typescale-display-small-weight);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  color: var(--md-sys-color-on-surface);
}

.md-headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  color: var(--md-sys-color-on-surface);
}

.md-headline-small {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  color: var(--md-sys-color-on-surface);
}

.md-title-large {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  color: var(--md-sys-color-on-surface);
}

.md-title-medium {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
}

.md-body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  color: var(--md-sys-color-on-surface-body);
  max-width: var(--cm-measure);
}

.md-body-medium {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  color: var(--md-sys-color-on-surface-body);
}

.md-body-small {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-weight: var(--md-sys-typescale-body-small-weight);
  color: var(--md-sys-color-on-surface-variant);
}

.md-label-large {
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-transform: uppercase;
}

.md-label-medium {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-transform: uppercase;
}

.md-label-small {
  font-family: var(--md-sys-typescale-label-small-font);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  text-transform: uppercase;
}

/* ============================================================
   ACCESSIBILITY FLOOR
   ============================================================ */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 3px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}