/* ============================================================================
   Desync brand tokens — design primitives.
   Palette ported from brand-demo-draft-6.html (cleaned); --rubric (#C0392B) added
   as the error signal red. Typography is the v2 hybrid system (the pixel font is gone).
   ============================================================================ */

/* Hybrid type system (Pairing A) — self-hosted woff2, so the brand survives offline.
   - Cormorant Garamond (serif) → hero headlines, the manifesto, Latin / Catholic moments.
   - IBM Plex Mono (mono)       → section + system headers, labels, ALL data/numerals.
                                   The clean instrument voice; replaces the gimmicky pixel font.
   - Inter (sans)               → body / UI / running copy.
   The stencil DESYNC wordmark stays a logo asset (an image), not body type. */

/* Cormorant Garamond */
@font-face { font-family: "Cormorant"; src: url(/fonts/cormorant-garamond-v21-latin-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(/fonts/cormorant-garamond-v21-latin-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(/fonts/cormorant-garamond-v21-latin-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(/fonts/cormorant-garamond-v21-latin-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(/fonts/cormorant-garamond-v21-latin-600italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

/* Inter */
@font-face { font-family: "Inter"; src: url(/fonts/inter-v20-latin-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-v20-latin-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-v20-latin-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* IBM Plex Mono */
@font-face { font-family: "Plex Mono"; src: url(/fonts/ibm-plex-mono-v20-latin-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/ibm-plex-mono-v20-latin-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/ibm-plex-mono-v20-latin-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* palette */
  --teal: #0E3D41;       /* primary surface ink · info signal */
  --slate: #283238;      /* body / secondary text */
  --ink: #0B1416;        /* type on light accents */
  --parchment: #F7F4EE;  /* default background */
  --limestone: #E7E3DA;  /* muted surface */
  --rule: #C9C3B5;       /* hairline dividers */
  --mint: #6FA69C;       /* primary accent · success signal */
  --gold: #B4892C;       /* tertiary signal · warning */
  --rubric: #C0392B;     /* ERROR signal — liturgical "rubric" red */
  --danger: #7A2A20;     /* destructive / purge (darker oxblood) */

  /* extended ramps — washes (tinted surfaces for chips, alerts, table stripes)
     and deeps (text-safe darker steps that hold AA contrast on parchment). */
  --teal-wash: #DCE7E6;
  --mint-wash: #E4EFEC;
  --gold-wash: #F1E7D0;
  --rubric-wash: #F3DEDA;
  --teal-deep: #082528;
  --mint-deep: #4E837A;
  --gold-deep: #8A6716;

  /* liturgical seasonal accents — calendar, the Hours, and Horologium surfaces
     only; the core palette stays in charge of the UI. Season mapping is the
     Church's own: violet for Advent and Lent, rose for Gaudete and Laetare,
     festal gold for Christmas and Easter, green for Ordinary Time, red for
     Palm Sunday and Pentecost. Source of truth: desync-ui/src/data/liturgical.rs
     (mirror any change here AND there). */
  --advent: #54456E;
  --lent: #4D3A5A;
  --gaudete: #B26E7A;
  --festal: #C5A12E;
  --ordinary: #4E6B54;
  --pentecost: #C0392B;

  /* a11y — keyboard focus ring (parchment gap + teal halo) */
  --focus-ring: 0 0 0 2px var(--parchment), 0 0 0 4px var(--teal);

  /* type roles — swap the whole system from one place */
  --font-serif: "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:  "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
html, body {
  background: var(--parchment);
  color: var(--slate);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Type primitives ---------------------------------------------------------- */
/* .serif — the Catholic/editorial soul: hero, manifesto, Latin epigraphs + mottos. */
.serif {
  font-family: var(--font-serif);
  letter-spacing: 0;
}
/* .mono — the instrument: section/system headers, labels, data, numerals. */
.mono {
  font-family: var(--font-mono);
  letter-spacing: .02em;
}
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Surface primitives ------------------------------------------------------- */
.bg-grid {
  background-color: var(--parchment);
  background-image:
    linear-gradient(to right, rgba(14, 61, 65, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 61, 65, .06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hairline { border-color: var(--rule); }

/* Semantic colour helpers (so Rust returns short class names, not arbitrary
   Tailwind values). Map 1:1 onto the signal tokens. */
.c-teal    { color: var(--teal); }
.c-slate   { color: var(--slate); }
.c-ink     { color: var(--ink); }
.c-mint    { color: var(--mint); }
.c-gold    { color: var(--gold); }
.c-rubric  { color: var(--rubric); }
.c-danger  { color: var(--danger); }

/* Wash surface — tinted background that keeps slate/ink type readable.
   Only the rubric wash ships as a helper class today; the other washes are
   consumed as var(--*-wash) custom properties directly. */
.bg-rubric-wash { background: var(--rubric-wash); }