/* ==========================================================
   variables.css — Design tokens for the care service
   Central place for all colors, fonts, spacing and
   breakpoints. All other CSS files reference exclusively
   these custom properties.
   ========================================================== */

:root {
    /* --------------------------------------------------------
       Colors — Primary (teal)
       -------------------------------------------------------- */
    --color-primary: #2A9D8F;
    --color-primary-light: #E6F5F3;
    --color-primary-dark: #1F7A6F;

    /* --------------------------------------------------------
       Colors — Neutral
       -------------------------------------------------------- */
    --color-white: #FFFFFF;
    --color-offwhite: #F9FAFB;
    --color-text: #1F2937;
    --color-text-secondary: #6B7280;
    --color-border: #E5E7EB;

    /* --------------------------------------------------------
       Colors — Accent
       -------------------------------------------------------- */
    --color-accent: #E76F51;

    /* --------------------------------------------------------
       Colors — Feedback
       -------------------------------------------------------- */
    --color-error: #DC2626;
    --color-error-light: #FEF2F2;
    --color-success: #16A34A;
    --color-success-light: #F0FDF4;
    --color-warning: #92400E;
    --color-warning-light: #FEF3C7;

    /* --------------------------------------------------------
       Colors — Overlay
       -------------------------------------------------------- */
    --color-overlay: rgba(0, 0, 0, 0.3);
    --color-overlay-dark: rgba(0, 0, 0, 0.5);

    /* --------------------------------------------------------
       Typography — Font families
       -------------------------------------------------------- */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

    /* --------------------------------------------------------
       Typography — Font sizes (mobile first)
       Desktop overrides in breakpoints below.
       -------------------------------------------------------- */
    --font-size-h1: 1.75rem; /* 28px */
    --font-size-h2: 1.5rem; /* 24px */
    --font-size-h3: 1.25rem; /* 20px */
    --font-size-body: 1rem; /* 16px */
    --font-size-small: 0.875rem; /* 14px */

    /* --------------------------------------------------------
       Typography — Font weights
       -------------------------------------------------------- */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;

    /* --------------------------------------------------------
       Typography — Line heights
       -------------------------------------------------------- */
    --line-height-heading: 1.2;
    --line-height-body: 1.6;

    /* --------------------------------------------------------
       Typography — Maximum text width
       -------------------------------------------------------- */
    --text-max-width: 45rem; /* ~720px */

    /* --------------------------------------------------------
       Layout — Container
       -------------------------------------------------------- */
    --container-max-width: 75rem; /* 1200px */
    --container-padding: 1.5rem; /* 24px Mobile */

    /* --------------------------------------------------------
       Layout — Section spacing
       -------------------------------------------------------- */
    --section-gap: 3rem; /* 48px Mobile */
    --section-inner-gap: 1.5rem; /* 24px Mobile */

    /* --------------------------------------------------------
       Layout — Component spacing
       -------------------------------------------------------- */
    --space-xs: 0.25rem; /* 4px  */
    --space-sm: 0.5rem; /* 8px  */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 5rem; /* 80px */

    /* --------------------------------------------------------
       Cards & Components
       -------------------------------------------------------- */
    --card-radius: 0.75rem; /* 12px */
    --card-padding: 1.5rem; /* 24px */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* --------------------------------------------------------
       Buttons
       -------------------------------------------------------- */
    --button-radius: 0.5rem; /* 8px */
    --button-padding: 0.875rem 1.75rem; /* 14px 28px */
    --button-min-height: 3rem; /* 48px Touch-Target */

    /* --------------------------------------------------------
       Form fields
       -------------------------------------------------------- */
    --input-radius: 0.5rem; /* 8px */
    --input-padding: 0.875rem 1rem; /* 14px 16px */
    --input-border-width: 1px;

    /* --------------------------------------------------------
       Transitions
       -------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* --------------------------------------------------------
       Overlay colors (for dark backgrounds)
       -------------------------------------------------------- */
    --color-white-soft: rgba(255, 255, 255, 0.9);
    --color-white-muted: rgba(255, 255, 255, 0.95);
    --color-white-faint: rgba(255, 255, 255, 0.15);

    /* --------------------------------------------------------
       Z-index scale
       -------------------------------------------------------- */
    --z-dropdown: 100;
    --z-navbar: 200;
    --z-overlay: 300;
    --z-modal: 400;
}

/* ==========================================================
   Desktop overrides (from 768px)
   ========================================================== */
@media (min-width: 48rem) {
    :root {
        --font-size-h1: 2.5rem; /* 40px */
        --font-size-h2: 2rem; /* 32px */
        --font-size-h3: 1.5rem; /* 24px */
        --font-size-body: 1.125rem; /* 18px */

        --container-padding: 3rem; /* 48px */

        --section-gap: 5rem; /* 80px */
        --section-inner-gap: 2.5rem; /* 40px */
    }
}