/* ============================================================
   Pastor Center 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);

  --color-on-blue:  #FFFFFF;  /* Text on brand blue — the same in both themes */

  /* ── 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 (Pastor Center brand Ink — cool desaturated blue, sampled from flag) ── */
  --color-gray-900: #0B1116;  /* App/page background — Ink */
  --color-gray-700: #131B22;  /* Main content background — Ink 80 */
  --color-gray-500: #1B252E;  /* Cards/panels — Ink 60 */
  --color-gray-300: #2B3A47;  /* Form field background — extrapolated */
  --color-gray-100: #3F4E5C;  /* Borders — extrapolated */

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

  /* ── DISC Personality Colors ── */
  --color-disc-d: #EF4444;  /* Dominant — assertive, fire */
  --color-disc-i: #F59E0B;  /* Influential — energetic, warm */
  --color-disc-s: #34D399;  /* Steady — calm, growth */
  --color-disc-c: #137D9A;  /* Conscientious — analytical, cool */

  /* ── Follow-ups Lane Tile Hues ("Pick a lane" grid) ──
     Base hue per lane tile; the .mc-lane-tile component mixes these with the
     theme's gray-700, so one hex serves both themes. */
  --color-lane-slate:  #64748B;
  --color-lane-gold:   #C9971F;
  --color-lane-orange: #D0662A;
  --color-lane-red:    #D24848;
  --color-lane-rust:   #B5564A;
  --color-lane-violet: #7D74C9;
  --color-lane-blue:   #4285CD;
  --color-lane-teal:   #359B8E;
  --color-lane-green:  #4E9E63;
  --color-lane-sage:   #6F9A55;
  --color-lane-olive:  #98973B;

  /* ── 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 ──
   Taken from the marketing site (pastorcenter.com) on 2026-10-02, per the
   review: "grey and khaki taupes instead of the light blues". Its cream
   surfaces (--cream-soft, --paper, --cream-deep) and Ink text, so the app and
   the site read as one brand. Two values step one shade darker than the site
   so they pass WCAG AA (4.5:1) on cream: the muted grey (site #6A7280 is
   4.1:1) and blue, which uses the site's own --teal-deep-dark.
   Contrast checked: ink-subtle 5.1:1 on the page, blue 6.0:1 on the page,
   white on blue 7.0:1. */
[data-theme="light"] {
  --color-gray-900: #F1ECE2;   /* App/page background, sidebar — site --cream-soft */
  --color-gray-700: #FBFBFB;   /* Cards, modals, kanban columns — site --off-white */
  --color-gray-500: #F7F4EE;   /* Raised inside a card — site --paper */
  --color-gray-300: #EDE7DC;   /* Form fields, chips */
  --color-gray-100: #DAD2C4;   /* Borders — site --cream-deep */

  /* Used by base CSS (html { color: var(--color-text-primary) }) */
  --color-text-emphasis: #0B1116;  /* site --ink-900 */
  --color-text-primary:  #1B252E;  /* site --ink-700 */
  --color-text-subtle:   #5C6470;

  /* Used by Tailwind utility classes (text-ink-emphasis, text-ink-primary, text-ink-subtle) */
  --color-ink-emphasis: #0B1116;
  --color-ink-primary:  #1B252E;
  --color-ink-subtle:   #5C6470;

  /* Brand blue: the site's --teal-deep-dark, so blue text passes on cream. */
  --color-blue:    #0E6178;
  --color-blue-80: rgba(14, 97, 120, 0.85);

  /* Accents tuned for a dark ground read as neon on a light one. */
  --color-teal:    #0E7490;
  --color-emerald: #047857;

  /* Tailwind's own light shades (text-red-400, text-amber-300…) are written
     for the dark theme; on white they fall to 1.5–2.8:1. The darker shade of
     the same hue keeps the meaning and passes. Tints (bg-red-500/10) are
     unaffected. */
  --color-red-300:     #B91C1C;
  --color-red-400:     #C62828;
  --color-amber-300:   #A15C07;
  --color-amber-400:   #A15C07;
  --color-rose-300:    #BE123C;
  --color-emerald-400: #047857;
}