/* Early Church Fathers design tokens. Load before ecf.css. */

/* ---------- TOKENS: LIGHT (parchment) ---------- */
:root, :host, [data-theme="light"] {
  --ecf-color-bg: #E5D3AD;            /* page parchment */
  --ecf-color-surface: #F5EBD2;       /* reading sheet */
  --ecf-color-surface-raised: #FBF5E6;/* inputs, code */
  --ecf-color-ink: #2A1D12;           /* body text */
  --ecf-color-ink-muted: #56422E;     /* secondary text */
  --ecf-color-rubric: #9E1F14;        /* red ink: headings, links, primary action */
  --ecf-color-rubric-strong: #5E1C12; /* hover, pressed */
  --ecf-color-on-rubric: #F8F0DB;     /* text on red */
  --ecf-color-gold: #D8B055;          /* gold leaf: ornament only, never under body text */
  --ecf-color-gold-light: #EDD083;
  --ecf-color-gold-deep: #BF9438;
  --ecf-color-bole: #7E2A1A;          /* red clay border of an icon board */
  --ecf-color-lapis: #1E3A6E;
  --ecf-color-wine: #7A1E2B;
  --ecf-color-olive: #4B5320;
  --ecf-color-rule: #BFA476;          /* hairlines, sheet edges */
  --ecf-color-rule-strong: #56422E;   /* input borders */
  --ecf-color-focus: #2A1D12;
  --ecf-color-mark: rgba(216, 176, 85, 0.5); /* search match highlight */
  --ecf-color-pass: #2F4A1C;
  --ecf-color-fail: #8A1A10;
  --ecf-color-info: #1E3A6E;
  --ecf-color-warn: #6B4A00;
  --ecf-texture-page: url(../assets/parchment-page.jpg);
  --ecf-texture-sheet: url(../assets/parchment-sheet.jpg);
  --ecf-shadow-vignette: inset 0 0 180px rgba(110, 72, 30, 0.22);
  --ecf-shadow-sheet: inset 0 0 80px rgba(122, 84, 40, 0.2), 0 1px 0 rgba(90, 60, 25, 0.25);
  --ecf-ruling: rgba(122, 84, 40, 0.22);

  /* type */
  --ecf-font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;          /* titles, wordmark, initials only */
  --ecf-font-book: 'Gentium Book Plus', 'Noto Serif Hebrew', Georgia, serif; /* all reading text */
  --ecf-font-ui: 'Source Sans 3', system-ui, -apple-system, sans-serif;      /* labels, buttons, tables */
  --ecf-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;          /* code, server address */
  --ecf-text-xs: 13px; --ecf-text-sm: 15px; --ecf-text-md: 17px; --ecf-text-body: 19px;
  --ecf-text-read: 20px; --ecf-text-lg: 24px; --ecf-text-xl: 32px; --ecf-text-2xl: 44px; --ecf-text-3xl: 54px;
  --ecf-leading-tight: 1.15; --ecf-leading-ui: 1.45; --ecf-leading-body: 1.65; --ecf-leading-read: 34px;
  --ecf-measure: 66ch;                /* reading line length: 60 to 75 characters */

  /* space, radius, size */
  --ecf-space-1: 4px; --ecf-space-2: 8px; --ecf-space-3: 12px; --ecf-space-4: 16px; --ecf-space-5: 24px;
  --ecf-space-6: 32px; --ecf-space-7: 48px; --ecf-space-8: 64px; --ecf-space-9: 96px;
  --ecf-radius-sm: 2px; --ecf-radius-md: 4px; --ecf-radius-pill: 999px;
  --ecf-touch: 44px;                  /* minimum touch target */
  --ecf-page-max: 1160px; --ecf-gutter: clamp(16px, 5cqi, 64px);
  /* breakpoints (documented; CSS cannot read variables in queries): phone and iPhone Duo (both states) < 720px, tablet 720 to 959px, desktop >= 960px. Queries are container queries on .ecf, so a page also adapts inside a narrow pane */
}

/* ---------- TOKENS: DARK (candle-lit church) ---------- */
[data-theme="dark"] {
  --ecf-color-bg: #17110C;
  --ecf-color-surface: #211811;
  --ecf-color-surface-raised: #2A1F16;
  --ecf-color-ink: #EBDDC3;
  --ecf-color-ink-muted: #B9A788;
  --ecf-color-rubric: #E9967E;
  --ecf-color-rubric-strong: #F4B9A6;
  --ecf-color-on-rubric: #17110C;
  --ecf-color-gold: #D9A84A;
  --ecf-color-gold-light: #F0CB7E;
  --ecf-color-gold-deep: #A87B28;
  --ecf-color-bole: #5A1E13;
  --ecf-color-lapis: #8FB0E8;
  --ecf-color-wine: #D98A97;
  --ecf-color-olive: #A9B27A;
  --ecf-color-rule: #4A3A28;
  --ecf-color-rule-strong: #B9A788;
  --ecf-color-focus: #F0CB7E;
  --ecf-color-mark: rgba(217, 168, 74, 0.32);
  --ecf-color-pass: #B7CF8F;
  --ecf-color-fail: #F0A08C;
  --ecf-color-info: #A9C2EE;
  --ecf-color-warn: #E8C36A;
  --ecf-texture-page: none;
  --ecf-texture-sheet: none;
  --ecf-shadow-vignette: inset 0 0 220px rgba(0, 0, 0, 0.55);
  --ecf-shadow-sheet: inset 0 0 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(217, 168, 74, 0.08);
  --ecf-ruling: rgba(217, 168, 74, 0.14);
}