/* ==========================================================================
   2Rivers Church — CSS custom properties
   Source: Brand Guide V1.1 · Edition 01 · Fall 2026 (2rbranding.pages.dev/#digital).
   Every value here is published in the guide. Where this file and the guide
   ever disagree, the guide wins.
   Fonts (Google Fonts):
   https://fonts.googleapis.com/css2?family=Archivo:wght@400..900&family=Host+Grotesk:wght@300..800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --2r-blue: #00A5E5;          /* 2RC Blue, PMS 2995 C. Never white text on it. */
  --2r-blue-bright: #4EC3F0;   /* Blue on Navy */
  --2r-blue-deep: #0066A3;     /* Blue text, links and white-text buttons on light (white on it 6.12:1) */
  --2r-navy: #001B2E;

  /* ---- Neutrals ---- */
  --2r-ink: #0A0A0D;
  --2r-ink-elev: #15151A;
  --2r-graphite: #2A2D33;
  --2r-slate: #58595B;         /* light grounds only */
  --2r-ash: #8A8C90;           /* Labels and metadata on dark (5.87:1 on Ink) */
  --2r-mist: #C6CDD4;
  --2r-stone: #F4F5F7;
  --2r-paper: #FFFFFF;

  /* ---- Gradient ---- */
  --2r-sky: #6CB4F0;
  --2r-electric: #6A4CFF;
  --2r-magenta: #B53DE8;
  --2r-hot-pink: #FF3D8A;
  --2r-signal: #FF2935;
  --2r-signal-deep: #C8102E;    /* Error red on light (5.39:1 on Stone, 5.88:1 on Paper) */
  --2r-gradient: linear-gradient(135deg,
      var(--2r-sky) 0%, var(--2r-electric) 25%, var(--2r-magenta) 50%,
      var(--2r-hot-pink) 75%, var(--2r-signal) 100%);
  /* Gradient text on light grounds: start at Electric so the first letters stay legible */
  --2r-gradient-on-light: linear-gradient(135deg,
      var(--2r-electric) 0%, var(--2r-magenta) 40%, var(--2r-hot-pink) 75%, var(--2r-signal) 100%);

  /* ---- Lines ---- */
  --2r-line-dark: rgba(255, 255, 255, 0.12);
  --2r-line-dark-soft: rgba(255, 255, 255, 0.06);
  --2r-line-light: rgba(10, 10, 13, 0.14);
  --2r-line-light-soft: rgba(10, 10, 13, 0.08);

  /* ---- Semantic (light mode default) ---- */
  --2r-bg: var(--2r-stone);
  --2r-surface: var(--2r-paper);
  --2r-text: var(--2r-ink);
  --2r-text-body: var(--2r-ink);
  --2r-text-muted: var(--2r-slate);
  --2r-link: var(--2r-blue-deep);
  --2r-line: var(--2r-line-light);
  --2r-focus: var(--2r-blue);
  --2r-error: var(--2r-signal-deep);

  /* ---- Type families ---- */
  --2r-font-display: 'CMG Sans', 'Archivo', 'Inter Tight', system-ui, sans-serif;
  --2r-font-accent: 'Instrument Serif', 'Times New Roman', serif;
  --2r-font-body: 'Host Grotesk', system-ui, -apple-system, sans-serif;
  --2r-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --2r-font-youth: 'Bebas Neue', 'Archivo', sans-serif; /* Youth only, not finalized */

  /* ---- Type scale (fluid web values; guide values in comments) ---- */
  --2r-fs-display: clamp(64px, 12vw, 200px);  /* 200 / 0.86 / 900 */
  --2r-fs-h1: clamp(48px, 9vw, 144px);        /* 144 / 0.88 / 800 */
  --2r-fs-h2: clamp(36px, 6vw, 96px);         /* 96 / 0.92 / 800 */
  --2r-fs-h3: clamp(24px, 3.4vw, 48px);       /* 48 / 1.0 / 700 */
  --2r-fs-h4: 22px;
  --2r-fs-lead: 26px;                         /* Instrument Serif italic */
  --2r-fs-body-lg: 20px;                      /* 20 / 1.5 */
  --2r-fs-body: 16px;                         /* 16 / 1.55 */
  --2r-fs-small: 14px;
  --2r-fs-label: 11px;                        /* 11 / 1.4, uppercase, +0.14em */

  --2r-lh-display: 0.86;
  --2r-lh-h1: 0.88;
  --2r-lh-h2: 0.92;
  --2r-lh-h3: 1;
  --2r-lh-lead: 1.3;
  --2r-lh-body: 1.55;
  --2r-lh-label: 1.4;

  --2r-ls-display: -0.045em;
  --2r-ls-h1: -0.04em;
  --2r-ls-h2: -0.03em;
  --2r-ls-h3: -0.02em;
  --2r-ls-label: 0.14em;

  /* ---- Spacing (8px base, 4px half step) ---- */
  --2r-space-1: 4px;
  --2r-space-2: 8px;
  --2r-space-3: 12px;
  --2r-space-4: 16px;
  --2r-space-6: 24px;
  --2r-space-8: 32px;
  --2r-space-12: 48px;
  --2r-space-16: 64px;
  --2r-space-24: 96px;
  --2r-space-32: 128px;
  --2r-section-y: clamp(64px, 9vw, 128px);
  --2r-gutter: clamp(20px, 4vw, 72px);
  --2r-max-width: 1440px;
  --2r-measure: 68ch;

  /* ---- Shape ---- */
  --2r-radius: 0;
  --2r-radius-sm: 4px;     /* only where a platform forces rounding */
  --2r-radius-pill: 999px;
  --2r-radius-round: 50%;
  --2r-border: 1px solid var(--2r-line);

  /* ---- Elevation (overlays only; cards stay flat) ---- */
  --2r-shadow-overlay: 0 12px 40px rgba(10, 10, 13, 0.18);
  --2r-focus-ring: 0 0 0 2px var(--2r-bg), 0 0 0 4px var(--2r-focus);

  /* ---- Motion: 150ms hovers, 250ms reveals, one easing ---- */
  --2r-ease: cubic-bezier(0.2, 0, 0, 1);
  --2r-dur-fast: 150ms;
  --2r-dur: 250ms;

  /* ---- Breakpoints (for reference; custom properties can't drive @media) ----
     480px phone · 768px tablet · 1024px laptop · 1440px desktop */
}

