/* =============================================
   GET FIT PHYSIO — Design Tokens / Variables
   ============================================= */

:root {
  /* ─── Primary Palette: Teal ─── */
  --clr-primary-50:  #F0FDFA;
  --clr-primary-100: #CCFBF1;
  --clr-primary-200: #99F6E4;
  --clr-primary-300: #5EEAD4;
  --clr-primary-400: #2DD4BF;
  --clr-primary-500: #14B8A6;
  --clr-primary-600: #0D9488;
  --clr-primary-700: #0F766E;
  --clr-primary-800: #115E59;
  --clr-primary-900: #134E4A;

  /* ─── Accent Palette: Amber ─── */
  --clr-accent-400: #FBBF24;
  --clr-accent-500: #F59E0B;
  --clr-accent-600: #D97706;

  /* ─── Neutral Palette: Warm Stone ─── */
  --clr-neutral-50:  #FAFAF9;
  --clr-neutral-100: #F5F5F4;
  --clr-neutral-200: #E7E5E4;
  --clr-neutral-300: #D6D3D1;
  --clr-neutral-400: #A8A29E;
  --clr-neutral-500: #78716C;
  --clr-neutral-600: #57534E;
  --clr-neutral-700: #44403C;
  --clr-neutral-800: #292524;
  --clr-neutral-900: #1C1917;

  /* ─── Semantic Tokens ─── */
  --color-bg:              var(--clr-neutral-50);
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FFFFFF;
  --color-surface-overlay: rgba(255,255,255,0.9);
  --color-border:          var(--clr-neutral-200);
  --color-border-strong:   var(--clr-neutral-300);

  --color-primary:         var(--clr-primary-600);
  --color-primary-hover:   var(--clr-primary-700);
  --color-primary-active:  var(--clr-primary-800);
  --color-primary-subtle:  var(--clr-primary-50);
  --color-primary-muted:   var(--clr-primary-100);

  --color-accent:          var(--clr-accent-600);
  --color-accent-bg:       #FFFBEB;

  --color-text:            var(--clr-neutral-900);
  --color-text-secondary:  var(--clr-neutral-600);
  --color-text-muted:      var(--clr-neutral-400);
  --color-text-inverse:    #FFFFFF;
  --color-text-on-primary: #FFFFFF;

  /* ─── Status Colors ─── */
  --color-success:     #059669;
  --color-success-bg:  #ECFDF5;
  --color-success-bd:  #A7F3D0;
  --color-warning:     #D97706;
  --color-warning-bg:  #FFFBEB;
  --color-warning-bd:  #FDE68A;
  --color-error:       #DC2626;
  --color-error-bg:    #FEF2F2;
  --color-error-bd:    #FECACA;
  --color-info:        #0284C7;
  --color-info-bg:     #F0F9FF;
  --color-info-bd:     #BAE6FD;

  /* ─── Typography ─── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-sans);

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

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ─── Spacing ─── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ─── Border Radius ─── */
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius:      0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* ─── 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 0 rgba(0,0,0,0.06);
  --shadow:       0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-md:    0 6px 16px -4px rgba(0,0,0,0.1), 0 4px 8px -4px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 24px -4px rgba(0,0,0,0.1), 0 4px 8px -4px rgba(0,0,0,0.06);
  --shadow-xl:    0 20px 40px -8px rgba(0,0,0,0.15);
  --shadow-2xl:   0 32px 64px -12px rgba(0,0,0,0.15);
  --shadow-teal:  0 4px 20px rgba(13,148,136,0.3);
  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);

  /* ─── Transitions ─── */
  --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-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration:        200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition:      var(--duration) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-default);

  /* ─── Layout ─── */
  --sidebar-width:   264px;
  --nav-height:      72px;
  --container-max:   1200px;
  --content-max:     760px;
  --z-base:          0;
  --z-raised:        10;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-overlay:       300;
  --z-modal:         400;
  --z-toast:         500;
}