/* ========================================
   Carenox Design System — CSS Variables
   Single source of truth for all design tokens
   ======================================== */

:root {
    /* ---- Colors: Background ---- */
    --bg-primary: #f7f4ed;
    --bg-secondary: #edf1eb;
    --bg-card: #fcfaf6;
    --bg-card-hover: #ffffff;
    --bg-elevated: #e4ebe6;

    /* ---- Colors: Text ---- */
    --text-primary: #20352f;
    --text-secondary: #566861;
    --text-muted: #718078;

    /* ---- Colors: Brand / Accent ---- */
    --teal-50: #e6f5f2;
    --teal-100: #ccebe5;
    --teal-200: #a3d9cf;
    --teal-300: #79b9ab;
    --teal-400: #79b9ab;
    --teal-500: #4f9485;
    --teal-600: #397c70;
    --teal-700: #2d655b;
    --teal-800: #1f4f47;
    --accent: #397c70;
    --accent-glow: rgba(86, 139, 126, 0.11);
    --accent-glow-strong: rgba(86, 139, 126, 0.18);

    /* ---- Colors: Neutral (for blog and content pages) ---- */
    --gray-50: #f8faf9;
    --gray-100: #f0f4f2;
    --gray-200: #dfe6e2;
    --gray-300: #c5d0ca;
    --gray-400: #8b9791;
    --gray-500: #718078;
    --gray-600: #566861;
    --gray-700: #3d4f48;
    --gray-800: #2a3b35;
    --gray-900: #20352f;
    --white: #ffffff;

    /* ---- Colors: Borders ---- */
    --border: rgba(43, 75, 66, 0.11);
    --border-light: rgba(43, 75, 66, 0.18);

    /* ---- Typography ---- */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;

    /* ---- Spacing & Layout ---- */
    --container-max: 1240px;
    --container-padding: clamp(20px, 4vw, 40px);

    /* ---- Border Radius ---- */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 38px;
    --radius-full: 999px;

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(46, 66, 59, 0.04);
    --shadow-sm: 0 1px 2px rgba(46, 66, 59, 0.05);
    --shadow-md: 0 12px 30px rgba(46, 66, 59, 0.07);
    --shadow-lg: 0 24px 60px rgba(46, 66, 59, 0.09);
    --shadow-glow: 0 18px 44px rgba(57, 124, 112, 0.12);

    /* ---- Transitions ---- */
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Z-index Scale ---- */
    --z-nav: 1000;
    --z-dropdown: 900;
    --z-sticky: 90;
    --z-skip-link: 2000;
}