/* Explain: Theme design tokens (colors, fonts, shadows) derived from brand logo. */
:root {
    /* Palette derived from the brand logo (deep emerald green + white) */
    --primary-color: #0E8A4C;
    --primary-hover: #0A7340;
    --primary-dark: #06502D;
    --primary-soft: #E9F6EE;
    --secondary-color: #042C1B;
    --accent-color: #6AD79A;
    --accent-hover: #86E6B1;
    --accent-soft: #ECFAF2;
    --accent-ink: #04502C;
    --on-accent: #04291A;

    --navy: #042C1B;
    --navy-2: #0A3D28;
    --navy-3: #10503A;
    --background-color: #F5F9F6;
    --surface-color: #ffffff;
    --surface-2: #EFF6F1;
    --text-color: #0D2A1D;
    --text-muted: #4E6459;
    --text-soft: #5D7367;
    --text-on-dark: #F4FBF7;
    --text-muted-on-dark: #B7D2C4;
    --border-color: #DBE8E0;
    --border-strong: #BDD3C6;
    --border-dark: #1D5137;
    --light-tint: rgba(255, 255, 255, 0.06);
    --light-tint-hover: rgba(255, 255, 255, 0.11);

    --danger-color: #b63131;
    --danger-soft: #fff4f4;
    --whatsapp-color: #0B6E3C;
    --whatsapp-dark: #085430;
    --focus-ring: rgba(14, 138, 76, 0.22);
    --hero-background: radial-gradient(ellipse at 16% 30%, #0E5B37 0%, transparent 58%), linear-gradient(150deg, #042C1B 0%, #06281A 52%, #0A3B25 100%);
    --image-shade: linear-gradient(180deg, transparent 62%, rgba(4, 44, 27, 0.18));

    --font-heading: 'Cairo', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Cairo', 'Segoe UI', system-ui, sans-serif;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --shadow-xs: 0 2px 8px rgba(4, 44, 27, 0.03);
    --shadow-soft: 0 12px 32px rgba(4, 44, 27, 0.06);
    --shadow-card: 0 10px 28px rgba(4, 44, 27, 0.07);
    --shadow-lift: 0 14px 36px rgba(4, 44, 27, 0.12);
    --shadow-photo: 0 28px 64px rgba(2, 22, 13, 0.28);

    --header-height: 78px;
    --mobile-cta-height: 82px;
    --ease-out: cubic-bezier(0.2, 0.65, 0.3, 1);
}