/*
 * Gospel Library Reader — Design Tokens
 * Gold/parchment palette. Import this in any project for consistent styling.
 *
 * Fonts: load Google Fonts separately —
 *   Cormorant Garamond (display) + Lora (body)
 *   https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap
 */

:root {
  /* ── Text ─────────────────────────────────── */
  --gl-ink:        #2A2316;   /* primary text — warm near-black */
  --gl-ink-soft:   #6B5F4B;   /* body text */
  /* muted/muted-lt deepened for WCAG AA: at the old #9A8E78/#A89A80 the small
     secondary text they carry sat at ~2.7–3.2:1 on parchment. */
  --gl-muted:      #726751;   /* secondary/caption text — AA on white/parch */
  --gl-muted-lt:   #7E7358;   /* lighter muted — AA on white */

  /* ── Gold accent ──────────────────────────── */
  --gl-gold:       #B8862E;   /* primary accent */
  --gl-gold-lt:    #E2C06E;   /* gradient light end */
  /* gold-dk deepened from #AE7C22 for WCAG AA: it fills the primary CTA (white
     text) and doubles as gold text on light — the old mid-tone failed both. */
  --gl-gold-dk:    #9A6B12;   /* gradient dark end / hover / on-fill + text */
  --gl-gold-mid:   #BE941C;   /* mid gradient */
  --gl-on-gold:    #3A2E12;   /* text/icon on a gold fill (buttons) */
  --gl-accent-rule: rgba(184, 134, 46, 0.55); /* card top accent rule */
  --gl-gold-wash:  rgba(184, 134, 46, 0.18);  /* soft gold highlight fill */

  /* ── Surfaces ─────────────────────────────── */
  --gl-surface:    #FAF5EC;   /* page background */
  --gl-surface-warm: #F3EADB; /* section alternate */
  --gl-surface-card: #FFFFFF; /* card / popup background */
  --gl-surface-mid:  #FBF6EC; /* blockquote / inset */
  --gl-surface-footer: #EFE5D2; /* footer background */

  /* ── Borders ──────────────────────────────── */
  --gl-border:     rgba(184, 134, 46, 0.16); /* standard border */
  --gl-border-mid: rgba(184, 134, 46, 0.40); /* decorative / divider */

  /* ── Shadows ──────────────────────────────── */
  --gl-shadow-card:   0 10px 36px rgba(90, 66, 18, 0.06);
  --gl-shadow-btn:    0 12px 38px rgba(184, 134, 46, 0.30);
  --gl-shadow-btn-lg: 0 16px 50px rgba(184, 134, 46, 0.32);

  /* ── Radii ────────────────────────────────── */
  --gl-radius-sm: 3px;    /* buttons */
  --gl-radius:    6px;    /* cards */
  --gl-radius-lg: 14px;   /* overlays / panels */

  /* ── Typography ───────────────────────────── */
  --gl-font-display: 'Cormorant Garamond', Georgia, serif;
  --gl-font-body:    'Lora', 'Palatino Linotype', serif;

  /* ── Gradients ────────────────────────────── */
  --gl-gradient-gold: linear-gradient(135deg, var(--gl-gold-lt) 0%, var(--gl-gold-mid) 100%);
  --gl-gradient-logo: linear-gradient(135deg, var(--gl-gold-lt), var(--gl-gold-dk));

  /* ── Spacing scale ────────────────────────── */
  --gl-space-1: 4px;
  --gl-space-2: 8px;
  --gl-space-3: 12px;
  --gl-space-4: 16px;
  --gl-space-5: 24px;
  --gl-space-6: 32px;
  --gl-space-7: 48px;
  --gl-space-8: 64px;

  /* ── Type scale ───────────────────────────── */
  --gl-text-eyebrow:   11px;
  --gl-text-caption:   12.5px;
  --gl-text-body:      15px;
  --gl-text-body-lg:   17.5px;
  --gl-text-h4:        20px;
  --gl-text-h3:        clamp(26px, 3vw, 30px);
  --gl-text-h2:        clamp(38px, 5.5vw, 62px);
  --gl-text-h1:        clamp(40px, 6.5vw, 76px);
  --gl-text-display:   clamp(54px, 8.5vw, 100px);

  /* ── Semantic status colors ───────────────── */
  --gl-success:      #2E7D32;
  --gl-success-soft: rgba(46, 125, 50, 0.12);
  --gl-error:        #C62828;
  --gl-error-soft:   rgba(198, 40, 40, 0.10);
  --gl-warning:      #F9A825;
  --gl-warning-soft: rgba(249, 168, 37, 0.12);
  --gl-info:         var(--gl-gold);
  --gl-info-soft:    var(--gl-border);

  /* ── Focus ring ───────────────────────────── */
  --gl-focus-ring: 0 0 0 3px rgba(184, 134, 46, 0.35);
}

/* Dark theme — not yet covered by GLR-UI-Kit's sync.mjs (extension-only today),
   ported by hand from GLR-UI-Kit/tokens.css. Re-sync manually if the kit's
   dark block changes until sync.mjs grows website support. */
[data-theme=dark] {
  /* ── Text ─────────────────────────────────── */
  --gl-ink:        #EFE9DB;
  --gl-ink-soft:   #D1C7B7;
  --gl-muted:      #9C917C;
  --gl-muted-lt:   #867B67;

  /* ── Gold accent ──────────────────────────── */
  --gl-gold:       #D1A84D;
  --gl-gold-lt:    #E8D4A2;
  --gl-gold-dk:    #B08B43;
  --gl-gold-mid:   #CBB070;
  --gl-on-gold:    #221A0A;
  --gl-accent-rule: rgba(209, 168, 77, 0.3);
  --gl-gold-wash:  rgba(209, 168, 77, 0.15);

  /* ── Surfaces ─────────────────────────────── */
  --gl-surface:    #1A1916;
  --gl-surface-warm: #201E1B;
  --gl-surface-card: #262320;
  --gl-surface-mid:  #1C1A17;
  --gl-surface-footer: #151412;

  /* ── Borders ──────────────────────────────── */
  --gl-border:     rgba(209, 168, 77, 0.15);
  --gl-border-mid: rgba(209, 168, 77, 0.3);

  /* ── Shadows ──────────────────────────────── */
  --gl-shadow-card:   0 10px 36px rgba(0, 0, 0, 0.5);
  --gl-shadow-btn:    0 12px 38px rgba(0, 0, 0, 0.4);
  --gl-shadow-btn-lg: 0 16px 50px rgba(0, 0, 0, 0.45);

  /* ── Semantic status colors ───────────────── */
  --gl-success:      #81C784;
  --gl-success-soft: rgba(129, 199, 132, 0.12);
  --gl-error:        #E57373;
  --gl-error-soft:   rgba(229, 115, 115, 0.10);
  --gl-warning:      #FFD54F;
  --gl-warning-soft: rgba(255, 213, 79, 0.12);
  --gl-info:         var(--gl-gold);
  --gl-info-soft:    var(--gl-border);

  /* ── Focus ring ───────────────────────────── */
  --gl-focus-ring: 0 0 0 3px rgba(209, 168, 77, 0.4);
}