﻿/*
 * GLEAM (G by Shahed) â€” Brand Foundation CSS
 * â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
 * Fonts  : Cerebri (UI) Â· Formula (serif) â€” local TTF/OTF
 * Palette: #F1ECE6  #D7CEC5  #F2CFCB  #6B091C
 * â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* â”€â”€ Local fonts â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@font-face {
    font-family: 'Cerebri';
    src: url('../fonts/cerebri/CerebriSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cerebri';
    src: url('../fonts/cerebri/CerebriSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Formula';
    src: url('../fonts/formula/FormulaCondensed-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Formula';
    src: url('../fonts/formula/FormulaCondensed-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* â”€â”€ Tokens â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
:root {
    --g-cream:     #F1ECE6;
    --g-warm-gray: #D7CEC5;
    --g-blush:     #F2CFCB;
    --g-wine:      #6B091C;
    --g-ink:       #0b0809;

    --g-blush-55:  rgba(242, 207, 203, 0.55);
    --g-blush-30:  rgba(242, 207, 203, 0.30);
    --g-blush-15:  rgba(242, 207, 203, 0.15);
    --g-blush-08:  rgba(242, 207, 203, 0.08);
    --g-cream-70:  rgba(241, 236, 230, 0.70);
    --g-cream-40:  rgba(241, 236, 230, 0.40);
    --g-cream-20:  rgba(241, 236, 230, 0.20);
    --g-cream-08:  rgba(241, 236, 230, 0.08);
    --g-wine-60:   rgba(107,  9,  28, 0.60);
    --g-wine-40:   rgba(107,  9,  28, 0.40);
    --g-wine-20:   rgba(107,  9,  28, 0.20);
    --g-wine-10:   rgba(107,  9,  28, 0.10);

    --g-font-ui:    'Cerebri', 'DM Sans',            -apple-system, sans-serif;
    --g-font-serif: 'Formula', 'Cormorant Garamond', Georgia, serif;

    --g-ease:      cubic-bezier(0.76, 0, 0.18, 1);
    --g-ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
    --g-dur:       0.95s;
    --g-dur-fast:  0.30s;
}

/* â”€â”€ Keyframes â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@keyframes g-fadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes g-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes g-ring-enter {
    from { opacity: 0; transform: scale(0.72); }
    to   { opacity: 1; transform: scale(1);    }
}
@keyframes g-line-grow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
@keyframes g-ring-breathe {
    0%, 100% {
        box-shadow:
            0 0 0 14px rgba(242, 207, 203, 0.08),
            0 20px 60px rgba(0, 0, 0, 0.62),
            inset 0 1px 0 rgba(241, 236, 230, 0.32);
    }
    50% {
        box-shadow:
            0 0 0 22px rgba(242, 207, 203, 0.14),
            0 30px 88px rgba(0, 0, 0, 0.50),
            inset 0 1px 0 rgba(241, 236, 230, 0.50);
    }
}

/* â”€â”€ Utilities â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.g-text-cream     { color: var(--g-cream)     !important; }
.g-text-blush     { color: var(--g-blush)     !important; }
.g-text-warm-gray { color: var(--g-warm-gray) !important; }
.g-bg-cream       { background: var(--g-cream)     !important; }
.g-bg-blush       { background: var(--g-blush)     !important; }
.g-bg-warm-gray   { background: var(--g-warm-gray) !important; }
.g-font-ui        { font-family: var(--g-font-ui)    !important; }
.g-font-serif     { font-family: var(--g-font-serif) !important; }

.g-page, .g-page * { box-sizing: border-box; }
.g-page { margin: 0; padding: 0; font-family: var(--g-font-ui); }
