/* ============================================
   Design Tokens — CSS Custom Properties
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-primary:        #1A9E8F;
  --color-primary-dark:   #157A6E;
  --color-primary-light:  #2BB5A5;
  --color-primary-bg:     #E6F7F5;
  --color-primary-subtle: #F0FAF8;

  --color-accent:         #F97316;
  --color-accent-dark:    #EA580C;
  --color-accent-light:   #FB923C;
  --color-accent-bg:      #FFF7ED;

  --color-white:          #FFFFFF;
  --color-black:          #0F172A;

  --color-gray-50:        #F8FAFC;
  --color-gray-100:       #F1F5F9;
  --color-gray-200:       #E2E8F0;
  --color-gray-300:       #CBD5E1;
  --color-gray-400:       #94A3B8;
  --color-gray-500:       #64748B;
  --color-gray-600:       #475569;
  --color-gray-700:       #334155;
  --color-gray-800:       #1E293B;
  --color-gray-900:       #0F172A;

  --color-success:        #22C55E;
  --color-warning:        #EAB308;
  --color-error:          #EF4444;
  --color-info:           #3B82F6;

  /* ---- Surfaces ---- */
  --surface-page:         var(--color-white);
  --surface-card:         var(--color-white);
  --surface-elevated:     var(--color-gray-50);
  --surface-tinted:       var(--color-primary-subtle);

  /* ---- Text ---- */
  --text-primary:         var(--color-gray-800);
  --text-secondary:       var(--color-gray-500);
  --text-muted:           var(--color-gray-400);
  --text-on-primary:      var(--color-white);
  --text-on-accent:       var(--color-white);

  /* ---- Typography ---- */
  --font-family:          'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.8125rem; /* 13px */
  --font-size-base:       0.875rem;  /* 14px */
  --font-size-md:         1rem;      /* 16px */
  --font-size-lg:         1.125rem;  /* 18px */
  --font-size-xl:         1.25rem;   /* 20px */
  --font-size-2xl:        1.5rem;    /* 24px */
  --font-size-3xl:        1.875rem;  /* 30px */
  --font-size-4xl:        2.25rem;   /* 36px */

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

  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.7;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ---- Layout ---- */
  --container-padding:    var(--space-5);
  --section-gap:          var(--space-12);

  /* ---- Border Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl:   0 16px 40px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 8px rgba(26,158,143,0.08);
  --shadow-glow: 0 0 20px rgba(26,158,143,0.15);

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

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