/* TRISTYAN / EDITORIAL / CHARCOAL & BONE / 03
   Single source for both the project collection and /style-guide.html.
   Based on the owner's Desktop/Colour palette. Text variants are contrast-tuned.
   Change semantic roles here; avoid per-project button colours. */
:root {
  color-scheme:light;
  --color-paper:#EAEADE;
  --color-surface:#E1E1D5;
  --color-ink:#242424;
  --color-body:#464645;
  --color-muted:#62625F;
  --color-rule:#CACABE;
  --color-link:#355D7A;
  --color-focus:#355D7A;
  --color-pop:#21B1B6;
  --color-ready:#2F6D59;
  --color-ready-pop:#37D0A1;
  --color-soon:#8F4F30;
  --color-soon-pop:#D06A37;
  --color-danger:#A43649;
  --color-danger-pop:#D03751;
  --color-media:#191B1C;
  --color-media-ink:#F1F1E5;
  --color-media-rule:rgba(241,241,229,.32);
  --color-media-overlay:rgba(25,27,28,.84);
  --color-photo-overlay:rgba(25,27,28,.16);
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --body:'Fira Sans','Segoe UI',sans-serif;
  --mono:'Fira Code',Consolas,monospace;
  --osd:var(--body);
  --display:var(--body);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;
  --radius-small:4px; --hit-target:44px; --motion-quick:120ms; --motion-normal:220ms;
  --media-ratio:1.777777778;
  --ease:cubic-bezier(.2,.8,.2,1); --measure:760px; --site-width:1120px;
  --type-display:600 clamp(2.5rem,4.2vw,3.5rem)/1.12 var(--serif);
  --type-project:500 clamp(1.75rem,3vw,2.25rem)/1.25 var(--serif);
  --type-section:700 1.3125rem/1.3 var(--body);
  --type-body:400 1rem/1.6 var(--body);
  --type-label:400 .75rem/1.5 var(--body);
  --type-action:500 .875rem/1.4 var(--body);
  --type-navigation:400 .875rem/1.4 var(--body);
  /* Existing component aliases. Keep component values in semantic roles above. */
  --page:var(--color-paper); --surface:var(--color-surface); --ink:var(--color-ink);
  --soft:var(--color-body); --muted:var(--color-muted); --rule:var(--color-rule);
  --accent:var(--color-link); --focus:var(--color-focus); --cream:var(--color-media-ink);
  --dark:var(--color-paper); --deep:var(--color-media); --quiet:var(--color-muted);
  --signal:var(--color-pop); --signal-ink:var(--color-link); --gutter:0px;
}
html[data-theme=dark] {
  color-scheme:dark;
  --color-paper:#202020; --color-surface:#282828; --color-ink:#F1F1E5;
  --color-body:#D1D1C5; --color-muted:#B8B8AE; --color-rule:#414141;
  --color-link:#9DC5DC; --color-focus:#9DC5DC;
  --color-ready:#6BD9B4; --color-soon:#E2B497; --color-danger:#E29DA2;
}