/* =========================================================================
   Aprisco Design System — Colors & Type
   Monochromatic. Moody. Pastoral.
   ========================================================================= */

/* --- Webfonts (Google Fonts) -------------------------------------------
   SUBSTITUTION FLAG: We use Google Fonts (Archivo + Fraunces) as the
   nearest match for the intended display voice. If the church has
   licensed fonts they prefer (e.g. Neue Haas Grotesk Display Pro,
   Gotham Condensed, GT Sectra) swap them in fonts/ and update here.
   ------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Archivo+Narrow:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ───────── COLOR ───────── */

  /* Neutrals — the backbone. Warm undertone for the "sombra quente" feel. */
  --ink-000: #0A0908;     /* near-black, slightly warm */
  --ink-050: #111110;     /* card surface on black */
  --ink-100: #1A1917;     /* raised surface */
  --ink-200: #26241F;     /* hairline on dark, warm border */
  --ink-300: #3B382F;     /* muted border / divider */
  --ink-400: #5A554A;     /* tertiary text on dark */
  --ink-500: #7A7468;     /* secondary text on dark */
  --ink-600: #9A9387;     /* tertiary text on light, muted on dark */
  --ink-700: #B8B1A3;     /* secondary text on dark, muted on light */
  --ink-800: #D6D0C2;     /* hairline on light */
  --ink-900: #E8E3D6;     /* off-white / paper */
  --ink-950: #F4F0E6;     /* brightest paper — NEVER pure #FFF */
  --paper:   #F4F0E6;     /* alias for light surface */
  --black:   #0A0908;     /* alias */

  /* Semantic surfaces */
  --bg-primary:     var(--ink-000);
  --bg-secondary:   var(--ink-050);
  --bg-tertiary:    var(--ink-100);
  --bg-inverse:     var(--paper);

  /* Semantic foregrounds (on dark) */
  --fg-primary:     var(--ink-950);  /* body text on black */
  --fg-secondary:   var(--ink-700);  /* subdued */
  --fg-tertiary:    var(--ink-500);  /* captions, meta */
  --fg-muted:       var(--ink-400);  /* timestamps, eyebrows */
  --fg-inverse:     var(--ink-000);  /* for light surfaces */

  /* Borders */
  --border-subtle:  rgba(244, 240, 230, 0.06);
  --border-default: rgba(244, 240, 230, 0.12);
  --border-strong:  rgba(244, 240, 230, 0.24);
  --border-light:   rgba(10, 9, 8, 0.12);  /* on paper */

  /* Status — desaturated, never cheerful */
  --signal-rest:    var(--ink-700);
  --signal-live:    #C9443A;   /* only for LIVE stream indicators, sparingly */

  /* Overlays / scrims */
  --scrim-strong:   rgba(10, 9, 8, 0.78);
  --scrim-medium:   rgba(10, 9, 8, 0.55);
  --scrim-light:    rgba(10, 9, 8, 0.28);

  /* ───────── TYPE ───────── */

  /* Families */
  --font-display:   'Archivo Narrow', 'Archivo', 'Barlow Condensed', 'Oswald', sans-serif;
  --font-sans:      'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:     'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — tuned for 16px base, large hero moments */
  --text-xs:    0.75rem;    /* 12 — eyebrows, meta */
  --text-sm:    0.875rem;   /* 14 — captions */
  --text-base:  1rem;       /* 16 — body */
  --text-md:    1.125rem;   /* 18 — lead body */
  --text-lg:    1.375rem;   /* 22 — subheads */
  --text-xl:    1.75rem;    /* 28 — h4 */
  --text-2xl:   2.25rem;    /* 36 — h3 */
  --text-3xl:   3rem;       /* 48 — h2 */
  --text-4xl:   4.5rem;     /* 72 — h1 */
  --text-5xl:   6.5rem;     /* 104 — hero */
  --text-6xl:   10rem;      /* 160 — mega hero */

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;
  --w-black:    900;

  /* Line heights */
  --lh-tight:   0.92;   /* for display all-caps */
  --lh-snug:    1.05;
  --lh-normal:  1.25;
  --lh-relaxed: 1.5;
  --lh-loose:   1.7;

  /* Letter spacing */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-wider:   0.12em;     /* eyebrows */
  --tr-widest:  0.24em;     /* tiny all-caps meta */

  /* ───────── SPACING ───────── */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 12rem;    /* 192 */

  /* ───────── RADII ───────── */
  /* Aprisco is architectural: almost no rounding. Used only where necessary. */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-full:  9999px;

  /* ───────── SHADOWS ─────────
     Dark UI uses LIGHT glows + sharp drops for dimensionality. */
  --shadow-sm:    0 1px 0 rgba(244, 240, 230, 0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 2px 4px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6), 0 24px 64px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 0 1px rgba(244,240,230,0.08), 0 0 48px rgba(244,240,230,0.04);

  /* ───────── MOTION ───────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      120ms;
  --dur-normal:    220ms;
  --dur-slow:      420ms;
  --dur-cinematic: 800ms;

  /* ───────── LAYOUT ───────── */
  --page-max:      1440px;
  --content-max:   1200px;
  --reading-max:   68ch;
  --gutter:        clamp(1.5rem, 4vw, 4rem);
}

/* ═══════════ SEMANTIC TYPE STYLES ═══════════ */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.h-hero {
  font-family: var(--font-display);
  font-size: clamp(4rem, 11vw, var(--text-6xl));
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, var(--text-5xl));
  font-weight: var(--w-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--text-4xl));
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-tight);
  color: var(--fg-primary);
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  max-width: var(--reading-max);
  text-wrap: pretty;
}

.body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.scripture {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 300;
  font-style: italic;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tr-normal);
  color: var(--fg-primary);
  text-wrap: balance;
}

.scripture-ref {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Utility */
.on-paper { --fg-primary: var(--ink-000); --fg-secondary: var(--ink-300); --fg-tertiary: var(--ink-400); --fg-muted: var(--ink-500); }