/* OurIEP Design Tokens
 * Based on Skybound Core conventions
 * Colors: OurIEP brand (Teal→Indigo gradient, Amber accent)
 */

:root {
  /* === Colors === */
  --color-primary:        #1DB9A8;   /* Teal */
  --color-secondary:      #4C35C9;   /* Indigo */
  --color-amber:          #FFD580;   /* Warm amber glow */

  --color-bg:             #F5F7FF;   /* Off-white page bg */
  --color-surface:        #FFFFFF;   /* Cards, modals */
  --color-surface-alt:    #EEF1FF;   /* Softer surface */

  --color-text:           #1A1A2E;   /* Deep navy body */
  --color-text-muted:     #6B7280;   /* Mid-gray captions */
  --color-text-light:     #FFFFFF;

  /* Gradient */
  --gradient-brand:   linear-gradient(135deg, #1DB9A8 0%, #4C35C9 100%);
  --gradient-brand-h: linear-gradient(135deg, #18a898 0%, #3d29b0 100%); /* hover */
  --gradient-indigo:  linear-gradient(135deg, #4C35C9 0%, #6366F1 100%);
  --gradient-subtle:  linear-gradient(135deg, rgba(29,185,168,.08) 0%, rgba(76,53,201,.08) 100%);

  /* === Typography === */
  --font-display:  'Inter', system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  --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-semi:    600;
  --font-bold:    700;
  --font-black:   800;

  /* === 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;

  /* === Layout === */
  --max-width: 1160px;
  --radius-sm:  0.375rem;
  --radius-md:  0.75rem;
  --radius-lg:  1.25rem;
  --radius-xl:  2rem;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-sm:   0 1px 3px rgba(26,26,46,.06);
  --shadow-md:   0 4px 16px rgba(26,26,46,.10);
  --shadow-lg:   0 8px 40px rgba(26,26,46,.14);
  --shadow-glow: 0 0 40px rgba(29,185,168,.25);

  /* === Transitions === */
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}