/* ============================================================
   THEODIDAKTOS DESIGN SYSTEM — COLORS & TYPOGRAPHY
   ============================================================
   A study-Bible reading app spanning iOS, Android, and web (PWA).
   Dual-platform, dual-tone (12 themes), with a strong editorial
   reading philosophy: serif body type, restrained chrome,
   accent gold for the flagship "Logos" identity.
   ============================================================ */

/* ----- Reading fonts (the in-app font picker) ----- */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ----- UI fonts (chrome / labels / buttons) ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --td-font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --td-font-reading:   'Literata', Georgia, 'Times New Roman', serif;
  --td-font-reading-alt: 'Lora', Georgia, serif;
  --td-font-classical: 'EB Garamond', 'Source Serif 4', Georgia, serif;
  --td-font-screen:    'Source Serif 4', 'Merriweather', Georgia, serif;
  --td-font-display:   'Literata', 'Lora', Georgia, serif;
  --td-font-flow:      'Lexend', 'Inter', sans-serif;
  --td-font-access:    'Atkinson Hyperlegible', 'Inter', sans-serif;
  --td-font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --td-text-verse:        16px;
  --td-text-verse-num:    13px;
  --td-text-prose:        17px;
  --td-text-prose-large:  18px;
  --td-text-citation:     13px;
  --td-text-footnote:     14.5px;
  --td-text-h3:           17px;
  --td-text-h2:           18px;
  --td-text-h1:           22px;
  --td-text-headword:     28px;

  --td-line-tight:    1.30;
  --td-line-snug:     1.45;
  --td-line-default:  1.55;
  --td-line-relaxed:  1.70;
  --td-line-loose:    1.85;

  --td-ui-label-xs:   10px;
  --td-ui-label-sm:   11px;
  --td-ui-body-sm:    12px;
  --td-ui-body:       13px;
  --td-ui-body-lg:    14px;
  --td-ui-title:      16px;
  --td-ui-title-lg:   18px;
  --td-ui-display:    22px;

  --td-weight-regular: 400;
  --td-weight-medium:  500;
  --td-weight-semi:    600;
  --td-weight-bold:    700;
  --td-weight-black:   800;

  --td-tracking-eyebrow: 0.6px;
  --td-tracking-button:  0.2px;

  /* COLOR — LOGOS DARK (default theme, "Clásico") */
  --td-bg-base:        #101723;
  --td-bg-surface:     #182131;
  --td-bg-elevated:    #202b3d;
  --td-bg-overlay:     #2a3650;
  --td-bg-hover:       #334161;
  --td-bg-active:      #415276;

  --td-text-primary:   #f5f7fa;
  --td-text-secondary: #b8c4d4;
  --td-text-tertiary:  #8896ab;
  --td-text-muted:     #5d6b7f;
  --td-text-inverse:   #0f1219;

  --td-accent:         #c8a24d;
  --td-accent-hover:   #d4af5a;
  --td-accent-active:  #b89240;
  --td-accent-secondary: #7c9ccc;
  --td-accent-light:   rgba(200, 162, 77, 0.15);

  --td-success:        #34d399;
  --td-success-light:  rgba(52, 211, 153, 0.15);
  --td-warning:        #fbbf24;
  --td-warning-light:  rgba(251, 191, 36, 0.15);
  --td-error:          #f87171;
  --td-error-light:    rgba(248, 113, 113, 0.15);
  --td-info:           #60a5fa;
  --td-info-light:     rgba(96, 165, 250, 0.15);

  --td-border-subtle:  rgba(255, 255, 255, 0.06);
  --td-border-default: rgba(255, 255, 255, 0.10);
  --td-border-strong:  rgba(255, 255, 255, 0.16);
  --td-border-accent:  #c8a24d;

  --td-hl-yellow:       rgba(251, 191, 36, 0.35);
  --td-hl-yellow-solid: #fbbf24;
  --td-hl-green:        rgba(52, 211, 153, 0.35);
  --td-hl-green-solid:  #34d399;
  --td-hl-blue:         rgba(96, 165, 250, 0.35);
  --td-hl-blue-solid:   #60a5fa;
  --td-hl-red:          rgba(248, 113, 113, 0.35);
  --td-hl-red-solid:    #f87171;
  --td-hl-purple:       rgba(167, 139, 250, 0.35);
  --td-hl-purple-solid: #a78bfa;
  --td-hl-orange:       rgba(251, 146, 60, 0.35);
  --td-hl-orange-solid: #fb923c;

  --td-tabbar-bg:       #182131;
  --td-tabbar-border:   rgba(255, 255, 255, 0.06);
  --td-tabbar-active:   #c8a24d;
  --td-tabbar-inactive: #5d6b7f;

  --td-radius-xs:  4px;
  --td-radius-sm:  6px;
  --td-radius-md:  8px;
  --td-radius-lg:  12px;
  --td-radius-xl:  14px;
  --td-radius-2xl: 16px;
  --td-radius-3xl: 22px;
  --td-radius-pill: 999px;

  --td-shadow-sm:    0 2px 6px rgba(0,0,0,0.18);
  --td-shadow-md:    0 4px 12px rgba(0,0,0,0.24);
  --td-shadow-lg:    0 10px 18px rgba(0,0,0,0.30);
  --td-shadow-sheet: 0 -10px 30px rgba(0,0,0,0.35);

  --td-space-1:  2px;
  --td-space-2:  4px;
  --td-space-3:  6px;
  --td-space-4:  8px;
  --td-space-5:  10px;
  --td-space-6:  12px;
  --td-space-8:  16px;
  --td-space-10: 20px;
  --td-space-12: 24px;
  --td-space-16: 32px;
  --td-space-20: 40px;

  --td-hit-min: 44px;
}

