/* =================================================================
   Jesus Life Spring Evangelism Church (JLSE)
   Revolut-Grade Design System Engine & Design Tokens
   Strict Two-Mode Alternating Canvas System (#000000 / #ffffff)
   ================================================================== */

:root {
  /* ---------------------------------------------------------------
     1. Brand & Canvas Tokens
     --------------------------------------------------------------- */
  --primary: #494fdf;             /* Cobalt Violet Brand Stamp */
  --primary-bright: #4f55f1;      /* Cobalt Bright */
  --primary-deep: #3a40c4;        /* Cobalt Pressed / Deep */
  --on-primary: #ffffff;          /* Label on Cobalt */

  --canvas-dark: #000000;         /* Storytelling Canvas (True Black) */
  --canvas-light: #ffffff;        /* Catalogue Canvas (Pure White) */

  /* ---------------------------------------------------------------
     2. Surface Hierarchy (Zero Drop Shadows — Luminance Shifts)
     --------------------------------------------------------------- */
  --surface-deep: #0a0a0a;        /* 1-step up dark inset surface */
  --surface-elevated: #16181a;    /* Planning / Card background on dark */
  --surface-card: #ffffff;        /* Pure white card on light */
  --surface-soft: #f4f4f4;        /* Subtle off-white for download tiles / chips */
  
  /* Hairline Dividers */
  --hairline-light: #e2e2e7;      /* 1px divider on light bands */
  --hairline-dark: rgba(255, 255, 255, 0.12); /* 1px divider on dark bands */
  --hairline-strong: #191c1f;     /* Strong structural divider */
  --divider-soft: rgba(255, 255, 255, 0.06);  /* Footer & subtle dividers */

  /* ---------------------------------------------------------------
     3. Text & Ink Tokens
     --------------------------------------------------------------- */
  --ink: #191c1f;                 /* Primary text on light canvas */
  --body: #1f2226;                /* Long-form editorial body */
  --charcoal: #3a3d40;            /* Captions & secondary nav on light */
  --mute: #505a63;                /* Supporting copy on light */
  --ash: #5c5e60;                 /* Tertiary text */
  --stone: #8d969e;               /* Metadata & subtle captions */
  --faint: #c9c9cd;               /* Disabled foreground / button pressed */

  --on-dark: #ffffff;             /* Primary text on dark canvas */
  --on-dark-mute: rgba(255, 255, 255, 0.72); /* Supporting text on dark */
  --on-dark-subtle: rgba(255, 255, 255, 0.45); /* Subtle metadata on dark */

  /* ---------------------------------------------------------------
     4. Saturated Product / Illustration Accents (Inside Media & Badges Only)
     --------------------------------------------------------------- */
  --accent-teal: #00a87e;         /* Living Water Teal */
  --accent-blue-link: #376cd5;    /* Default inline link */
  --accent-light-blue: #007bc2;   /* Accent light blue */
  --accent-light-green: #428619;  /* Positive / Success badge */
  --accent-green-text: #006400;   /* Success text */
  --accent-yellow: #b09000;       /* Caution / Warning state */
  --accent-warning: #ec7e00;      /* Warning orange */
  --accent-pink: #e61e49;         /* Category highlight pink */
  --accent-danger: #e23b4a;       /* Destructive / Live crimson */
  --accent-deep-red: #8b0000;     /* Inline error text */
  --accent-brown: #936d62;        /* Metals tier warm neutral */
  --link: #376cd5;

  /* ---------------------------------------------------------------
     5. Typography Stacks & Fluid Clamps
     --------------------------------------------------------------- */
  --font-display: 'Aeonik Pro', 'Inter Display', 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Display Sizes (Aeonik Pro 500, tight line-height 1.0, negative tracking) */
  --font-size-display-xxl: clamp(28px, 6.5vw, 112px);
  --letter-spacing-display-xxl: -0.025em;

  --font-size-display-xl: clamp(24px, 5vw, 72px);
  --letter-spacing-display-xl: -0.015em;

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

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

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

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

  /* Body Sizes (Inter 400 / 600 with positive mechanical tracking on UI) */
  --font-size-body-lg: 17px;
  --font-size-body-md: 15px;
  --font-size-body-sm: 14px;
  --font-size-caption: 13px;

  --letter-spacing-ui: 0.24px;
  --letter-spacing-ui-bold: 0.16px;

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

  /* ---------------------------------------------------------------
     7. 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, 80px);
  --spacing-band: clamp(64px, 8vw, 100px);

  /* Container Width */
  --container-max: 1200px;
  --header-height: 64px;

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