/* Zeal Publishers — design tokens.
 * Brand colors and type families are FIXED (live-site Elementor globals). Everything
 * else here is derived from them: tints/shades only, no new hues.
 * Contrast notes are WCAG ratios measured against the surface named.            */

/* ---- Self-hosted fonts (latin subset only; from Google Fonts, OFL) ----
 * Hind 400/500/600 + Lora variable 400–700 roman & italic. _layout.html preloads the
 * two that paint the first screen (Lora roman, Hind 400). The "Fallback" faces are
 * local fonts scaled to Lora/Hind metrics so the swap doesn't shift the layout.     */
@font-face { font-family: "Hind"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/hind-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hind"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/hind-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hind"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/hind-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/lora-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallbacks (computed with fontTools from the files above). */
@font-face { font-family: "Lora Fallback"; src: local("Georgia"), local("Times New Roman");
  size-adjust: 104.6%; ascent-override: 96.1%; descent-override: 26.2%; line-gap-override: 0%; }
@font-face { font-family: "Hind Fallback"; src: local("Arial"), local("Helvetica");
  size-adjust: 95.4%; ascent-override: 110.6%; descent-override: 57.3%; line-gap-override: 0%; }

:root {
  /* ---- Brand palette (fixed) ---- */
  --z-amber: #EF9A10;          /* signature accent: quill, primary buttons */
  --z-green: #064530;          /* primary dark surface */
  --z-sage: #476B4C;
  --z-purple: #A082C5;         /* secondary accent: the amber→purple pairing */
  --z-cream: #FAF9F5;
  --z-parchment: #EEDFCC;
  --z-charcoal: #282828;       /* text */
  --z-red: #F13B3A;            /* rare accent only (editor's marks) */
  --z-white: #FFFFFF;

  /* ---- Derived tints & shades ---- */
  --z-amber-ink: #8C5300;      /* amber as TEXT on light: 5.95 on cream, 4.79 on parchment */
  --z-amber-hover: #F5AE3A;    /* lighter amber for hovers on dark */
  --z-amber-press: #D6860A;
  --z-amber-tint: #FBE5BF;
  --z-green-950: #021D13;
  --z-green-900: #04301F;      /* deepest band; amber on it = 6.42 */
  --z-green-800: #053A29;
  --z-green-600: #0A5A3F;
  --z-green-200: #C9D6CD;      /* text on green: 7.35 */
  --z-green-100: #DCE6DF;
  --z-green-50: #EEF3EF;
  --z-sage-300: #9DB5A5;       /* muted text on green: 5.04 */
  --z-purple-ink: #6B4E96;     /* purple as TEXT on light: 6.32 on cream */
  --z-purple-200: #CDB8E6;     /* purple text on green: 6.1 */
  --z-purple-tint: #EDE6F5;
  --z-parchment-50: #F6EFE5;
  --z-parchment-300: #E2CDB2;
  --z-ink-muted: #5F5A52;      /* body-muted on cream 6.49, on parchment 5.23 */
  --z-red-ink: #C42A29;        /* red as TEXT on light: 5.37 */

  /* ---- Type ---- */
  --z-font-display: "Lora", "Lora Fallback", Georgia, "Times New Roman", serif;
  --z-font-body: "Hind", "Hind Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --z-fs-2xs: 0.75rem;                                        /* 12 */
  --z-fs-xs: 0.8125rem;                                       /* 13 */
  --z-fs-sm: 0.9375rem;                                       /* 15 */
  --z-fs-base: 1.0625rem;                                     /* 17 */
  --z-fs-md: 1.1875rem;                                       /* 19 */
  --z-fs-lg: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);     /* 21 → 26 */
  --z-fs-xl: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);      /* 26 → 38 */
  --z-fs-2xl: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);           /* 32 → 56 */
  --z-fs-3xl: clamp(2.5rem, 1.4rem + 4.8vw, 5.25rem);         /* 40 → 84 */
  --z-fs-display: clamp(3rem, 1.2rem + 7.6vw, 8.5rem);        /* 48 → 136 */

  --z-lh-tight: 1.04;
  --z-lh-snug: 1.18;
  --z-lh-body: 1.62;
  --z-track-display: -0.025em;
  --z-track-caps: 0.14em;

  /* ---- Space (4px grid) ---- */
  --z-s-1: 0.25rem;  --z-s-2: 0.5rem;  --z-s-3: 0.75rem; --z-s-4: 1rem;
  --z-s-5: 1.5rem;   --z-s-6: 2rem;    --z-s-7: 3rem;    --z-s-8: 4rem;
  --z-s-9: 6rem;     --z-s-10: 8rem;
  --z-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --z-section-sm: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
  --z-gutter: clamp(1rem, 0.4rem + 3vw, 2.75rem);
  --z-container: 1240px;
  --z-container-wide: 1440px;
  --z-container-text: 44rem;
  --z-header-h: 76px;

  /* ---- Shape ---- */
  --z-r-xs: 4px; --z-r-sm: 8px; --z-r-md: 14px; --z-r-lg: 22px; --z-r-xl: 32px;
  --z-r-pill: 999px;

  /* ---- Elevation (green-tinted, never grey-blue) ---- */
  --z-shadow-1: 0 1px 2px rgba(4, 48, 31, .06), 0 3px 10px rgba(4, 48, 31, .05);
  --z-shadow-2: 0 2px 4px rgba(4, 48, 31, .05), 0 14px 34px -12px rgba(4, 48, 31, .22);
  --z-shadow-3: 0 6px 12px rgba(4, 48, 31, .06), 0 36px 70px -24px rgba(4, 48, 31, .38);
  --z-shadow-book: 2px 2px 0 rgba(0,0,0,.06), 18px 28px 50px -18px rgba(2, 29, 19, .55);

  /* ---- Motion ---- */
  --z-dur-1: 160ms;
  --z-dur-2: 320ms;
  --z-dur-3: 640ms;
  --z-dur-4: 1100ms;
  --z-dur-5: 1800ms;
  --z-ease-out: cubic-bezier(.22, 1, .36, 1);
  --z-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --z-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --z-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --z-stagger: 70ms;

  /* ---- Textures (inline SVG, no requests) ---- */
  --z-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --z-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Surfaces: set on any section; components read these semantic vars ---- */
