/* ==========================================================================
   SACRED DESIGN TOKEN SYSTEM — GPBC
   ==========================================================================
   Single source of truth for all design tokens.
   Grace and Praise Bangladeshi Church · Digital Ministry Platform

   Load Order: sacred-tokens.css → liturgical-tokens.css → component CSS
   
   Categories:
     1. Color Tokens
     2. Typography Tokens
     3. Spacing Tokens
     4. Radius Tokens
     5. Shadow Tokens
     6. Glow Tokens
     7. Transition Tokens
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. COLOR TOKENS — Light Mode (Default)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Primary Brand ── */
    --color-primary: #3b82f6;
    --color-primary-dark: #1e40af;
    --color-primary-light: #dbeafe;
    --color-accent: #f59e0b;
    --color-secondary: #0ea5a4;

    /* ── Backgrounds ── */
    --color-background: #fefdfb;
    --color-surface: #f8fafc;
    --color-surface-elevated: #ffffff;

    /* ── Text ── */
    --color-text-primary: #0f172a;
    --color-text-secondary: #334155;
    --color-text-muted: #475569;
    --color-text-inverse: #ffffff;
    --color-scripture: #223E5A;

    /* ── Borders & Dividers ── */
    --color-divider: rgba(15, 23, 42, 0.12);
    --color-border: rgba(15, 23, 42, 0.08);

    /* ── Semantic ── */
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-error: #dc2626;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Font Families ── */
    --font-heading: 'Cinzel', 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-bangla-heading: 'Noto Serif Bengali', 'Hind Siliguri', serif;
    --font-bangla-body: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;
    --font-scripture: 'Playfair Display', Georgia, 'Noto Serif Bengali', serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Font Sizes ── */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.1rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.6rem;
    --font-4xl: 2.1rem;
    --font-5xl: 2.7rem;
    --font-6xl: 3.2rem;

    /* ── Font Weights ── */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ── Line Heights ── */
    --leading-tight: 1.3;
    --leading-normal: 1.7;
    --leading-relaxed: 1.85;
    --leading-bangla: 1.9;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. SPACING TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --space-xs: 0.5rem;
    /* 8px  — tight padding */
    --space-sm: 1rem;
    /* 16px — small gaps */
    --space-md: 1.5rem;
    /* 24px — card padding */
    --space-lg: 2.5rem;
    /* 40px — section spacing */
    --space-xl: 3.5rem;
    /* 56px — hero padding */
    --space-2xl: 5rem;
    /* 80px — major separators */
    --space-3xl: 7rem;
    /* 112px — dramatic spacing */
}


/* ══════════════════════════════════════════════════════════════════════════
   4. RADIUS TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --radius-sm: 0.375rem;
    /* buttons, inputs */
    --radius-md: 0.5rem;
    /* small cards, badges */
    --radius-lg: 1rem;
    /* feature cards */
    --radius-card: 1.25rem;
    /* devotion/ministry cards */
    --radius-pill: 9999px;
    /* pills, toggles */
}


/* ══════════════════════════════════════════════════════════════════════════
   5. SHADOW TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --shadow-sm: 0 1px 3px 0 rgba(17, 24, 39, 0.06);
    --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 6px 18px -6px rgba(17, 24, 39, 0.12);
    --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.12);
    --shadow-elevated: 0 14px 28px -8px rgba(15, 23, 42, 0.14);
    --shadow-lg: 0 14px 28px -8px rgba(17, 24, 39, 0.14);
    --shadow-xl: 0 24px 40px -12px rgba(17, 24, 39, 0.18);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. GLOW TOKENS — Sacred Ambient Light
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Gold sacred glow — signature church warmth */
    --glow-sacred:
        0 0 8px rgba(201, 162, 79, 0.25),
        0 0 18px rgba(201, 162, 79, 0.18);

    /* Intense glow — dark mode hover, active states */
    --glow-sacred-intense:
        0 0 12px rgba(201, 162, 79, 0.35),
        0 0 24px rgba(201, 162, 79, 0.22),
        0 0 36px rgba(201, 162, 79, 0.12);

    /* Subtle white glow — dark mode ambient */
    --glow-subtle:
        0 0 6px rgba(255, 255, 255, 0.15),
        0 0 12px rgba(255, 255, 255, 0.08);

    /* Focus ring — WCAG accessible, season-aware */
    --glow-focus: 0 0 0 3px var(--season-focus, #60a5fa);
}


/* ══════════════════════════════════════════════════════════════════════════
   7. TRANSITION TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* Sacred easing curves — reverent, non-app-like motion */
    --ease-sacred: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-sacred-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-sacred-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Sacred duration scale */
    --duration-instant: 100ms;
    --duration-fast: 160ms;
    --duration-normal: 240ms;
    --duration-slow: 420ms;
    --duration-reverent: 680ms;
}


