/* ==========================================================================
   BYO-Me Design Tokens
   Centralized CSS custom properties for the entire design system.
   ========================================================================== */

:root {
    /* ======================================================================
       COLORS — Gray Scale
       ====================================================================== */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ======================================================================
       COLORS — Patient Red (default theme)
       ====================================================================== */
    --red-50:  #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;

    /* ======================================================================
       COLORS — Doctor Blue
       ====================================================================== */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a5f;

    /* ======================================================================
       COLORS — Admin Purple
       ====================================================================== */
    --purple-50:  #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7c3aed;
    --purple-800: #6d28d9;
    --purple-900: #4c1d95;

    /* ======================================================================
       COLORS — Semantic
       ====================================================================== */
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;

    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    --info-50:  #eff6ff;
    --info-100: #dbeafe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;

    /* ======================================================================
       TYPOGRAPHY
       ====================================================================== */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace;

    /* Type Scale (modular, 1.25 ratio) */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */

    /* Font Weights */
    --font-light:    300;
    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* Line Heights */
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* Letter Spacing */
    --tracking-tight:  -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;

    /* ======================================================================
       SPACING (0.125rem base, 0 → 20)
       ====================================================================== */
    --space-0:   0;
    --space-px:  1px;
    --space-0-5: 0.125rem;  /* 2px */
    --space-1:   0.25rem;   /* 4px */
    --space-1-5: 0.375rem;  /* 6px */
    --space-2:   0.5rem;    /* 8px */
    --space-2-5: 0.625rem;  /* 10px */
    --space-3:   0.75rem;   /* 12px */
    --space-3-5: 0.875rem;  /* 14px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-7:   1.75rem;   /* 28px */
    --space-8:   2rem;      /* 32px */
    --space-9:   2.25rem;   /* 36px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-14:  3.5rem;    /* 56px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */

    /* ======================================================================
       SHADOWS
       ====================================================================== */
    --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Colored Shadows (role-based) */
    --shadow-red:    0 4px 14px 0 rgba(139, 0, 0, 0.15);
    --shadow-blue:   0 4px 14px 0 rgba(0, 86, 179, 0.15);
    --shadow-purple:  0 4px 14px 0 rgba(111, 66, 193, 0.15);

    /* ======================================================================
       BORDER RADIUS
       ====================================================================== */
    --radius-sm:   0.375rem;  /* 6px */
    --radius-md:   0.5rem;    /* 8px */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.25rem;   /* 20px */
    --radius-3xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ======================================================================
       TRANSITIONS
       ====================================================================== */
    --duration-fast:   150ms;
    --duration-base:   200ms;
    --duration-slow:   300ms;
    --duration-slower:  500ms;

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast:  all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:  all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:  all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ======================================================================
       Z-INDEX SCALE
       ====================================================================== */
    --z-dropdown:  1000;
    --z-sticky:    1020;
    --z-fixed:     1030;
    --z-overlay:   1040;
    --z-modal:     1050;
    --z-popover:   1060;
    --z-tooltip:   1070;
}