/* ============================================================
   Sermon-Done Design Tokens
   Use these variables everywhere — never hardcode colors.
   ============================================================ */

:root {
  /* ── Brand Blue ── */
  --color-blue:     #137D9A;
  --color-blue-80:  rgba(19, 125, 154, 0.80);
  --color-blue-70:  rgba(19, 125, 154, 0.70);
  --color-blue-40:  rgba(19, 125, 154, 0.40);
  --color-blue-20:  rgba(19, 125, 154, 0.20);
  --color-blue-10:  rgba(19, 125, 154, 0.10);

  /* ── Gradient ── */
  --gradient-blue: linear-gradient(to right, #137D9A, rgba(19, 125, 154, 0.70));

  /* ── Text ── */
  --color-text-emphasis: #FBFBFB;  /* Headings, large text, buttons, pills */
  --color-text-primary:  #D1D5DB;  /* Labels, subheadings */
  --color-text-subtle:   #94A3B8;  /* Body copy, descriptions, subdued text */

  /* ── Gray Scale (warm charcoal — slight brown undertone, no blue bias) ── */
  --color-gray-900: #080808;  /* App/page background */
  --color-gray-700: #131110;  /* Main content background */
  --color-gray-500: #1C1917;  /* Cards/panels */
  --color-gray-300: #2B2724;  /* Form field background */
  --color-gray-100: #3F3B38;  /* Borders */

  /* ── Accent Colors ── */
  --color-teal:    #06B6D4;  /* Form field focus, interactive accents */
  --color-emerald: #34D399;  /* Progress indicators, success states, usage */

  /* ── Series Type Colors ── */
  --color-series-gospel:     #ef4444;
  --color-series-teaching:   #3b82f6;
  --color-series-character:  #22c55e;
  --color-series-topical:    #a855f7;
  --color-series-holiday:    #f59e0b;
  --color-series-book:       #14b8a6;
  --color-series-standalone: #6b7280;

  /* ── Typography ── */
  --font-sans: 'Mona Sans', sans-serif;
}

/* ── Light mode overrides ── */
[data-theme="light"] {
  --color-gray-900: #F9F8F7;   /* App/page background */
  --color-gray-700: #F2F0EE;   /* Main content background */
  --color-gray-500: #EBE8E5;   /* Cards/panels */
  --color-gray-300: #E4E0DC;   /* Form field background */
  --color-gray-100: #D1CBC5;   /* Borders */

  /* Used by base CSS (html { color: var(--color-text-primary) }) */
  --color-text-emphasis: #1A1614;
  --color-text-primary:  #3D3835;
  --color-text-subtle:   #6B6460;

  /* Used by Tailwind utility classes (text-ink-emphasis, text-ink-primary, text-ink-subtle) */
  --color-ink-emphasis: #1A1614;
  --color-ink-primary:  #3D3835;
  --color-ink-subtle:   #6B6460;
}