/**
 * Shalom Hospital Theme — Design Tokens / CSS Custom Properties
 * FILE: variables.css
 */

:root {

  /* ============================================================
     BRAND COLORS
  ============================================================ */
  --sh-primary:   #0F766E;
  --sh-secondary: #14B8A6;
  --sh-accent:    #F59E0B;
  --sh-bg:        #F8FAFC;
  --sh-card:      #FFFFFF;
  --sh-text:      #111827;
  --sh-muted:     #6B7280;
  --sh-error:     #EF4444;
  --sh-success:   #22C55E;
  --sh-dark:      #0A0F1E;
  --sh-white:     #FFFFFF;

  /* ============================================================
     PRIMARY COLOR SCALE  (#0F766E base)
  ============================================================ */
  --sh-primary-50:  #F0FDFA;
  --sh-primary-100: #CCFBF1;
  --sh-primary-200: #99F6E4;
  --sh-primary-300: #5EEAD4;
  --sh-primary-400: #2DD4BF;
  --sh-primary-500: #14B8A6;
  --sh-primary-600: #0D9488;
  --sh-primary-700: #0F766E;
  --sh-primary-800: #115E59;
  --sh-primary-900: #134E4A;

  /* ============================================================
     SECONDARY / ACCENT SCALES
  ============================================================ */
  --sh-accent-50:  #FFFBEB;
  --sh-accent-100: #FEF3C7;
  --sh-accent-200: #FDE68A;
  --sh-accent-300: #FCD34D;
  --sh-accent-400: #FBBF24;
  --sh-accent-500: #F59E0B;
  --sh-accent-600: #D97706;
  --sh-accent-700: #B45309;

  --sh-error-50:   #FEF2F2;
  --sh-error-100:  #FEE2E2;
  --sh-error-500:  #EF4444;
  --sh-error-700:  #B91C1C;

  --sh-success-50:  #F0FDF4;
  --sh-success-100: #DCFCE7;
  --sh-success-500: #22C55E;
  --sh-success-700: #15803D;

  /* ============================================================
     NEUTRAL / GRAY SCALE
  ============================================================ */
  --sh-gray-50:  #F9FAFB;
  --sh-gray-100: #F3F4F6;
  --sh-gray-200: #E5E7EB;
  --sh-gray-300: #D1D5DB;
  --sh-gray-400: #9CA3AF;
  --sh-gray-500: #6B7280;
  --sh-gray-600: #4B5563;
  --sh-gray-700: #374151;
  --sh-gray-800: #1F2937;
  --sh-gray-900: #111827;

  /* ============================================================
     TYPOGRAPHY
  ============================================================ */
  --sh-font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --sh-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --sh-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Font Sizes */
  --sh-text-xs:   0.75rem;    /* 12px */
  --sh-text-sm:   0.875rem;   /* 14px */
  --sh-text-base: 1rem;       /* 16px */
  --sh-text-md:   1.0625rem;  /* 17px */
  --sh-text-lg:   1.125rem;   /* 18px */
  --sh-text-xl:   1.25rem;    /* 20px */
  --sh-text-2xl:  1.5rem;     /* 24px */
  --sh-text-3xl:  1.875rem;   /* 30px */
  --sh-text-4xl:  2.25rem;    /* 36px */
  --sh-text-5xl:  3rem;       /* 48px */

  /* Line Heights */
  --sh-leading-none:    1;
  --sh-leading-tight:   1.25;
  --sh-leading-snug:    1.375;
  --sh-leading-normal:  1.5;
  --sh-leading-relaxed: 1.75;
  --sh-leading-loose:   2;

  /* Font Weights */
  --sh-font-light:    300;
  --sh-font-normal:   400;
  --sh-font-medium:   500;
  --sh-font-semibold: 600;
  --sh-font-bold:     700;
  --sh-font-extrabold:800;
  --sh-font-black:    900;

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

  /* ============================================================
     SPACING SCALE  (4px base)
  ============================================================ */
  --sh-space-1:  0.25rem;   /* 4px  */
  --sh-space-2:  0.5rem;    /* 8px  */
  --sh-space-3:  0.75rem;   /* 12px */
  --sh-space-4:  1rem;      /* 16px */
  --sh-space-5:  1.25rem;   /* 20px */
  --sh-space-6:  1.5rem;    /* 24px */
  --sh-space-7:  1.75rem;   /* 28px */
  --sh-space-8:  2rem;      /* 32px */
  --sh-space-10: 2.5rem;    /* 40px */
  --sh-space-12: 3rem;      /* 48px */
  --sh-space-14: 3.5rem;    /* 56px */
  --sh-space-16: 4rem;      /* 64px */
  --sh-space-20: 5rem;      /* 80px */
  --sh-space-24: 6rem;      /* 96px */
  --sh-space-28: 7rem;      /* 112px */
  --sh-space-32: 8rem;      /* 128px */

  /* Named aliases */
  --sh-space-xs:  var(--sh-space-2);   /* 8px  */
  --sh-space-sm:  var(--sh-space-3);   /* 12px */
  --sh-space-md:  var(--sh-space-4);   /* 16px */
  --sh-space-lg:  var(--sh-space-6);   /* 24px */
  --sh-space-xl:  var(--sh-space-8);   /* 32px */
  --sh-space-2xl: var(--sh-space-12);  /* 48px */
  --sh-space-3xl: var(--sh-space-16);  /* 64px */
  --sh-space-4xl: var(--sh-space-24);  /* 96px */

  /* ============================================================
     BORDER RADIUS
  ============================================================ */
  --sh-radius-none: 0;
  --sh-radius-sm:   8px;
  --sh-radius-md:   12px;
  --sh-radius-lg:   16px;
  --sh-radius-xl:   24px;
  --sh-radius-2xl:  32px;
  --sh-radius-full: 9999px;

  /* ============================================================
     BOX SHADOWS
  ============================================================ */
  --sh-shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sh-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --sh-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --sh-shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --sh-shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --sh-shadow-hover: 0 25px 50px -12px rgba(15, 118, 110, 0.25);
  --sh-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --sh-shadow-none:  none;

  /* ============================================================
     TRANSITIONS
  ============================================================ */
  --sh-transition-fast: 150ms ease;
  --sh-transition-base: 250ms ease;
  --sh-transition-slow: 400ms ease;

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

  /* ============================================================
     Z-INDEX LAYERS
  ============================================================ */
  --sh-z-base:    1;
  --sh-z-raised:  10;
  --sh-z-overlay: 50;
  --sh-z-header:  100;
  --sh-z-modal:   200;
  --sh-z-toast:   300;
  --sh-z-tooltip: 400;

  /* ============================================================
     CONTAINER WIDTHS
  ============================================================ */
  --sh-container:        1200px;
  --sh-container-wide:   1440px;
  --sh-container-narrow: 800px;

  /* ============================================================
     GRADIENTS
  ============================================================ */
  --sh-gradient-primary:  linear-gradient(135deg, var(--sh-primary-700) 0%, var(--sh-primary-500) 100%);
  --sh-gradient-hero:     linear-gradient(135deg, #0A0F1E 0%, #0F766E 50%, #14B8A6 100%);
  --sh-gradient-accent:   linear-gradient(135deg, var(--sh-accent-500) 0%, var(--sh-accent-600) 100%);
  --sh-gradient-light:    linear-gradient(135deg, var(--sh-primary-50) 0%, #EFF6FF 100%);
  --sh-gradient-dark:     linear-gradient(135deg, #0A0F1E 0%, #1a2744 100%);
  --sh-gradient-text:     linear-gradient(135deg, var(--sh-primary-700) 0%, var(--sh-secondary) 100%);

  /* ============================================================
     COMPONENT-SPECIFIC TOKENS
  ============================================================ */

  /* Card */
  --sh-card-radius:   var(--sh-radius-xl);
  --sh-card-shadow:   var(--sh-shadow-md);
  --sh-card-padding:  var(--sh-space-6);
  --sh-card-bg:       var(--sh-card);

  /* Button */
  --sh-btn-radius:       var(--sh-radius-full);
  --sh-btn-padding-y:    0.875rem;
  --sh-btn-padding-x:    2rem;
  --sh-btn-font-size:    0.9375rem;
  --sh-btn-font-weight:  var(--sh-font-semibold);
  --sh-btn-transition:   all var(--sh-transition-base);

  /* Input */
  --sh-input-radius:      var(--sh-radius-md);
  --sh-input-padding-y:   0.75rem;
  --sh-input-padding-x:   1rem;
  --sh-input-border:      1.5px solid var(--sh-gray-200);
  --sh-input-border-focus: 1.5px solid var(--sh-primary);
  --sh-input-font-size:   0.9375rem;

  /* Header */
  --sh-header-height: 5rem;
  --sh-header-height-mobile: 4rem;

  /* Section */
  --sh-section-padding:    5rem;
  --sh-section-padding-sm: 3rem;
  --sh-section-padding-lg: 8rem;
}