/* ============================================
   PECA Foundation — Design Tokens
   ============================================ */

:root {
  /* ── Colors ── */
  --color-primary:       #0a1628;
  --color-primary-light: #1a2b45;
  --color-primary-dark:  #060e1a;
  --color-secondary:     #1e3a5f;
  --color-accent:        #e8a317;
  --color-accent-hover:  #d4920f;
  --color-accent-light:  #f5c84d;
  --color-success:       #27ae60;
  --color-danger:        #e74c3c;

  --color-white:         #ffffff;
  --color-off-white:     #f8f9fb;
  --color-gray-50:       #f4f5f7;
  --color-gray-100:      #ecedf0;
  --color-gray-200:      #d8dbe1;
  --color-gray-300:      #b8bdc7;
  --color-gray-400:      #8f96a3;
  --color-gray-500:      #6b7280;
  --color-gray-600:      #4b5563;
  --color-gray-700:      #374151;
  --color-gray-800:      #1f2937;
  --color-gray-900:      #111827;
  --color-black:         #0a0a0a;

  /* Brand teal (from existing WordPress site) */
  --color-teal:          #0f907f;
  --color-teal-light:    #14b8a6;

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

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

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

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

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* ── Spacing (8px grid) ── */
  --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 */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ── */
  --container-max:  1280px;
  --container-pad:  var(--space-6);

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(10, 22, 40, 0.06), 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md:  0 4px 12px rgba(10, 22, 40, 0.08), 0 2px 4px rgba(10, 22, 40, 0.04);
  --shadow-lg:  0 10px 30px rgba(10, 22, 40, 0.12), 0 4px 8px rgba(10, 22, 40, 0.06);
  --shadow-xl:  0 20px 50px rgba(10, 22, 40, 0.16);

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

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