/*
======================================================
King David Prayer Experience
Design System
Foundation Release 7.0
======================================================
*/

:root {

    /* ======================================================
       COLORS
    ====================================================== */

    --color-background: #F7F4EE;
    --color-surface: rgba(255,255,255,.75);

    --color-primary: #355C4A;
    --color-secondary: #A67C52;

    --color-heading: #2F3B33;
    --color-text: #4B4B4B;

    --color-button: #5E7D61;
    --color-button-hover: #48634B;

    --color-white: #FFFFFF;

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Inter", sans-serif;

    /* ======================================================
       SPACING
    ====================================================== */

    --spacing-xs: .5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;

    /* ======================================================
       BORDER RADIUS
    ====================================================== */

    --radius: 14px;

    /* ======================================================
       SHADOWS
    ====================================================== */

    --shadow:
        0 10px 35px rgba(0,0,0,.12);

    /* ======================================================
       ANIMATION
    ====================================================== */

    --transition:
        all .35s ease;

    /* ======================================================
       ATMOSPHERE ENGINE
    ====================================================== */

    /* Active overlay (changed by JavaScript) */

    --current-overlay:
        rgba(24, 39, 74, .58);

    /* Journey overlays */

    --overlay-welcome:
        rgba(24, 39, 74, .58);

    --overlay-step1:
        rgba(30, 48, 84, .54);

    --overlay-step2:
        rgba(42, 67, 90, .48);

    --overlay-step3:
        rgba(86, 101, 96, .38);

    --overlay-step4:
        rgba(140, 126, 98, .30);

    --overlay-step5:
        rgba(175, 154, 112, .24);

}