/* Shared type and colour tokens. Loaded last so it wins over the Webflow
   export in site.css and dark.css. One place to change ink or rules. */

:root {
  --ink-title:   #363840;  /* h1, section headings, project titles */
  --ink-body:    #5b606b;  /* every subtitle and description */
  --ink-muted:   #7c8089;  /* metadata: company, year, role */
  --link-accent: #975030;
  --rule:        #ececec;
  --rule-soft:   #f1efeb;
}

html[data-theme="dark"] {
  --ink-title:   #ece6dd;
  --ink-body:    #b8b2a8;  /* 8.5:1 on the dark ground; the old value was 2.85:1 */
  --ink-muted:   #8e8377;
  --link-accent: #e08a6c;
  --rule:        #2f2922;
  --rule-soft:   #272119;
}

/* Titles: one ink across the whole site. */
h1,
.heading-42,
.heading-47,
.proj-title,
.about-wrap h1,
.arch-wrap h1 { color: var(--ink-title); }

/* Subtitles: one size, one line height, one colour, everywhere. */
.paragraph-16,
.proj-blurb,
.arch-intro,
.about-wrap p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-body);
}

/* Metadata sits one step back from the subtitle. */
.proj-meta,
.arch-meta { color: var(--ink-muted); }

/* dark.css scopes its own colours under html[data-theme="dark"], which outranks
   a bare class selector. Match that specificity so the tokens still win. */
html[data-theme="dark"] .paragraph-16,
html[data-theme="dark"] .proj-blurb,
html[data-theme="dark"] .arch-intro,
html[data-theme="dark"] .about-wrap p { color: var(--ink-body); }

html[data-theme="dark"] h1,
html[data-theme="dark"] .heading-42,
html[data-theme="dark"] .heading-47,
html[data-theme="dark"] .proj-title { color: var(--ink-title); }

html[data-theme="dark"] .proj-meta,
html[data-theme="dark"] .arch-meta { color: var(--ink-muted); }