/* ============================================================
   Pastors.ai — Design Tokens
   Foundational color & type variables for the brand.
   ------------------------------------------------------------
   Imported from the Claude Design "pastors-ai-design-system"
   project (colors_and_type.css) for PAS-3473. Keep in sync with
   the design system rather than editing ad-hoc.
   ------------------------------------------------------------
   The brand has TWO visual surfaces:
     • Marketing  — Bootstrap-derived, Poppins/Roboto, teal+navy
     • Product    — sermon pages, dashboard, chatbot.
                   Inter typography, white cards, sage-green accent.
   Tokens for both are exposed below.
   ============================================================ */

:root {
  /* ─── Brand colors (from app/static/scss/_variables.scss) ─── */
  --pa-primary:      #0076a3;   /* Pastors.ai teal — primary CTA, links, accent */
  --pa-primary-2:    #3c91b3;   /* lighter teal — used in the gradient */
  --pa-dark:         #183b56;   /* deep navy — body copy on light bg */
  --pa-success:      #1d9b7b;   /* form success / status */
  --pa-info:         #24bee6;   /* information / nav accent */
  --pa-warning:      #ffb60b;   /* alerts */
  --pa-danger:       #da3746;   /* errors, "current plan" badges in some views */

  /* Sage green is the accent on the *product-side* sermon pages
     (devotional active tab, links, primary buttons). */
  --pa-sage:         #4E796B;
  --pa-sage-2:       #4A6D62;
  --pa-sage-soft:    #4f7a6c;

  /* ─── Neutrals ─── */
  --pa-white:        #ffffff;
  --pa-light:        #f8f9fc;   /* page bg */
  --pa-light-2:      #F5F5F5;   /* tab inactive bg, soft surfaces */
  --pa-muted:        #838485;   /* secondary text */
  --pa-border:       #dedede;   /* card / table dividers */
  --pa-border-soft:  #e9ecef;
  --pa-text-2:       #334155;   /* secondary text on product pages */
  --pa-black:        #000000;

  /* Gray scale (Bootstrap-derived) */
  --pa-gray-100:     #f8f9fa;
  --pa-gray-200:     #e9ecef;
  --pa-gray-300:     #dee2e6;
  --pa-gray-400:     #ced4da;
  --pa-gray-500:     #adb5bd;
  --pa-gray-600:     #6c757d;
  --pa-gray-700:     #495057;
  --pa-gray-800:     #343a40;
  --pa-gray-900:     #212529;

  /* Soft tints (used in landing hero "bg-soft-primary") */
  --pa-primary-soft: rgba(0, 118, 163, 0.20);
  --pa-primary-50:   rgba(0, 118, 163, 0.08);

  /* ─── Signature gradient ─── */
  /* From _helper.scss .bg-gradiant — used on every primary CTA and overlays */
  --pa-gradient: linear-gradient(80deg, rgb(70, 165, 189) 0%, rgb(17, 106, 141) 100%);
  --pa-gradient-overlay: linear-gradient(80deg, rgb(55, 125, 143) 0%, rgb(10, 65, 87) 100%);

  /* ─── Type families ─── */
  --pa-font-display: "Poppins", system-ui, -apple-system, sans-serif;     /* marketing H1–H6 */
  --pa-font-body:    "Roboto", system-ui, -apple-system, sans-serif;       /* marketing body */
  --pa-font-product: "Inter", system-ui, -apple-system, sans-serif;        /* product pages */
  --pa-font-serif:   "Merriweather", Georgia, serif;                       /* used on devotional headings on some sermon pages */

  /* ─── Type weights (codebase uses these specifically) ─── */
  --pa-fw-regular:   400;
  --pa-fw-medium:    500;   /* $fw-semibold in scss */
  --pa-fw-semibold:  600;
  --pa-fw-bold:      700;   /* $fw-bold */
  --pa-fw-black:     800;   /* hero numerals / brand mark */

  /* ─── Type scale (.f-* utilities) ─── */
  --pa-fs-12:        12px;
  --pa-fs-14:        14px;
  --pa-fs-16:        16px;   /* default body */
  --pa-fs-18:        18px;
  --pa-fs-20:        20px;
  --pa-fs-22:        22px;   /* card h3 on product pages */
  --pa-fs-24:        24px;
  --pa-fs-30:        30px;
  --pa-fs-35:        35px;
  --pa-fs-40:        40px;
  --pa-fs-44:        44px;   /* sermon page h1 */
  --pa-fs-50:        50px;
  --pa-fs-100:       100px;

  /* Line height — body p { font-size:16px; line-height:25px } */
  --pa-lh-tight:     1.4;     /* applied to all H1–H6 */
  --pa-lh-body:      1.56;    /* 25/16 */
  --pa-lh-product:   28px;    /* product summary copy */

  /* ─── Radii ─── */
  --pa-radius-sm:    5px;     /* buttons, tabs */
  --pa-radius:       6px;     /* default — .border-radius */
  --pa-radius-md:    10px;    /* cards, swiper slides, video */
  --pa-radius-lg:    20px;    /* hero "logo-box" surfaces */
  --pa-radius-pill:  50px;    /* avatars, rounded buttons */

  /* ─── Shadows (from _variables.scss) ─── */
  --pa-shadow:       0 3px 10px 0 rgba(24, 59, 86, 0.08);
  --pa-shadow-md:    0 0 3px rgba(60, 72, 88, 0.15);
  --pa-shadow-lg:    0 5px 13px rgba(60, 72, 88, 0.20);
  --pa-shadow-cta:   0 6px 16px rgba(0, 0, 0, 0.08);  /* expandable CTA on sermon page */

  /* ─── Spacing rhythm ─── */
  --pa-space-1:      4px;
  --pa-space-2:      8px;
  --pa-space-3:      12px;
  --pa-space-4:      16px;
  --pa-space-5:      20px;
  --pa-space-6:      24px;
  --pa-space-8:      32px;
  --pa-space-12:     48px;
  --pa-section:      120px;   /* .section padding-top/bottom */
  --pa-section-sm:   80px;    /* mobile section padding */
}