/* tokens.css — type scale, spacing, radius, transitions + three themed palettes */

:root {
  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6.5vw, 7rem);

  /* 4px spacing system */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
}

/* ============================================================
   HUB THEME — neutral parchment/ink, the "library" that houses
   both books. Warm-neutral, understated, lets the two book
   accents (gold + crimson-gold) read as the visual leads.
   ============================================================ */
:root,
[data-theme='light'] {
  --color-bg: #f6f3ee;
  --color-surface: #fbf9f5;
  --color-surface-2: #fdfcfa;
  --color-surface-offset: #efe9df;
  --color-surface-offset-2: #e6ded1;
  --color-divider: #ddd3c2;
  --color-border: #d1c4a8;

  --color-text: #241f18;
  --color-text-muted: #6f6455;
  --color-text-faint: #ab9f8b;
  --color-text-inverse: #f6f3ee;

  --color-primary: #7a5a2e;
  --color-primary-hover: #5c4322;
  --color-primary-active: #3f2e17;
  --color-primary-highlight: #e6d8bd;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 60 / 0.08);
  --shadow-md: 0 4px 14px oklch(0.2 0.02 60 / 0.1);
  --shadow-lg: 0 16px 40px oklch(0.2 0.02 60 / 0.16);

  /* Covenant book accent (gold/amber) */
  --covenant-accent: #a3762f;
  --covenant-accent-hover: #8a5f22;
  --covenant-accent-highlight: #f0e2c4;

  /* Apocalyptic book accent (deep crimson + gold) */
  --apoc-accent: #8a2332;
  --apoc-accent-hover: #6e1a27;
  --apoc-accent-highlight: #e9d2b8;
}

[data-theme='dark'] {
  --color-bg: #161310;
  --color-surface: #1c1815;
  --color-surface-2: #211c18;
  --color-surface-offset: #211b16;
  --color-surface-offset-2: #2a231d;
  --color-divider: #332b23;
  --color-border: #423728;

  --color-text: #e8e0d3;
  --color-text-muted: #a89b86;
  --color-text-faint: #766a58;
  --color-text-inverse: #211c18;

  --color-primary: #d4ac6e;
  --color-primary-hover: #e2c187;
  --color-primary-active: #c99c55;
  --color-primary-highlight: #3a2f1f;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.5);

  --covenant-accent: #dcae5c;
  --covenant-accent-hover: #e8c07d;
  --covenant-accent-highlight: #3d331f;

  --apoc-accent: #d9707f;
  --apoc-accent-hover: #e69aa5;
  --apoc-accent-highlight: #402024;
}

/* ============================================================
   COVENANT THEME — "Cultivating and Maintaining a Healthy
   Covenant Relationship" — warm desert gold, betrothal /
   ancient Jewish wedding tradition. Applied via [data-book="covenant"]
   ============================================================ */
[data-book='covenant'] {
  --color-bg: #f9f2e4;
  --color-surface: #fdf8ee;
  --color-surface-2: #fffcf7;
  --color-surface-offset: #f1e4c8;
  --color-surface-offset-2: #e8d5a9;
  --color-divider: #ddc79a;
  --color-border: #c9a869;

  --color-text: #2c2115;
  --color-text-muted: #6f5a3d;
  --color-text-faint: #a68f68;
  --color-text-inverse: #fdf8ee;

  --color-primary: #96631f;
  --color-primary-hover: #764c15;
  --color-primary-active: #57380f;
  --color-primary-highlight: #ecdcb4;

  --color-accent-2: #6b4226;

  --shadow-sm: 0 1px 2px oklch(0.35 0.05 70 / 0.12);
  --shadow-md: 0 6px 20px oklch(0.35 0.05 70 / 0.14);
  --shadow-lg: 0 20px 48px oklch(0.35 0.05 70 / 0.2);
}

html[data-theme='dark'] [data-book='covenant'] {
  --color-bg: #1a140b;
  --color-surface: #211a10;
  --color-surface-2: #271f13;
  --color-surface-offset: #2a2011;
  --color-surface-offset-2: #352817;
  --color-divider: #423218;
  --color-border: #55401d;

  --color-text: #f1e4c6;
  --color-text-muted: #c3ac82;
  --color-text-faint: #8a7754;
  --color-text-inverse: #211a10;

  --color-primary: #e0a94f;
  --color-primary-hover: #edbd6c;
  --color-primary-active: #cf9639;
  --color-primary-highlight: #3d2f16;

  --color-accent-2: #d19768;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.55);
}

/* ============================================================
   APOCALYPTIC THEME — "Apocalyptic Visions of the 'Victorious'"
   — midnight/obsidian with crimson + gold prophetic light.
   Applied via [data-book="apocalyptic"]
   ============================================================ */
[data-book='apocalyptic'] {
  --color-bg: #0d0e14;
  --color-surface: #141520;
  --color-surface-2: #191a27;
  --color-surface-offset: #1b1c2a;
  --color-surface-offset-2: #22243450;
  --color-divider: #2b2c3d;
  --color-border: #3a3b52;

  --color-text: #ece9f2;
  --color-text-muted: #a5a2b8;
  --color-text-faint: #6c6a80;
  --color-text-inverse: #0d0e14;

  --color-primary: #c9993e;
  --color-primary-hover: #e0b357;
  --color-primary-active: #b3822c;
  --color-primary-highlight: #322816;

  --color-accent-2: #9c2b3a;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.5);
  --shadow-lg: 0 24px 56px oklch(0 0 0 / 0.65);
}

/* Apocalyptic theme is intentionally dark-first (matches subject);
   "light" toggle shifts to a deep dawn-slate rather than a bright page,
   preserving the reverent, dramatic mood at all times. */
html[data-theme='light'] [data-book='apocalyptic'] {
  --color-bg: #1b1c28;
  --color-surface: #212233;
  --color-surface-2: #262739;
  --color-surface-offset: #26273a;
  --color-surface-offset-2: #2e304a;
  --color-divider: #383a54;
  --color-border: #454764;

  --color-text: #f1eff7;
  --color-text-muted: #b7b4cc;
  --color-text-faint: #807da0;
  --color-text-inverse: #1b1c28;

  --color-primary: #dcae5c;
  --color-primary-hover: #e8c07d;
  --color-primary-active: #c99c55;
  --color-primary-highlight: #3a2f1f;

  --color-accent-2: #d9707f;
}

/* Dark-mode toggle script target (shared) */