/* ============================================================
   ZAPHIRO HOME HEALTH — Design System Variables
   Design: Precision Medical Dark
   Colors extracted from logo: navy #0b2546, blue #1e3a8a, cyan #00b4d8
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
    /* ── Brand Colors (from logo) ── */
    --navy-950:  #060f1e;
    --navy-900:  #0b2546;
    --navy-800:  #0f3060;
    --navy-700:  #1a3f7a;
    --navy-600:  #1e4d9b;

    --cyan-500:  #00b4d8;
    --cyan-400:  #22d3ee;
    --cyan-300:  #67e8f9;
    --cyan-glow: rgba(0, 180, 216, 0.18);

    --blue-700:  #1e3a8a;
    --blue-600:  #1d4ed8;
    --blue-500:  #3b82f6;

    /* ── Semantic Aliases ── */
    --primary-color:  var(--navy-900);
    --primary-dark:   var(--navy-950);
    --primary-light:  var(--navy-700);
    --secondary-color: var(--cyan-500);
    --accent-color:   var(--cyan-500);

    /* ── Text ── */
    --text-primary:   #f0f4ff;
    --text-secondary: #000000;
    --text-muted:     #000000;
    --text-dark:      #0f172a;
    --text-on-light:  #1e293b;

    /* ── Backgrounds ── */
    --bg-white:   #ffffff;
    --bg-light:   #f0f6ff;
    --bg-gray:    #e8f0fe;
    --bg-dark:    var(--navy-900);
    --bg-darker:  var(--navy-950);
    --bg-card:    #ffffff;
    --bg-card-dark: rgba(255,255,255,0.04);

    /* ── Borders ── */
    --border-color: #dde8f5;
    --border-light: #eef3fb;
    --border-dark:  rgba(255,255,255,0.10);

    /* ── Typography ── */
    --font-heading: 'Syne', system-ui, sans-serif;
    --font-primary: 'DM Sans', system-ui, sans-serif;

    --font-size-xs:   0.75rem;
    --font-size-sm:   1rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;
    --font-size-6xl:  3.75rem;

    /* ── Spacing ── */
    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  1.5rem;
    --spacing-lg:  2rem;
    --spacing-xl:  3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* ── Layout ── */
    --container-width:   1240px;
    --container-padding: 1.5rem;

    /* ── Border Radius ── */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.875rem;
    --radius-xl:   1.25rem;
    --radius-2xl:  1.75rem;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm:  0 1px 3px rgba(11,37,70,0.08);
    --shadow-md:  0 4px 16px rgba(11,37,70,0.12);
    --shadow-lg:  0 10px 32px rgba(11,37,70,0.16);
    --shadow-xl:  0 20px 48px rgba(11,37,70,0.20);
    --shadow-cyan: 0 0 24px rgba(0,180,216,0.25);

    /* ── Transitions ── */
    --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
    --transition-base: 280ms cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 480ms cubic-bezier(0.4,0,0.2,1);

    /* ── Z-index ── */
    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-fixed:          1030;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;
}