/* ============================================================================
   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: #EAE4D8;  /* muted surface — warmed a tad off cool greige (#842/#1028) */
  --rule: #CCC4B2;       /* hairline dividers — warmed a tad to sit on the parchment axis */
  --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: #DDE7E1;  /* info surface — de-blued off the clinical cyan cast (#1028) */
  --mint-wash: #E7EFE8;  /* success surface — de-blued toward a warmer sage (#1028) */
  --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);

  /* depth ink — the dark occlusion colour behind every hard-offset shadow and
     every modal / drawer scrim, carried as an R,G,B triplet so it composes
     under rgba(<triplet>, <alpha>). Held theme-INVARIANT on purpose: a shadow
     occludes and a scrim darkens, so the ink stays dark on the dark ground too
     — that keeps dark mode identical to today rather than flipping shadows
     light. Its default equals --ink's light form (a distinct occlusion role,
     not a second text ink). A skin may retint it. Pinned theme-invariant in
     css_contract SHARED_TOKENS (declared here, never in the dark block). */
  --shadow-ink: 11, 20, 22;

  /* brand-asset treatment — the register-marked D + wordmark ship as
     teal-on-transparent RASTER (webp), so they carry no CSS fill to recolour.
     Dark mode knocks them to light with a filter (see the dark block), not a
     colour swap; light leaves them untouched. Value is a filter chain, not a
     hex, so it is parity-neutral to the css_contract dark-colour check. */
  --logo-filter: none;

  /* 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;
}

/* ============================================================================
   Dark palette — "templar dark" (#842). Driven by `use_theme` (leptos-use
   use_color_mode → `data-theme="dark"` on <html>, persisted as `desync-theme`).
   Derived systematically from the light ladder above by ROLE, not by hue:

     - surfaces flip to deep near-black GREENS (never gray): parchment→base,
       limestone→raised, rule→hairline;
     - text ink lifts to light: slate (body) and ink (emphasis headings, the
       dominant --ink role: kpi/md/seq/feed/file-name) both go light;
     - accents (teal/mint/gold/rubric/danger) are LIFTED — brighter, more
       saturated — so they read as accents on the dark ground;
     - washes invert to dark tints (chip/alert grounds) and the *-deep steps,
       which are text on parchment, flip to light so they stay AA on dark;
     - --focus-ring and the --font-* roles are hue-free, so they inherit from
       :root unchanged (no color literal → theme-invariant, see css_contract
       dark-parity SHARED_TOKENS).

   WCAG AA (verified, normal-text 4.5:1): slate/parchment 11.2, ink/parchment
   15.4, teal/parchment 7.8, slate/limestone 10.1, btn-primary parchment/teal
   7.8, c-mint 9.1, c-gold 8.6, gold-deep 10.2, c-rubric 5.2, chip-error 5.2,
   destructive 5.2. The one relationship a token-only flip cannot hold — a
   bright accent FILL carrying the (now-light) --ink text (btn-mint/btn-gold,
   chip-mint/gold, chip-tier-high, badge-gold) and the epigraph's ink GROUND —
   is corrected by a tight `[data-theme="dark"]` override in components.css
   (dark --parchment text on the bright fills → 8.6-9.1; deep ground for the
   epigraph → 10.9). ============================================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* palette — surfaces deep green, ink lifted light, accents lifted */
  --teal: #6FB8B2;       /* lifted teal · primary ink / info on dark */
  --slate: #C4D0CA;      /* body / secondary text (light) */
  --ink: #E9F0EB;        /* emphasis heading text (brightest) */
  --parchment: #0E1A17;  /* base background — deep near-black green */
  --limestone: #172420;  /* raised muted surface */
  --rule: #2C3A35;       /* hairline dividers */
  --mint: #7FC8AE;       /* lifted mint · primary accent / success */
  --gold: #D9AE52;       /* lifted brass · warning */
  --rubric: #E06456;     /* lifted ERROR red */
  --danger: #D96A54;     /* lifted destructive / purge */

  /* washes invert to dark tints; deeps (text on parchment) flip to light */
  --teal-wash: #14312E;
  --mint-wash: #16302A;
  --gold-wash: #2E2716;
  --rubric-wash: #331A17;
  --teal-deep: #A9D6D0;
  --mint-deep: #9AD4C0;
  --gold-deep: #E4C070;

  /* liturgical seasonal accents — lifted for the dark ground, hues preserved.
     Mirror of the light set (source of truth: desync-ui/src/data/liturgical.rs). */
  --advent: #8B7BB0;
  --lent: #7E6A96;
  --gaudete: #D19AA6;
  --festal: #E0C46A;
  --ordinary: #7FA487;
  --pentecost: #E06456;

  /* logo inversion — the teal-on-transparent marks are near-invisible on the
     deep-green ground, so knock them to light (the sanctioned .logo-invert
     recipe, promoted to a theme-swapped token that Wordmark/LogoMark read). */
  --logo-filter: brightness(0) invert(1);
}

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); }