/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"],
html.dark,
body.dark {
    /* Colors */
    --color-primary: #60a5fa;
    --color-primary-dark: #3b82f6;
    --color-primary-light: #1e3a5f;
    --color-accent: #fbbf24;
    --color-secondary: #2dd4bf;

    --color-background: #0a0f1c;
    --color-surface: #111827;
    --color-surface-elevated: #1f2937;

    --color-text-primary: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #0f172a;
    --color-scripture: #F0F6FF;

    --color-divider: rgba(255, 255, 255, 0.12);
    --color-border: rgba(255, 255, 255, 0.08);

    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-error: #f87171;

    /* Shadows deepen in dark mode */
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-elevated: 0 14px 28px -8px rgba(0, 0, 0, 0.4);
}


/* ══════════════════════════════════════════════════════════════════════════
   BANGLA TYPOGRAPHY RULES
   Bengali text needs larger sizing and more line-height for readability.
   পবিত্র বাইবেল (কেরী ভার্সন)
   ══════════════════════════════════════════════════════════════════════════ */
[lang="bn"],
.bn,
.bangla-text,
.bangla {
    font-family: var(--font-bangla-body);
    font-size: 1.1em;
    line-height: var(--leading-bangla);
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[lang="bn"] h1,
[lang="bn"] h2,
[lang="bn"] h3,
.bn h1,
.bn h2,
.bn h3,
.bangla-heading {
    font-family: var(--font-bangla-heading);
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    :root {
        --space-lg: 2rem;
        --space-xl: 2.5rem;
        --space-2xl: 3.5rem;
        --space-3xl: 5rem;
        --font-4xl: 1.75rem;
        --font-5xl: 2.2rem;
        --font-6xl: 2.6rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
        --duration-instant: 0ms;
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-reverent: 0ms;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   LEGACY ALIASES — Backward Compatibility
   Maps old token names → new unified names.
   Existing CSS referencing these will continue to work.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand → Color */
    --brand-primary: var(--color-primary);
    --brand-secondary: var(--color-secondary);
    --brand-accent: var(--color-accent);
    --brand-warmth: var(--color-accent);

    /* Background */
    --bg-page: var(--color-background);
    --bg-section: var(--color-surface);
    --bg-card: var(--color-surface-elevated);
    --bg-card-surface: var(--color-surface-elevated);

    /* Text */
    --text-heading: var(--color-text-primary);
    --text-body: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-inverse: var(--color-text-inverse);

    /* Legacy semantic */
    --color-text: var(--color-text-secondary);
    --color-text-light: var(--color-text-muted);
    --color-text-inverse: var(--text-inverse);
    --color-shadow: var(--shadow-soft);

    /* Borders */
    --border-subtle: var(--color-border);
    --divider-line: var(--color-divider);
    --border-highlight: var(--color-primary);

    /* Buttons */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-text: #ffffff;

    /* Spacing (old names → new) */
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --spacing-2xl: var(--space-2xl);
    --spacing-3xl: var(--space-3xl);

    /* Radius (old names → new) */
    --radius-xl: var(--radius-card);
    --radius-full: var(--radius-pill);

    /* Transition (old names → new) */
    --transition-base: var(--transition-normal);

    /* Sacred Motion (old names → new) */
    --sacred-ease: var(--ease-sacred);
    --sacred-ease-out: var(--ease-sacred-out);
    --sacred-ease-in-out: var(--ease-sacred-in-out);
    --sacred-duration-instant: var(--duration-instant);
    --sacred-duration-fast: var(--duration-fast);
    --sacred-duration-normal: var(--duration-normal);
    --sacred-duration-slow: var(--duration-slow);
    --sacred-duration-reverent: var(--duration-reverent);

    /* Sacred Glows (old names → new) */
    --sacred-glow-gold: var(--glow-sacred);
    --sacred-glow-gold-intense: var(--glow-sacred-intense);
    --sacred-glow-subtle: var(--glow-subtle);

    /* Container */
    --container-max-width: 1200px;
    --container-padding: var(--space-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   8. BIBLE READER THEME (SANCTUARY)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Sanctuary Theme Tokens */
    --sanctuary-bg: #fdfaf3;
    --sanctuary-text: #1e293b;
    --sanctuary-gold: #d4b978;
    --sanctuary-gold-glow: rgba(212, 185, 120, 0.4);
    --sanctuary-parchment: url('https://www.transparenttextures.com/patterns/natural-paper.png');
    
    /* Dark Sanctuary Override */
    --dark-sanctuary-bg: #0f172a;
    --dark-sanctuary-text: #f8fafc;
    
    /* Animation Tokens */
    --calm-duration: 0.6s;
    --calm-ease: cubic-bezier(0.4, 0, 0.2, 1);
}