/* Sermon Catalog design tokens. Source of truth: Sermon Catalog Design System doc. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root {
  /* Brand */
  --sc-indigo-900: #1B2A6B;   /* brand ink: logo, headings, primary buttons */
  --sc-indigo-950: #121D4D;   /* primary button hover/pressed */
  --sc-blue-500:   #5B86FF;   /* signal blue: logo accent, focus ring, graphics. Not for text on white */
  --sc-blue-700:   #2F55D4;   /* links and text-weight accents on light */
  --sc-blue-300:   #8FAEFF;   /* links and accents on indigo */
  --sc-blue-50:    #E8EEFF;   /* search-hit highlight background */

  /* Neutrals */
  --sc-white:      #FFFFFF;
  --sc-gray-50:    #F4F6FC;   /* subtle surface */
  --sc-gray-200:   #E3E7F5;   /* borders, dividers */
  --sc-gray-600:   #5B6380;   /* secondary text */
  --sc-on-dark-muted: #D8DEF5;/* secondary text on indigo */

  /* Semantic */
  --sc-bg:            var(--sc-white);
  --sc-surface:       var(--sc-gray-50);
  --sc-border:        var(--sc-gray-200);
  --sc-text:          var(--sc-indigo-900);
  --sc-text-muted:    var(--sc-gray-600);
  --sc-link:          var(--sc-blue-700);
  --sc-focus:         var(--sc-blue-500);
  --sc-highlight-bg:  var(--sc-blue-50);
  --sc-highlight-bar: var(--sc-blue-500);

  /* Type */
  --sc-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-text-xs: 12px;  --sc-text-sm: 14px;  --sc-text-md: 16px;
  --sc-text-lg: 20px;  --sc-text-xl: 24px;  --sc-text-2xl: 32px; --sc-text-3xl: 40px;
  --sc-leading-body: 1.5; --sc-leading-heading: 1.15;
  --sc-tracking-heading: -0.02em;

  /* Space (4px base) */
  --sc-space-1: 4px;  --sc-space-2: 8px;  --sc-space-3: 12px; --sc-space-4: 16px;
  --sc-space-6: 24px; --sc-space-8: 32px; --sc-space-12: 48px; --sc-space-16: 64px;

  /* Radius */
  --sc-radius-sm: 6px; --sc-radius-md: 10px; --sc-radius-lg: 16px; --sc-radius-pill: 999px;

  /* Elevation */
  --sc-shadow-1: 0 1px 2px rgba(27, 42, 107, 0.08);
  --sc-shadow-2: 0 4px 16px rgba(27, 42, 107, 0.12);
}