/* Dark canvas: add data-2r-theme="dark" to <html>, or class "twor-dark" to any section.
   (CSS class names can't start with a digit, so classes use the "twor-" prefix.) */
[data-2r-theme="dark"], .twor-dark {
  --2r-bg: var(--2r-ink);
  --2r-surface: var(--2r-ink-elev);
  --2r-text: var(--2r-stone);
  --2r-text-body: var(--2r-mist);
  --2r-text-muted: var(--2r-ash);
  --2r-link: var(--2r-blue);
  --2r-line: var(--2r-line-dark);
  --2r-error: var(--2r-signal);
  --2r-gradient-on-light: var(--2r-gradient);
}

/* ==========================================================================
   Optional starter styles
   ========================================================================== */
.twor-display, .twor-h1, .twor-h2, .twor-h3, .twor-h4 {
  font-family: var(--2r-font-display); color: var(--2r-text); margin: 0; text-wrap: balance;
}
.twor-display { font-size: var(--2r-fs-display); font-weight: 900; line-height: var(--2r-lh-display); letter-spacing: var(--2r-ls-display); }
.twor-h1 { font-size: var(--2r-fs-h1); font-weight: 800; line-height: var(--2r-lh-h1); letter-spacing: var(--2r-ls-h1); }
.twor-h2 { font-size: var(--2r-fs-h2); font-weight: 800; line-height: var(--2r-lh-h2); letter-spacing: var(--2r-ls-h2); }
.twor-h3 { font-size: var(--2r-fs-h3); font-weight: 700; line-height: var(--2r-lh-h3); letter-spacing: var(--2r-ls-h3); }
.twor-h4 { font-size: var(--2r-fs-h4); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.twor-accent { font-family: var(--2r-font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.twor-accent--gradient { background: var(--2r-gradient-on-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.twor-lead { font-family: var(--2r-font-accent); font-style: italic; font-size: var(--2r-fs-lead); line-height: var(--2r-lh-lead); color: var(--2r-text-muted); }
.twor-body { font-family: var(--2r-font-body); font-size: var(--2r-fs-body); line-height: var(--2r-lh-body); color: var(--2r-text-body); max-width: var(--2r-measure); }
.twor-label { font-family: var(--2r-font-mono); font-size: var(--2r-fs-label); line-height: var(--2r-lh-label); letter-spacing: var(--2r-ls-label); text-transform: uppercase; color: var(--2r-text-muted); }

.twor-btn {
  display: inline-flex; align-items: center; gap: var(--2r-space-2);
  min-height: 44px; padding: 0 var(--2r-space-6);
  font-family: var(--2r-font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: var(--2r-ls-label); text-transform: uppercase; text-decoration: none;
  border: 1px solid currentColor; border-radius: var(--2r-radius); cursor: pointer;
  transition: background var(--2r-dur-fast) var(--2r-ease), color var(--2r-dur-fast) var(--2r-ease);
}
.twor-btn:focus-visible { outline: none; box-shadow: var(--2r-focus-ring); }
.twor-btn--primary { background: var(--2r-text); color: var(--2r-bg); border-color: var(--2r-text); }
.twor-btn--primary:hover { background: transparent; color: var(--2r-text); }
.twor-btn--brand { background: var(--2r-blue); color: var(--2r-ink); border-color: var(--2r-blue); }   /* 7.07:1 */
.twor-btn--brand:hover { background: var(--2r-blue-deep); color: var(--2r-paper); border-color: var(--2r-blue-deep); } /* 6.12:1 */
.twor-btn--outline { background: transparent; color: var(--2r-text); }
.twor-btn--outline:hover { background: var(--2r-text); color: var(--2r-bg); }

.twor-chip { display: inline-flex; padding: 8px 14px; border: 1px solid var(--2r-line); border-radius: var(--2r-radius-pill); font-family: var(--2r-font-body); font-size: 14px; color: var(--2r-text); }

.twor-card { background: var(--2r-surface); border: var(--2r-border); border-radius: var(--2r-radius); padding: var(--2r-space-8); display: flex; flex-direction: column; gap: var(--2r-space-4); }

.twor-link { color: var(--2r-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.twor-link:hover { text-decoration-thickness: 2px; }

.twor-field { width: 100%; min-height: 48px; padding: 0 var(--2r-space-4); font: 16px/1.4 var(--2r-font-body); color: var(--2r-text); background: var(--2r-surface); border: var(--2r-border); border-radius: var(--2r-radius); }
.twor-field:focus { outline: none; box-shadow: var(--2r-focus-ring); }
.twor-field[aria-invalid="true"] { border-color: var(--2r-error); }
.twor-error { font-family: var(--2r-font-body); font-size: 14px; line-height: 1.5; color: var(--2r-error); }

.twor-grain { position: relative; isolation: isolate; }
.twor-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) { .twor-btn { transition: none; } }