/**
 * Hybrid Hive Design System Tokens & Variables
 * Markaz Hybrid Education
 */

:root {
  /* Brand Core Palette */
  --color-primary: #0E589F;         /* Deep Markaz Cobalt */
  --color-primary-light: #2575C0;
  --color-primary-dark: #093E72;
  --color-cyan: #00A3E0;            /* Playful Cyan */
  --color-magenta: #E6196E;         /* Vibrant Magenta Accent */
  --color-magenta-light: #F43F8B;
  --color-amber: #F59E0B;           /* Sunshine Gold */
  --color-amber-light: #FBBF24;
  --color-emerald: #10B981;         /* Fresh Meadow Emerald */
  --color-emerald-light: #34D399;
  --color-violet: #8B5CF6;          /* Creative Purple */

  /* Surface & Background */
  --bg-page: #FCFBF7;               /* Warm comforting cream */
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-surface-subtle: #F8F9FA;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-glass-card: rgba(255, 255, 255, 0.95);
  --border-glass: rgba(255, 255, 255, 0.6);

  /* Typography Colors */
  --text-main: #1E293B;             /* Slate 800 */
  --text-muted: #64748B;            /* Slate 500 */
  --text-light: #94A3B8;            /* Slate 400 */
  --text-inverse: #FFFFFF;

  /* Borders & Dividers */
  --border-subtle: #E2E8F0;
  --border-focus: #0E589F;
  --border-error: #EF4444;

  /* Status Colors */
  --status-awaiting-bg: #FEF3C7;
  --status-awaiting-text: #92400E;
  --status-in-bg: #D1FAE5;
  --status-in-text: #065F46;
  --status-out-bg: #EDE9FE;
  --status-out-text: #5B21B6;
  --status-error-bg: #FEE2E2;
  --status-error-text: #991B1B;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 32px -8px rgba(15, 23, 42, 0.15), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-brand: 0 8px 24px -4px rgba(14, 88, 159, 0.25);
  --shadow-magenta: 0 8px 24px -4px rgba(230, 25, 110, 0.25);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --trans-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --max-width: 1080px;
}