/**
 * NCLI Learning Management System (NCLI-LMS)
 * Global Design Tokens & Variable System
 * Path: public/assets/css/tokens.css
 */

:root {
  /* COLOR SYSTEM — HSL TAILORED */
  --hue-primary: 230;
  --color-primary-50:  hsl(var(--hue-primary), 100%, 97%);
  --color-primary-100: hsl(var(--hue-primary), 95%, 92%);
  --color-primary-200: hsl(var(--hue-primary), 90%, 85%);
  --color-primary-500: hsl(var(--hue-primary), 85%, 60%);
  --color-primary-600: hsl(var(--hue-primary), 80%, 52%);
  --color-primary-700: hsl(var(--hue-primary), 75%, 44%);

  --color-secondary-100: hsl(190, 90%, 90%);
  --color-secondary-500: hsl(190, 90%, 50%);
  --color-secondary-600: hsl(190, 85%, 42%);

  /* STATUS COLORS */
  --color-success: hsl(145, 75%, 42%);
  --color-success-bg: rgba(34, 197, 94, 0.15);
  --color-warning: hsl(38, 95%, 50%);
  --color-warning-bg: rgba(234, 179, 8, 0.15);
  --color-danger:  hsl(355, 85%, 56%);
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-info:    hsl(205, 90%, 52%);
  --color-info-bg: rgba(59, 130, 246, 0.15);

  /* GAMIFICATION */
  --color-xp-gold: hsl(45, 95%, 55%);
  --color-xp-silver: hsl(220, 15%, 75%);
  --color-xp-bronze: hsl(30, 65%, 52%);

  /* TYPOGRAPHY */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-code: 'Fira Code', monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.563rem;   /* 25px */
  --text-2xl: 1.953rem;  /* 31px */
  --text-3xl: 2.441rem;  /* 39px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* SPACING SCALE (4px grid) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* BORDER RADIUS */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* SHADOW SCALE */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.35);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.37);

  /* ELEVATION / Z-INDEX */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-drawer: 1040;
  --z-modal: 1050;
  --z-toast: 1070;

  /* ANIMATION TIMING */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* DEFAULT SURFACE TOKENS (Dark Midnight Mode) */
  --bg-app: #0B0F19;
  --bg-surface: #111827;
  --bg-card: #1F2937;
  --bg-card-glass: rgba(31, 41, 55, 0.75);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --border-color: rgba(255, 255, 255, 0.12);
  --text-main: #F9FAFB;
  --text-muted: #9CA3AF;
}