/* ============================================================================
   Cult Shield Design Tokens v5
   Direction: Red Points lineage (white + teal accent, B2B SaaS premium)
   Locked 2026-06-06 after concrete user reference: redpoints.com
   ============================================================================ */

:root {
  /* ----- Surfaces (white-first, B2B SaaS) ------------------------------ */
  --cs-bg:             #FFFFFF;
  --cs-bg-tint:        #F7F8FA;          /* alternating sections */
  --cs-bg-soft:        #FAFBFC;
  --cs-surface-1:      #FFFFFF;
  --cs-surface-2:      #F4F6F8;          /* card hover, nested */
  --cs-surface-3:      #EDF0F3;
  --cs-surface-dark:   #0E1117;          /* contained dark hero mockup, footer band */
  --cs-surface-dark-2: #161B23;
  --cs-surface-ink:    #0A1A2E;          /* deep navy for occasional dark moments */

  /* ----- Borders (hairline) -------------------------------------------- */
  --cs-border:         #E5E8EC;
  --cs-border-mid:     #D2D7DD;
  --cs-border-strong:  #B7BEC7;
  --cs-border-hair:    #F0F2F5;
  --cs-border-dark:    rgba(255, 255, 255, 0.10);

  /* ----- Text (ink on white) ------------------------------------------- */
  --cs-text:           #1A1A1A;
  --cs-text-body:      #2C2F33;
  --cs-text-muted:     #555B66;
  --cs-text-dim:       #767E8A;
  --cs-text-faint:     #99A1AC;
  --cs-text-on-dark:   #F4F7FB;
  --cs-text-on-dark-muted: #B5BCC7;

  /* ----- Accent (teal, distinct from Red Points but in the family) ----- */
  --cs-teal:           #0D9488;          /* primary CTA */
  --cs-teal-hover:     #0F766E;
  --cs-teal-bg:        rgba(13, 148, 136, 0.08);
  --cs-teal-border:    rgba(13, 148, 136, 0.25);

  --cs-navy:           #0A1A2E;          /* secondary CTA on light */
  --cs-navy-hover:     #1E293B;

  --cs-verified:       #0E8754;          /* check states */
  --cs-verified-bg:    rgba(14, 135, 84, 0.08);

  --cs-amber:          #C2780A;          /* warnings, statutory marks */
  --cs-amber-bg:       rgba(194, 120, 10, 0.08);

  --cs-danger:         #C1232A;
  --cs-danger-bg:      rgba(193, 35, 42, 0.06);

  --cs-star:           #F59E0B;          /* gold star rating */

  /* ----- Type families -------------------------------------------------- */
  --cs-font-display:   "Source Serif 4", "Charter", Georgia, "Times New Roman", serif;
  --cs-font-ui:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-font-mono:      "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* ----- Type scale ----------------------------------------------------- */
  --cs-text-xs:    11px;
  --cs-text-sm:    13px;
  --cs-text-base:  15px;
  --cs-text-md:    17px;
  --cs-text-lg:    19px;
  --cs-text-xl:    clamp(22px, 2.0vw, 26px);
  --cs-text-2xl:   clamp(26px, 2.6vw, 32px);
  --cs-text-3xl:   clamp(32px, 3.6vw, 44px);
  --cs-text-4xl:   clamp(40px, 6vw, 72px);     /* hero H1 */
  --cs-text-5xl:   clamp(48px, 8vw, 96px);

  /* ----- Line heights --------------------------------------------------- */
  --cs-lh-tight:   1.08;
  --cs-lh-snug:    1.2;
  --cs-lh-normal:  1.5;
  --cs-lh-relaxed: 1.7;

  /* ----- Letter spacing ------------------------------------------------- */
  --cs-tracking-tight:  -0.020em;
  --cs-tracking-snug:   -0.010em;
  --cs-tracking-normal: 0;
  --cs-tracking-wide:   0.04em;
  --cs-tracking-mono:   0.06em;
  --cs-tracking-mega:   0.10em;

  /* ----- Spacing (4px grid) -------------------------------------------- */
  --cs-1:  4px;
  --cs-2:  8px;
  --cs-3:  12px;
  --cs-4:  16px;
  --cs-5:  20px;
  --cs-6:  24px;
  --cs-8:  32px;
  --cs-10: 40px;
  --cs-12: 48px;
  --cs-14: 56px;
  --cs-16: 64px;
  --cs-20: 80px;
  --cs-24: 96px;
  --cs-32: 128px;
  --cs-40: 160px;

  /* ----- Radii ---------------------------------------------------------- */
  --cs-r-sm:   4px;
  --cs-r-md:   8px;
  --cs-r-lg:   12px;
  --cs-r-xl:   16px;
  --cs-r-2xl:  20px;
  --cs-r-pill: 999px;

  /* ----- Shadows (subtle, B2B trustworthy) ----------------------------- */
  --cs-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
  --cs-shadow-sm:   0 2px 6px rgba(15, 23, 42, 0.06),
                    0 1px 2px rgba(15, 23, 42, 0.04);
  --cs-shadow-md:   0 8px 24px -6px rgba(15, 23, 42, 0.10),
                    0 3px 6px -2px rgba(15, 23, 42, 0.05);
  --cs-shadow-lg:   0 16px 48px -12px rgba(15, 23, 42, 0.16),
                    0 6px 12px -4px rgba(15, 23, 42, 0.06);
  --cs-shadow-card: 0 0 0 1px var(--cs-border),
                    0 2px 4px -1px rgba(15, 23, 42, 0.04);

  /* ----- Motion --------------------------------------------------------- */
  --cs-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --cs-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --cs-fast:        120ms;
  --cs-base:        220ms;
  --cs-slow:        420ms;

  /* ----- Layout --------------------------------------------------------- */
  --cs-container-max:    1280px;
  --cs-container-narrow: 940px;
  --cs-prose-max:        72ch;
  --cs-container-pad:    24px;
}

@media (min-width: 768px) {
  :root {
    --cs-container-pad: 40px;
    --cs-text-base:     16px;
  }
}

@media (min-width: 1280px) {
  :root {
    --cs-container-pad: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cs-fast:   1ms;
    --cs-base:   1ms;
    --cs-slow:   1ms;
  }
}