/* Pentecostals of Wilmington: design tokens
   Source of truth: Figma rDtYTQb7p63gl482Ndd5ls, node 1:2 (Mobile home).
   Every component reads from these. Change a value here, not in a component.
   Fluid sizes resolve to the Figma values at 390px and grow toward desktop. */

:root {
  /* Color: "Sunday Paper". Warm paper and navy ink around the brand blue. */
  --color-paper: #f3f3f1;       /* page */
  --color-paper-2: #e6e7e8;     /* alternate band, inputs hover */
  --color-navy: #1c3149;        /* anchor bands, footer */
  --color-brand: #3d6692;       /* identity blue: accents, buttons, links (5.3:1 on paper) */
  --color-brand-deep: #2f5177;  /* pressed / hover on brand */
  --color-ink: #152131;         /* text (14.4:1 on paper) */
  --color-ink-soft: #4b5563;    /* secondary text (6.7:1 on paper) */
  --color-on-dark: #f3f3f1;     /* text on navy and brand */
  --color-on-dark-soft: #c2d1e3;/* secondary text on navy, tinted from the blue (8.5:1) */
  --color-sky: #9fbbdc;         /* accent on navy, from the sky in the church photo (6.7:1) */
  --color-rule: rgb(21 33 49 / .16);
  --color-rule-strong: rgb(21 33 49 / .5);
  --color-rule-on-dark: rgb(243 243 241 / .2);
  --color-focus: #3d6692;
  /* Legacy aliases so inner-page CSS keeps working */
  --color-bg: var(--color-paper);
  --color-surface: var(--color-paper-2);
  --color-tint: #dde5ee;
  --color-brand-ink: var(--color-on-dark);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-16: 1rem;                                        /* chip, well, submit */
  --fs-18: 1.125rem;                                    /* buttons, meta, footer links, body */
  --fs-22: 1.375rem;
  --fs-24: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);      /* lead copy, event title, panel title */
  --fs-28: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);      /* card title */
  --fs-hero: clamp(1.5rem, 0.9rem + 2.4vw, 3.25rem);    /* hero title */
  --fs-34: clamp(2.125rem, 1.6rem + 2.1vw, 3rem);       /* section label, time, title */
  --fs-42: clamp(2.625rem, 1.95rem + 2.8vw, 5rem);      /* display accent ("EVERY SUNDAY") */
  --fs-44: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);      /* section heading ("New Here?") */
  --fs-mega: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);    /* hero headline */
  --lh-tight: 1.1;
  --lh-snug: 1.21;
  --lh-body: 1.5;
  --track-display: -0.025em;
  --track-heading: -0.015em;

  /* Space (Figma's 20px gutter rhythm, fluid at the section level) */
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-40: 40px;
  --space-60: 60px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(40px, 2rem + 4vw, 96px);
  --section-y-roomy: clamp(60px, 3rem + 5vw, 128px);

  /* Radius */
  --radius-sm: 14px;   /* images, wells, chips */
  --radius-md: 28px;   /* outline buttons */
  --radius-lg: 34px;   /* hero, cards, panels, pill buttons */

  /* Layout */
  --content-max: 1120px;
  --measure: 62ch;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 280ms;
  --dur-slow: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 120ms;
    --dur-slow: 0ms;
  }
}