/**
 * AEMI Campus — Design Tokens
 * Master visual tokens defining colors, typography, elevations, spacing, and animations.
 */

:root {
  /* Brand Palette (Deep Teal & Vibrant Accents) */
  --teal-950: #0A3032;
  --teal-900: #0E4949;
  --teal-850: #125555;
  --teal-800: #166262;
  --teal-700: #1F7C7D;
  --teal-600: #299798;
  --teal-100: #E6F3F3;
  --teal-50:  #F0F8F8;

  /* Accent Colors */
  --cyan-600: #029DB3;
  --cyan-500: #05CFE2;
  --cyan-400: #3FE0F0;
  --cyan-100: #E4FBFD;

  --blue-700: #0F49CA;
  --blue-600: #175CF5;
  --blue-500: #3B7BF7;
  --blue-100: #EBF2FE;
  --blue-50: #F4F8FF;

  --lime-600: #93C033;
  --lime-500: #A8DB44;
  --lime-400: #B9E85A;
  --lime-200: #E3F8AC;
  --lime-100: #F3FCE0;

  /* Neutrals & Surfaces */
  --white: #FFFFFF;
  --off-white: #F7FAFA;
  --surface: #FFFFFF;
  --surface-alt: #F1F6F6;
  --surface-card: #FFFFFF;
  --surface-dark: #0A3032;
  --surface-dark-alt: #0E4949;

  /* Typography / Inks */
  --ink: #182B30;
  --ink-secondary: #2C434A;
  --ink-inverted: #FFFFFF;
  --muted: #596A70;
  --muted-light: #7E9096;
  --border-subtle: #DEE7E8;
  --border-medium: #C6D5D7;
  --border-dark: rgba(255, 255, 255, 0.15);

  /* Status Colors */
  --status-enrolling: #108A4E;
  --status-pending: #B45309;
  --status-pending-bg: #FEF3C7;

  /* Typography Stacks */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid 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 */
  --space-24: 6rem;    /* 96px */

  /* Layout */
  --container-max: 1240px;
  --container-pad: 1.5rem;
  --header-height: 76px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(10, 48, 50, 0.06), 0 1px 2px rgba(10, 48, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 48, 50, 0.08), 0 2px 4px rgba(10, 48, 50, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 48, 50, 0.12), 0 4px 8px rgba(10, 48, 50, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(10, 48, 50, 0.18);
  --shadow-glow: 0 0 24px rgba(5, 207, 226, 0.35);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-modal: 500;
  --z-popover: 600;
  --z-floating: 900;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-normal: 0.01ms;
    --transition-smooth: 0.01ms;
  }
}