/* =================================================================
   Jesus Life Spring Evangelism Church (JLSE)
   Luminous Modern Spiritual Design System Engine & Design Tokens
   Official Brand Color Palette:
   - Primary Brand Color: Vibrant Sky Blue (#38BDF8 / #0284C7)
   - Secondary Accent: Living Water / Cyan (#06B6D4 / #E0F2FE)
   - Surface & Background: Pure White (#FFFFFF), Crisp Light Azure (#F0F9FF / #F8FAFC)
   - Deep Contrast Text & Headings: Deep Navy / Slate Blue (#0F172A / #1E293B)
   - Subtle Borders & Cards: Soft Sky Glass (#BAE6FD with glassmorphism)
   ================================================================== */

:root {
  /* ---------------------------------------------------------------
     1. Official Core Rebranding Tokens (Mandatory Specification)
     --------------------------------------------------------------- */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F0F9FF;
  --bg-card: rgba(255, 255, 255, 0.92);
  --border-color: rgba(56, 189, 248, 0.22);
  --primary-blue: #0284C7;
  --sky-blue: #38BDF8;
  --sky-light: #E0F2FE;
  --cyan-accent: #06B6D4;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-light: #64748B;
  --white: #FFFFFF;
  --shadow-soft: 0 10px 30px -10px rgba(2, 132, 199, 0.15);
  --shadow-card: 0 4px 20px rgba(56, 189, 248, 0.12);

  /* ---------------------------------------------------------------
     2. Brand Color Ecosystem & Gradient Stacks
     --------------------------------------------------------------- */
  --primary: #0284C7;             /* Primary Vibrant Sky Blue */
  --primary-bright: #38BDF8;      /* Sky Blue Radiant Highlight */
  --primary-deep: #0369A1;        /* Deep Ocean Blue Pressed */
  --primary-gradient: linear-gradient(135deg, #0284C7 0%, #38BDF8 60%, #06B6D4 100%);
  --living-water-gradient: linear-gradient(135deg, #38BDF8 0%, #06B6D4 100%);
  --sky-soft-gradient: linear-gradient(180deg, #F0F9FF 0%, #E0F2FE 40%, #FFFFFF 100%);
  --on-primary: #FFFFFF;          /* Pure White on Sky Blue */

  /* ---------------------------------------------------------------
     3. Surface & Canvas Tokens (Luminous Glassmorphism)
     --------------------------------------------------------------- */
  --canvas-light: #FFFFFF;        /* Pure White Canvas */
  --canvas-dark: #F0F9FF;         /* Spiritual Sky Band Canvas */
  --canvas-footer: #0F172A;       /* Grounding Deep Navy Footer */

  --surface-deep: #F8FAFC;        /* Crisp Light Surface */
  --surface-elevated: #FFFFFF;    /* Pure White Floating Surface */
  --surface-card: rgba(255, 255, 255, 0.92); /* Glassmorphism Card Surface */
  --surface-soft: #F0F9FF;        /* Subtle Light Azure Tile */
  --surface-glass: rgba(255, 255, 255, 0.85); /* Frosted Glass Surface */
  --surface-glass-border: rgba(186, 230, 253, 0.6); /* Soft Sky Glass Border */

  /* Hairline & Section Dividers */
  --hairline-light: rgba(56, 189, 248, 0.22); /* Sky Hairline */
  --hairline-dark: rgba(56, 189, 248, 0.20);  /* Sky Hairline on Azure Bands */
  --hairline-strong: rgba(2, 132, 199, 0.28); /* Strong Azure Accent Divider */
  --divider-soft: rgba(56, 189, 248, 0.16);   /* Subtle Card Dividers */

  /* ---------------------------------------------------------------
     4. Text & Ink Tokens (Deep Navy / Slate Blue Contrast)
     --------------------------------------------------------------- */
  --ink: #0F172A;                 /* Deep Navy Primary Heading & Key Text */
  --body: #334155;                /* Slate Charcoal Body Reading Copy */
  --charcoal: #1E293B;            /* Deep Slate Secondary */
  --mute: #475569;                /* Slate Muted Supporting Copy */
  --ash: #64748B;                 /* Soft Slate Tertiary Text */
  --stone: #64748B;               /* Metadata & Captions */
  --faint: #CBD5E1;               /* Disabled Foreground / Subtle Outlines */

  /* Text on Light Bands (Mapped for universal component harmony) */
  --on-dark: #0F172A;             /* High Contrast Deep Navy */
  --on-dark-mute: #475569;        /* Secondary Slate Text */
  --on-dark-subtle: #64748B;      /* Tertiary Slate Text */
  
  /* Text on True Deep Dark Footer */
  --on-footer: #FFFFFF;
  --on-footer-mute: #94A3B8;

  /* ---------------------------------------------------------------
     5. Saturated Spiritual Accents (Living Water, Healing, Revival)
     --------------------------------------------------------------- */
  --accent-teal: #06B6D4;         /* Living Water Cyan */
  --accent-cyan: #06B6D4;         /* Living Water Cyan */
  --accent-blue-link: #0284C7;    /* Vibrant Sky Link */
  --accent-light-blue: #38BDF8;   /* Sky Blue */
  --accent-light-green: #10B981;  /* Grace / Success Green */
  --accent-green-text: #047857;   /* Success Text */
  --accent-yellow: #D97706;       /* Radiant Amber Warning */
  --accent-warning: #F97316;      /* Joyous Orange */
  --accent-pink: #EC4899;         /* Rose Highlight */
  --accent-danger: #EF4444;       /* Urgent Crimson / Live Stream */
  --accent-deep-red: #B91C1C;     /* Error Deep Crimson */
  --link: #0284C7;

  /* ---------------------------------------------------------------
     6. Modern Elevation & Glassmorphism Shadows
     --------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(2, 132, 199, 0.08);
  --shadow-md: 0 8px 24px -4px rgba(2, 132, 199, 0.12);
  --shadow-lg: 0 16px 36px -8px rgba(2, 132, 199, 0.16);
  --shadow-glass: 0 8px 32px 0 rgba(2, 132, 199, 0.08);
  --shadow-glow: 0 0 25px rgba(56, 189, 248, 0.35);

  /* ---------------------------------------------------------------
     7. Typography Stacks & Fluid Clamps
     --------------------------------------------------------------- */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Display Sizes */
  --font-size-display-xxl: clamp(32px, 6.5vw, 92px);
  --letter-spacing-display-xxl: -0.025em;

  --font-size-display-xl: clamp(26px, 5vw, 64px);
  --letter-spacing-display-xl: -0.02em;

  --font-size-display-lg: clamp(22px, 3.8vw, 42px);
  --letter-spacing-display-lg: -0.015em;

  --font-size-display-md: clamp(20px, 3vw, 34px);
  --letter-spacing-display-md: -0.01em;

  --font-size-heading-lg: clamp(18px, 2.2vw, 28px);
  --letter-spacing-heading-lg: -0.01em;

  --font-size-heading-md: 22px;
  --font-size-heading-sm: 18px;

  /* Body Sizes */
  --font-size-body-lg: 17px;
  --font-size-body-md: 15px;
  --font-size-body-sm: 14px;
  --font-size-caption: 13px;

  --letter-spacing-ui: 0.2px;
  --letter-spacing-ui-bold: 0.15px;

  /* ---------------------------------------------------------------
     8. Shape Radii Tokens
     --------------------------------------------------------------- */
  --rounded-none: 0px;
  --rounded-sm: 8px;              /* Inline chips / small badges */
  --rounded-md: 14px;             /* Form inputs / download tiles */
  --rounded-lg: 20px;             /* Feature cards / schedule cards */
  --rounded-xl: 28px;             /* Video containers / modal dialogs */
  --rounded-full: 9999px;         /* All buttons / pills / tags */

  /* ---------------------------------------------------------------
     9. Spacing Tokens
     --------------------------------------------------------------- */
  --spacing-xxs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 14px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 48px;
  --spacing-block: 64px;
  --spacing-section: clamp(48px, 6vw, 84px);
  --spacing-band: clamp(64px, 8vw, 108px);

  /* Container Width & Header */
  --container-max: 1200px;
  --header-height: 68px;

  /* Smooth Fluid Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}