/*
 * LA Churches design tokens.
 * Authored 2026-04-18 per docs/DESIGN_SPEC.md section 4 (Typography) and 5 (Color).
 * Loaded AFTER base.css and theme-ubimissa.css so these values win in cascade.
 * Pure variables, no selectors other than :root.
 */

:root {
  /* ── Color (Cream paper, Cathedral gold, Pacific blue, Angeleno sunset) ── */
  --lac-bg:        #fafaf7;  /* cream paper */
  --lac-bg-warm:   #f5f0e6;  /* inset cards */
  --lac-ink:       #1a1410;  /* primary text */
  --lac-ink-2:     #6b5a48;  /* secondary text, captions */
  --lac-rule:      #e0d8cc;  /* hairline rules */
  --lac-red:       #8b2020;  /* rubrics only */
  --lac-gold:      #a08030;  /* Cathedral gold */
  --lac-gold-deep: #7a5e1f;  /* hover/pressed gold */
  --lac-stone:     #d6cfc0;  /* disabled, skeletons, pins */
  --lac-pacific:   #2c4a5c;  /* link blue, restrained */
  --lac-sunset:    #c26b4a;  /* live/now accent, once per screen */

  /* Dark mode sepia (applied via @media prefers-color-scheme: dark below) */
  --lac-bg-dark:     #141110;
  --lac-ink-dark:    #ece4d5;
  --lac-rule-dark:   #2a2420;
  --lac-red-dark:    #c25555;

  /* ── Typography stacks ── */
  --lac-serif:   "EB Garamond", "Adobe Caslon Pro", "Cormorant Garamond", Georgia, serif;
  --lac-display: "Cinzel", "Trajan Pro", "Cormorant SC", Georgia, serif;
  --lac-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale (1.200 minor third, base 18px) ── */
  --lac-text-xs:  13px;
  --lac-text-sm:  15px;
  --lac-text-md:  18px;
  --lac-text-lg:  20px;
  --lac-text-xl:  22px;
  --lac-text-2xl: 28px;
  --lac-text-3xl: 42px;

  --lac-leading-tight:  1.15;
  --lac-leading-normal: 1.55;
  --lac-leading-loose:  1.7;

  /* ── Spacing (4px base) ── */
  --lac-space-1:  4px;
  --lac-space-2:  8px;
  --lac-space-3:  12px;
  --lac-space-4:  16px;
  --lac-space-5:  24px;
  --lac-space-6:  32px;
  --lac-space-7:  48px;
  --lac-space-8:  64px;

  /* ── Layout widths ── */
  --lac-col-prose:   640px;
  --lac-col-wide:    960px;
  --lac-col-parish:  560px;

  /* ── Radii (restrained; the aesthetic is prayer-card, not SaaS) ── */
  --lac-radius-sm: 2px;
  --lac-radius-md: 4px;

  /* ── Focus ring ── */
  --lac-focus: 2px solid var(--lac-gold);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lac-bg:        var(--lac-bg-dark);
    --lac-bg-warm:   #1d1814;
    --lac-ink:       var(--lac-ink-dark);
    --lac-ink-2:     #a89982;
    --lac-rule:      var(--lac-rule-dark);
    --lac-red:       var(--lac-red-dark);
  }
}