/* ══════════════════════════════════════════════
   EXEGEO DESIGN SYSTEM — Colors & Typography
   Source: enoorth/exegeo (public/index.html)
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ─── Base Color Tokens (Light Mode) ─── */
:root {
  /* Backgrounds */
  --bg:           #ffffff;
  --bg2:          #f7f7f8;
  --bg3:          #efefef;
  --surface:      #ffffff;

  /* Borders */
  --border:       #e2e2e6;
  --border2:      #d0d0d8;

  /* Text */
  --text:         #111118;
  --text2:        #44444f;
  --text3:        #88889a;
  --text4:        #b0b0c0;

  /* Primary Interactive */
  --accent:       #2563eb;
  --accent-h:     #1d4ed8;

  /* Semantic Colors */
  --red:          #c0392b;
  --green:        #16a34a;
  --teal:         #0d9488;
  --purple:       #7c3aed;
  --gold:         #b45309;

  /* Shadows */
  --shadow:       0 1px 3px rgba(0,0,0,.10);
  --shadow-md:    0 4px 12px rgba(0,0,0,.12);

  /* Radii */
  --radius:       6px;
  --radius-lg:    10px;

  /* Stage Colors (Workflow) */
  --stage-1:      #0d9488;   /* Observation   — teal      */
  --stage-2:      #4a5a8a;   /* Block Diagram — slate     */
  --stage-3:      #c0392b;   /* Context       — red       */
  --stage-4:      #7c3aed;   /* Language      — purple    */
  --stage-5:      #16a34a;   /* Aim & Gospel  — green     */
  --stage-6:      #b45309;   /* Synthesis     — amber     */
  --stage-7:      #374151;   /* Structure     — charcoal  */
  --stage-8:      #0369a1;   /* Manuscript    — blue      */

  /* Block Diagram Depth Colors */
  --depth-0:      #c0392b;
  --depth-1:      #0d9488;
  --depth-2:      #7c3aed;
  --depth-3:      #16a34a;
  --depth-4:      #b45309;
  --depth-5:      #0369a1;
  --depth-6:      #9d174d;
  --depth-7:      #065f46;
  --depth-8:      #1e3a5f;

  /* Projector / Presentation Surface */
  --proj-bg:      #1a1a2e;
  --proj-text:    #ffffff;
  --proj-gold:    #c9a84c;

  /* Typography */
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif:   Georgia, 'Times New Roman', serif;
  --font-crimson: 'Crimson Pro', serif;
  --font-baskerville: 'Libre Baskerville', serif;
  --font-greek:   'SBL Greek', Cardo, 'Times New Roman', serif;
  --font-hebrew:  'SBL Hebrew', FrankRuehl, serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Type Scale */
  --text-xs:      9px;
  --text-sm:      11px;
  --text-base:    15px;
  --text-md:      16px;
  --text-lg:      17px;
  --text-xl:      18px;
  --text-2xl:     19px;
  --text-3xl:     23px;

  /* Spacing */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;
  --space-10:     40px;
  --content-max:  820px;
}

/* ─── Dark Mode Tokens ─── */
[data-theme="dark"] {
  --bg:           #0f0f13;
  --bg2:          #18181f;
  --bg3:          #222230;
  --surface:      #1c1c26;
  --border:       #2e2e3e;
  --border2:      #3a3a50;
  --text:         #f0f0f8;
  --text2:        #b8b8cc;
  --text3:        #78788a;
  --text4:        #50505e;
  --accent:       #60a5fa;
  --accent-h:     #93c5fd;
  --red:          #f87171;
  --green:        #4ade80;
  --teal:         #2dd4bf;
  --purple:       #a78bfa;
  --gold:         #fbbf24;
  --shadow:       0 1px 3px rgba(0,0,0,.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,.5);
}

/* ─── Semantic Type Styles ─── */

/* Page / app chrome */
.t-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text4);
}

.t-field-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
}

.t-ui {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.5;
}

.t-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text4);
  line-height: 1.5;
}

/* Reading / editorial */
.t-body {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.85;
  color: var(--text);
}

.t-scripture {
  font-family: var(--font-baskerville);
  font-size: var(--text-md);
  line-height: 1.9;
  color: var(--text);
}

.t-scripture-paste {
  font-family: var(--font-crimson);
  font-size: var(--text-md);
  line-height: 1.75;
  font-style: italic;
}

/* Greek / Hebrew */
.t-greek {
  font-family: var(--font-greek);
  font-size: var(--text-xl);
  line-height: 2.2;
}

.t-hebrew {
  font-family: var(--font-hebrew);
  font-size: var(--text-xl);
  line-height: 1.9;
  direction: rtl;
}

/* Headings (in rich editors) */
.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  font-style: italic;
  color: var(--text2);
}

/* Monospace */
.t-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text4);
  letter-spacing: .03em;
}

/* Projector */
.t-proj-title {
  font-family: var(--font-serif);
  font-size: 6vw;
  font-weight: 700;
  color: var(--proj-text);
  line-height: 1.2;
}

.t-proj-scripture {
  font-family: var(--font-serif);
  font-size: 4vw;
  font-style: italic;
  color: var(--proj-text);
  line-height: 1.55;
}

.t-proj-ref {
  font-family: var(--font-serif);
  font-size: 2.8vw;
  color: var(--proj-gold);
}