/* Explain: Theme tokens defining brand identity, including colors, fonts, and shadows. */
:root {
    /* Base neutrals */
    --warm-white: #FDFCFA;
    --soft-ivory: #F7F3EC;
    --light-grey: #ECEDF1;

    /* Headings — deep slate blue */
    --slate: #22354E;
    --slate-soft: #3C5372;
    --slate-muted: #5C6E88;

    /* Accents */
    --pink: #FF2D8B;
    --purple: #7B3FE4;
    --teal: #0E9AA7;
    --green: #22A06B;
    --yellow: #F2B705;

    --pink-ink: #D81E74;
    --purple-ink: #6A2FD0;
    --teal-ink: #0B7C87;
    --green-ink: #1B8357;
    --yellow-ink: #B98600;

    /* Semantic tokens */
    --primary-color: var(--pink);
    --primary-hover: var(--pink-ink);
    --secondary-color: var(--purple);
    --accent-color: var(--teal);
    --background-color: #FDFCFA;
    --surface-color: #F7F3EC;
    --surface-alt: #ECEDF1;
    --footer-bg: #F2EFE9;
    --text-color: #3C5372;
    --text-muted: #5C6E88;
    --heading-color: #22354E;
    --border-color: rgba(34, 53, 78, 0.12);
    --glass-bg: rgba(253, 252, 250, 0.78);
    --glass-border: rgba(34, 53, 78, 0.12);
    --nav-bg: rgba(253, 252, 250, 0.88);
    --field-bg: rgba(255, 255, 255, 0.9);
    --shadow-soft: 0 22px 60px rgba(34, 53, 78, 0.10);
    --shadow-button: 0 14px 30px rgba(255, 45, 139, 0.26);
    --font-heading: 'Alike', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
}