/* Explain: Theming tokens for colors, fonts, and spacing. */
:root {
    /* Core palette — fresh blue & turquoise */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #06b6d4;
    --accent-color: #f59e0b;
    --heart-color: #e11d48;

    /* Gradients */
    --grad-main: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    --grad-main-soft: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
    --grad-deep: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    --grad-surface: linear-gradient(135deg, #f0f7ff 0%, #ecfeff 100%);
    --grad-chip: linear-gradient(135deg, #dbeafe 0%, #cffafe 100%);

    /* Surfaces */
    --background-color: #eef5ff;
    --surface-color: #f8fbff;
    --surface-hover: #e3f0ff;
    --surface-alt: #d5e8ff;
    --overlay-color: rgba(15, 30, 60, 0.6);

    /* Text */
    --text-color: #0f2340;
    --text-muted: #4a5f7a;
    --border-color: #c3dcff;

    --success-color: #10b981;
    --font-heading: 'Rubik', sans-serif;
    --font-body: 'Rubik', sans-serif;
    --radius-lg: 1.6rem;
    --radius-md: 1.1rem;
    --radius-sm: 0.7rem;
    --shadow-soft: 0 16px 40px -16px rgba(37, 99, 235, 0.45);
    --shadow-card: 0 10px 30px -14px rgba(13, 60, 130, 0.22);
    --shadow-glow: 0 14px 36px -12px rgba(6, 182, 212, 0.55);
}