/* ============================================================
   LocumMY — Design System Variables
   Colors extracted from LocumMY logo (teal tooth + stethoscope)
   ============================================================ */

:root {
  /* --- Teal Palette (Brand) --- */
  --teal-950: #071E24;
  --teal-900: #0D3540;
  --teal-800: #124F5E;
  --teal-700: #186978;
  --teal-600: #1E8494;
  --teal-500: #2190A0;  /* Primary */
  --teal-400: #3AAFC0;
  --teal-300: #5DC8D6;
  --teal-200: #96DDE6;
  --teal-100: #C8EEF3;
  --teal-50:  #EBF8FA;

  /* --- Semantic Colors --- */
  --color-primary:       #1E8494;
  --color-primary-dark:  #124F5E;
  --color-primary-deep:  #0D3540;
  --color-primary-light: #3AAFC0;
  --color-primary-pale:  #EBF8FA;

  /* Dental sector accent */
  --color-dental:        #2190A0;
  --color-dental-bg:     #D4F0F5;

  /* Medical sector accent */
  --color-medical:       #186978;
  --color-medical-bg:    #C5E8EE;

  /* --- Backgrounds --- */
  --color-bg:            #F4FCFD;
  --color-bg-soft:       #EBF8FA;
  --color-surface:       #FFFFFF;
  --color-surface-soft:  #F8FEFF;

  /* --- Borders --- */
  --color-border:        #C8EEF3;
  --color-border-soft:   #E2F5F8;

  /* --- Text --- */
  --color-text:          #0A2830;
  --color-text-soft:     #2D5E6A;
  --color-text-mute:     #6A9AA6;
  --color-text-subtle:   #9BBEC6;

  /* --- Status --- */
  --color-success:       #1E7A50;
  --color-success-bg:    #D4F0E3;
  --color-warning:       #B87000;
  --color-warning-bg:    #FDF3DC;
  --color-error:         #B83030;
  --color-error-bg:      #FDEAEA;
  --color-info:          #1E6E9E;
  --color-info-bg:       #D4E8F8;

  /* --- Typography --- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  28px;
  --font-size-3xl:  36px;
  --font-size-4xl:  48px;
  --line-height:    1.6;

  /* --- Spacing --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* --- Border Radius --- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-3xl:  40px;
  --r-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 3px rgba(10, 40, 48, 0.06);
  --shadow-sm: 0 2px 8px rgba(30, 132, 148, 0.10);
  --shadow-md: 0 4px 20px rgba(30, 132, 148, 0.14);
  --shadow-lg: 0 8px 36px rgba(30, 132, 148, 0.18);
  --shadow-xl: 0 16px 56px rgba(30, 132, 148, 0.22);

  /* --- Transitions --- */
  --ease-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Layout --- */
  --max-app:     480px;
  --max-content: 1200px;
  --nav-height:  64px;
  --bottom-nav:  72px;

  /* --- Z-Index --- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --color-bg:            #071E24;
  --color-bg-soft:       #0A2830;
  --color-surface:       #0D3340;
  --color-surface-soft:  #0F3C4A;

  --color-border:        #1A4E5C;
  --color-border-soft:   #163D4A;

  --color-text:          #E4F6F9;
  --color-text-soft:     #7EC5D0;
  --color-text-mute:     #3E8090;
  --color-text-subtle:   #2A6070;

  --color-primary:       #3AAFC0;
  --color-primary-dark:  #2190A0;
  --color-primary-pale:  #0A2830;
  --color-primary-light: #5DC8D6;

  --color-dental-bg:     #0E3840;
  --color-medical-bg:    #0C2F38;

  --color-success-bg:    #0D2E20;
  --color-warning-bg:    #2A1E08;
  --color-error-bg:      #2A0E0E;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.6);
}