/* ==========================================================================
   Design Tokens — CSI Dry Eye
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-primary:       #005C89;
  --color-primary-dark:  #003D5C;
  --color-accent:        #FABB00;
  --color-accent-dark:   #C99700;

  --color-bg:            #FFFFFF;
  --color-bg-light:      #F5F7FA;
  --color-bg-alt:        #EDF2F7;
  --color-bg-darker:     #E2E8F0;
  --color-bg-navy:       #001a2e;

  --color-text:          #1A2B3C;
  --color-text-light:    #5A6B7C;
  --color-text-inverse:  #FFFFFF;

  --color-border:        #D1D5DB;
  --color-border-light:  #E5E7EB;

  --color-error:         #DC3545;

  /* Status Colors (interactive elements & data visualization) */
  --color-status-teal:   #00838F;
  --color-status-teal-dark: #006d77;
  --color-status-blue:   #1565C0;
  --color-status-green:  #2E7D32;
  --color-status-amber:  #F9A825;
  --color-status-orange: #E65100;
  --color-status-cyan:   #4FC3F7;

  /* ---- Spacing ---- */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;
  --space-5xl:  96px;

  /* ---- Typography ---- */
  --font-body:    'Inter', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  1.75rem;   /* 28px */
  --fs-3xl:  2.25rem;   /* 36px */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* ---- Border Radius ---- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.12);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---- Z-Index Scale ---- */
  --z-base:      0;
  --z-content:   2;
  --z-search:    3;
  --z-dropdown:  100;
  --z-sticky:    500;
  --z-mobile:    999;
  --z-header:    1000;
  --z-skip:      10000;

  /* ---- Layout ---- */
  --header-height: 72px;
}