/* ==========================================================================
   CUBA HEALTH ASSIST — GLOBAL DESIGN TOKENS
   ==========================================================================
   Brand color note: Primary teal is the locked Cuba Health Assist brand
   #0E7C7B (NOT Tailwind default #0d9488). The 50→950 ramp is derived from
   the brand base so static export matches the approved live preview.
   ========================================================================== */

:root {
    /* --- Brand Color Palette (Cuba Health Teal) --- */
    --color-teal-50:  #E8F4F4;   /* Brand soft */
    --color-teal-100: #CCEAEA;
    --color-teal-200: #9FD7D6;
    --color-teal-300: #6BC1C0;
    --color-teal-400: #2AA8A6;   /* Brand glow */
    --color-teal-500: #1A938F;
    --color-teal-600: #0E7C7B;   /* Brand primary */
    --color-teal-700: #0B6463;
    --color-teal-800: #084D4D;
    --color-teal-900: #053838;
    --color-teal-950: #02201F;

    /* --- Neutral Grays --- */
    --color-gray-50:  #F8FAFB;   /* Muted surface */
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E2E8F0;   /* Border */
    --color-gray-500: #64748B;   /* Muted text */
    --color-gray-700: #374151;
    --color-gray-900: #1E293B;   /* Foreground */

    --color-success: #16A34A;
    --color-white:   #FFFFFF;

    /* --- Typography Scale (Inter) --- */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-base:  1rem;
    --fs-lg:    1.125rem;
    --fs-xl:    1.25rem;
    --fs-2xl:   1.5rem;
    --fs-3xl:   1.875rem;
    --fs-4xl:   2.25rem;
    --fs-5xl:   3rem;

    /* --- Border Radii --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;    /* Default card radius (8px base x2) */
    --radius-full: 9999px;

    /* --- Soft Shadows --- */
    --shadow-sm: 0 1px 2px 0 rgba(14, 124, 123, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(14, 124, 123, 0.07), 0 2px 4px -1px rgba(14, 124, 123, 0.04);
    --shadow-lg: 0 10px 30px -10px rgba(14, 124, 123, 0.18), 0 4px 6px -2px rgba(2, 32, 31, 0.04);

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}