:root,
.z-on-cream {
  --bg: var(--z-cream); --fg: var(--z-charcoal); --fg-strong: var(--z-green);
  --fg-muted: var(--z-ink-muted); --accent: var(--z-amber); --accent-ink: var(--z-amber-ink);
  --line: rgba(40, 40, 40, .12); --line-strong: rgba(40, 40, 40, .24);
  --card: var(--z-white); --field: var(--z-white); --focus: var(--z-green);
  --link: var(--z-green); --link-hover: var(--z-amber-ink);
  --badge-bg: var(--z-amber-tint); --badge-fg: var(--z-amber-ink);
  --field-bd: rgba(40, 40, 40, .26); --err: var(--z-red-ink);
  --check-bg: var(--z-green-50); --check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23064530' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E");
}
.z-on-parchment {
  --bg: var(--z-parchment); --fg: var(--z-charcoal); --fg-strong: var(--z-green);
  --fg-muted: var(--z-ink-muted); --accent: var(--z-amber); --accent-ink: #7A4800;
  --line: rgba(40, 40, 40, .14); --line-strong: rgba(40, 40, 40, .28);
  --card: var(--z-cream); --field: var(--z-white); --focus: var(--z-green);
  --link: var(--z-green); --link-hover: #7A4800;
  --badge-bg: var(--z-amber-tint); --badge-fg: var(--z-amber-ink);
  --field-bd: rgba(40, 40, 40, .26); --err: var(--z-red-ink);
  --check-bg: var(--z-green-50); --check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23064530' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E");
}
.z-on-white {
  --bg: var(--z-white); --fg: var(--z-charcoal); --fg-strong: var(--z-green);
  --fg-muted: var(--z-ink-muted); --accent: var(--z-amber); --accent-ink: var(--z-amber-ink);
  --line: rgba(40, 40, 40, .1); --line-strong: rgba(40, 40, 40, .22);
  --card: var(--z-cream); --field: var(--z-white); --focus: var(--z-green);
  --link: var(--z-green); --link-hover: var(--z-amber-ink);
  --badge-bg: var(--z-amber-tint); --badge-fg: var(--z-amber-ink);
  --field-bd: rgba(40, 40, 40, .26); --err: var(--z-red-ink);
  --check-bg: var(--z-green-50); --check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23064530' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E");
}
.z-on-green,
.z-on-deep {
  --bg: var(--z-green); --fg: var(--z-cream); --fg-strong: var(--z-white);
  --fg-muted: var(--z-green-200); --accent: var(--z-amber); --accent-ink: var(--z-amber);
  --line: rgba(250, 249, 245, .16); --line-strong: rgba(250, 249, 245, .32);
  --card: rgba(250, 249, 245, .05); --field: var(--z-white); --focus: var(--z-amber);
  --link: var(--z-cream); --link-hover: var(--z-amber);
  --badge-bg: rgba(239,154,16,.14); --badge-fg: var(--z-amber);
  --field-bd: transparent; --err: #FFB4B4;
  --check-bg: rgba(239,154,16,.16); --check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23EF9A10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E");
}
.z-on-deep { --bg: var(--z-green-900); }