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

  /* Coral (Accent) */
  --coral:       #F97066;
  --coral-light: #FEE2E2;
  --coral-dark:  #DC2626;

  /* Amber (Highlights / Rewards) */
  --amber:       #FBBF24;
  --amber-light: #FEF3C7;
  --amber-dark:  #D97706;

  /* Green (Success) */
  --green:       #10B981;
  --green-light: #D1FAE5;
  --green-dark:  #059669;

  /* Navy (Dark text / Backgrounds) */
  --navy:       #1E293B;
  --navy-light: #334155;

  /* Cream (Warm backgrounds) */
  --cream:      #FFFBF5;
  --cream-dark: #FFF7ED;

  /* Slate (Neutral text) */
  --slate:       #64748B;
  --slate-light: #94A3B8;
  --slate-dark:  #475569;

  /* Neutral grays */
  --white:    #FFFFFF;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* Red (Alerts / Lost status) */
  --red:       #EF4444;
  --red-light: #FEE2E2;

  /* ── Typography ── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing ── */
  --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-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 30px rgba(20, 184, 166, 0.2);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Layout ── */
  --max-width:  1200px;
  --nav-height: 72px;
}