/* ============================================================
   THEME OVERRIDES
   ============================================================ */
[data-td-theme="midnight"] {
  --td-bg-base: #071423; --td-bg-surface: #0d1c33; --td-bg-elevated: #13274a;
  --td-bg-overlay: #1b3562; --td-bg-hover: #244379; --td-bg-active: #2f5595;
  --td-text-primary: #eff6ff; --td-text-secondary: #bfd0ea;
  --td-text-tertiary: #93a8c5; --td-text-muted: #6d7f9f;
  --td-accent: #7dd3fc; --td-accent-hover: #9ee1ff; --td-accent-active: #55bfe9;
  --td-accent-secondary: #a78bfa; --td-accent-light: rgba(125,211,252,0.16);
  --td-border-subtle: rgba(173,216,255,0.08);
  --td-border-default: rgba(173,216,255,0.14);
  --td-border-strong: rgba(173,216,255,0.22);
  --td-tabbar-bg: #0d1c33; --td-tabbar-active: #7dd3fc; --td-tabbar-inactive: #6d7f9f;
}

[data-td-theme="logos-light"] {
  --td-bg-base: #f6efe3; --td-bg-surface: #fffaf1; --td-bg-elevated: #fffdf8;
  --td-bg-overlay: #efe4d3; --td-bg-hover: #e7d8c0; --td-bg-active: #dcc7a5;
  --td-text-primary: #241a10; --td-text-secondary: #584534;
  --td-text-tertiary: #7c6957; --td-text-muted: #a08f80;
  --td-accent: #b8892b; --td-accent-hover: #cb9c3d; --td-accent-active: #9f7420;
  --td-accent-secondary: #305f9b; --td-accent-light: rgba(184,137,43,0.12);
  --td-border-subtle: rgba(54,38,20,0.06);
  --td-border-default: rgba(54,38,20,0.10);
  --td-border-strong: rgba(54,38,20,0.15);
  --td-tabbar-bg: #fffaf1; --td-tabbar-active: #b8892b; --td-tabbar-inactive: #a08f80;
}

[data-td-theme="sepia"] {
  --td-bg-base: #f2e6cf; --td-bg-surface: #fbf1df; --td-bg-elevated: #f7ecd8;
  --td-bg-overlay: #ebdbc0; --td-bg-hover: #e2cfab; --td-bg-active: #d4bc8e;
  --td-text-primary: #3d2d1f; --td-text-secondary: #6a5440;
  --td-text-tertiary: #8d755f; --td-text-muted: #b19d88;
  --td-accent: #a66a2a; --td-accent-hover: #ba7d3b; --td-accent-active: #8f581f;
  --td-accent-secondary: #7f5539; --td-accent-light: rgba(166,106,42,0.12);
  --td-border-subtle: rgba(61,45,31,0.05);
  --td-border-default: rgba(61,45,31,0.09);
  --td-border-strong: rgba(61,45,31,0.14);
  --td-tabbar-bg: #fbf1df; --td-tabbar-active: #a66a2a; --td-tabbar-inactive: #b19d88;
}

[data-td-theme="forest"] {
  --td-bg-base: #0f1810; --td-bg-surface: #172318; --td-bg-elevated: #203021;
  --td-bg-overlay: #29402c; --td-bg-hover: #335036; --td-bg-active: #406543;
  --td-text-primary: #eef7ef; --td-text-secondary: #cfddcf;
  --td-text-tertiary: #9cb29d; --td-text-muted: #718673;
  --td-accent: #84cc16; --td-accent-hover: #9cdd40; --td-accent-active: #6faf12;
  --td-accent-secondary: #34d399; --td-accent-light: rgba(132,204,22,0.16);
  --td-border-subtle: rgba(238,247,239,0.06);
  --td-border-default: rgba(238,247,239,0.11);
  --td-border-strong: rgba(238,247,239,0.16);
  --td-tabbar-bg: #172318; --td-tabbar-active: #84cc16; --td-tabbar-inactive: #718673;
}