/* ============================================================
   Dating Network — Design Tokens
   Source: smapp-dnetwork-website (Eleventy + Bootstrap 5 base)
   ============================================================ */

/* --- Webfonts (Google Fonts hosted) --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ============================================================
     COLORS — pulled from styles.css (gradients + buttons)
     and Bootstrap 5 defaults the project inherits
     ============================================================ */

  /* Brand — primary violets (rebranded from blue) */
  --smapp-violet-100: #F2E0F7;     /* soft wash light stop */
  --smapp-violet-300: #B968C8;     /* mid violet */
  --smapp-violet-500: #8A58F7;     /* gradient companion / accent */
  --smapp-violet-600: #8C2F9E;     /* PRIMARY brand color */
  --smapp-violet-700: #6E1F7E;     /* darker hover (derived) */

  /* Aliases kept for backward-compat with existing components */
  --smapp-blue-100: var(--smapp-violet-100);
  --smapp-blue-300: var(--smapp-violet-300);
  --smapp-blue-600: var(--smapp-violet-600);
  --smapp-blue-700: var(--smapp-violet-700);

  /* Brand — accents */
  --smapp-coral:       #FF2D55;  /* PRIMARY CTA fill (rebranded from mint) */
  --smapp-coral-hover: #E61E45;  /* darker hover */
  --smapp-mint:        #59DCC7;  /* legacy accent — kept for soft surfaces */
  --smapp-mint-hover:  #59dcc7cc;
  --smapp-violet-wash: #ebdcff;  /* gradient-bg-2 light stop */

  /* Neutrals */
  --smapp-white:    #FFFFFF;
  --smapp-100:      #F5F8FE;     /* bg-100 (light card) */
  --smapp-200:      #E9EDF5;
  --smapp-300:      #D6DCE6;
  --smapp-500:      #8A93A6;
  --smapp-700:      #3F4A5F;
  --smapp-900:      #0F1626;     /* near-black body text */
  --smapp-overlay:  #FFFFFF1A;   /* header-nav overlay (10% white) */

  /* Semantic */
  --color-bg:           var(--smapp-white);
  --color-bg-alt:       var(--smapp-100);
  --color-fg:           var(--smapp-900);
  --color-fg-muted:     var(--smapp-500);
  --color-fg-on-brand:  var(--smapp-white);
  --color-primary:      var(--smapp-blue-600);
  --color-primary-text: var(--smapp-blue-600);
  --color-cta:          var(--smapp-coral);
  --color-cta-hover:    var(--smapp-coral-hover);
  --color-border:       var(--smapp-200);
  --color-divider:      rgba(15, 22, 38, 0.08);

  /* Gradients — violet-led brand palette */
  --gradient-final: linear-gradient(135deg, #8C2F9E 0%, #8A58F7 100%);   /* Violet 600 → Violet 500 — the brand gradient */
  --gradient-bg:    var(--gradient-final);                              /* alias — hero / header use the CTA gradient */
  --gradient-bg-1:  linear-gradient(90deg, #FFFFFF 0%, #F2E0F7 100%);    /* white → Violet 100 */
  --gradient-bg-2:  linear-gradient(180deg, #8C2F9E 0%, #B968C8 100%);   /* Violet 600 → Violet 300 */

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-heading: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Bootstrap-ish scale w/ this site's overrides (fs-xxl-*, fs-lg-*, fs-xl-1) */
  --fs-1:   1.125rem;  /* 18 — fs-xl-1 (CTA copy, body lead) */
  --fs-2:   1.25rem;   /* 20 — fs-lg-2 / fs-sm-2 (card body) */
  --fs-3:   1.5rem;    /* 24 — section subheads */
  --fs-4:   2rem;      /* 32 — h1 mobile */
  --fs-5:   2.5rem;    /* 40 — h2 / faq */
  --fs-6:   3rem;      /* 48 — h1 small-up */
  --fs-7:   4rem;      /* 64 — h1 xxl, last CTA */

  --fs-body:  1rem;       /* 16 */
  --fs-small: 0.875rem;   /* 14 */
  --fs-eyebrow: 0.875rem; /* 14, uppercase */

  /* Weight tokens — Bootstrap 5 used here (fw-bold, fw-semi-bold) */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;  /* fw-semi-bold */
  --fw-bold:      700;  /* fw-bold */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* ============================================================
     SPACING — 8px scale (Bootstrap-aligned, project uses p-4..p-8)
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  1rem;     /* 16 */
  --space-4:  1.5rem;   /* 24  — gap-3 gap-xxl-4 territory */
  --space-5:  2rem;     /* 32 */
  --space-6:  3rem;     /* 48 — section row mb-6 */
  --space-7:  4rem;     /* 64 — p-lg-7 */
  --space-8:  5rem;     /* 80 — p-xxl-8 */

  /* ============================================================
     RADII — site uses rounded-pill + rounded-4
     ============================================================ */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;       /* rounded-4 = 1rem in BS5 */
  --radius-xl:   1.5rem;
  --radius-pill: 50rem;

  /* ============================================================
     SHADOWS — site mostly uses shadow-none + soft borders.
     Reserved tokens for hover lifts and modals.
     ============================================================ */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(15, 22, 38, 0.05);
  --shadow-sm:    0 4px 12px rgba(30, 91, 204, 0.08);
  --shadow-md:    0 10px 28px rgba(30, 91, 204, 0.12);
  --shadow-lg:    0 24px 60px rgba(30, 91, 204, 0.18);

  /* Borders */
  --border-width:    1px;
  --border-cta:      2px;  /* btn rounded-pill border-2 */

  /* Transitions */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.h-display,
h1.smapp,
.smapp-h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-4), 4.5vw, var(--fs-7));
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: inherit;
}

.h-section,
h2.smapp,
.smapp-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-3), 3vw, var(--fs-5));
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}

.h-card,
h3.smapp,
.smapp-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
}

.smapp-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}

.smapp-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
}

.smapp-body,
p.smapp {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
}

.smapp-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
}

/* Card body copy as used on solution cards (fs-2 fw-semi-bold) */
.smapp-card-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
}