/* ============================================================
   Gospel Mobile App — CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
    /* Brand colours */
    --color-primary:      #0055a5;
    --color-primary-dark: #003d80;
    --color-primary-light:#e8f1fb;
    --color-accent:       #d4a017;
    --color-accent-light: #fff8e1;

    /* Vestment colours */
    --vestment-green:  #2e7d32;
    --vestment-purple: #6a1b9a;
    --vestment-white:  #f5f0e8;
    --vestment-red:    #c62828;
    --vestment-rose:   #e91e8c;
    --vestment-black:  #212121;
    --vestment-gold:   #f9a825;

    /* Liturgical season */
    --season-advent:   #4a1486;
    --season-christmas:#c9a227;
    --season-lent:     #6d0b8a;
    --season-easter:   #f9c74f;
    --season-ordinary: #2d6a4f;

    /* Medals */
    --medal-seedling:     #4ade80;
    --medal-prayer:       #60a5fa;
    --medal-disciple:     #facc15;
    --medal-herald:       #f87171;
    --medal-light:        #fbbf24;
    --medal-sacred-heart: #e879f9;

    /* UI */
    --bg:              #f4f6f9;
    --surface:         #ffffff;
    --surface-2:       #f8f9fb;
    --border:          #e2e6ea;
    --text:            #1a1a2e;
    --text-muted:      #6b7280;
    --text-inverse:    #ffffff;

    /* Typography */
    --font-base:   'Nunito', 'Segoe UI', sans-serif;
    --font-serif:  'Merriweather', Georgia, serif;
    --font-size-xs:  12px;
    --font-size-sm:  14px;
    --font-size-md:  16px;
    --font-size-lg:  18px;
    --font-size-xl:  22px;
    --font-size-2xl: 28px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Borders */
    --radius-sm:  5px;
    --radius-md:  5px;
    --radius-lg:  5px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 4px rgba(0,0,0,.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,.12);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.16);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Layout */
    --app-max-width:    480px;
    --nav-height:       60px;
    --header-height:    64px;
    --safe-bottom:      env(safe-area-inset-bottom, 0px);

    /* Gospel card font scale (user-controlled via JS) */
    --gospel-font-scale: 1;

    /* ── Liquid Glass (iOS 26) ──────────────────────────────────────────── */
    --glass-bg:            rgba(255, 255, 255, 0.65);
    --glass-bg-strong:     rgba(255, 255, 255, 0.82);
    --glass-bg-subtle:     rgba(255, 255, 255, 0.42);
    --glass-bg-header:     rgba(255, 255, 255, 0.78);
    --glass-border:        rgba(255, 255, 255, 0.52);
    --glass-border-dim:    rgba(255, 255, 255, 0.28);
    --glass-highlight:     inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.10),
                           0 2px 8px  rgba(0, 0, 0, 0.06),
                           inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --glass-shadow-heavy:  0 16px 48px rgba(0, 0, 0, 0.15),
                           0 4px 16px  rgba(0, 0, 0, 0.08),
                           inset 0 1px 0 rgba(255, 255, 255, 0.80);
    --glass-blur:          blur(24px) saturate(180%);
    --glass-blur-heavy:    blur(40px) saturate(200%);
    --glass-blur-light:    blur(12px) saturate(160%);

    /* Aurora background palette */
    --aurora-base:   #ede8f0;
    --aurora-1:      rgba(88,  28, 140, 0.28);   /* deep violet — Lent */
    --aurora-2:      rgba(10,  90, 200, 0.22);   /* royal blue */
    --aurora-3:      rgba(200, 155, 15, 0.20);   /* liturgical gold */
    --aurora-4:      rgba(160, 20,  70, 0.14);   /* rose/berry */
}