/* =============================================================================
   ACADEMIA CONNECT — SITE VITRINE — DESIGN TOKENS
   Dérivé de theme.scss (application) : mêmes couleurs de marque, palette
   étendue pour un site marketing (typographie, motifs, ombres douces).
   ============================================================================= */

:root {
  /* Fonds */
  --color-bg: #f8fafc;
  --color-bg-page: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.72);
  --color-surface-overlay: rgba(255, 255, 255, 0.95);

  /* Texte */
  --color-text: #0f172a;
  --color-text-secondary: #374151;
  --color-text-muted: #64748b;
  --color-text-disabled: #9ca3af;
  --color-text-inverse: #ffffff;

  /* Marque */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-active: #4338ca;
  --color-primary-soft: rgba(99, 102, 241, 0.1);
  --color-primary-softer: rgba(99, 102, 241, 0.05);
  --color-primary-contrast: #ffffff;

  --gradient-primary: linear-gradient(135deg, #8b5cf6, #6366f1);
  --gradient-primary-hover: linear-gradient(135deg, #7c3aed, #4f46e5);
  --gradient-header: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
  --gradient-mesh: radial-gradient(circle at 15% 20%, rgba(139, 92, 246, 0.16), transparent 45%),
                   radial-gradient(circle at 85% 0%, rgba(99, 102, 241, 0.14), transparent 40%),
                   radial-gradient(circle at 50% 100%, rgba(79, 70, 229, 0.10), transparent 50%);

  --gradient-icon-primary: linear-gradient(135deg, #8b5cf6, #6366f1);
  --gradient-icon-pink: linear-gradient(135deg, #f093fb, #f5576c);
  --gradient-icon-cyan: linear-gradient(135deg, #4facfe, #00f2fe);
  --gradient-icon-green: linear-gradient(135deg, #43e97b, #38f9d7);

  /* Bordures */
  --color-border: #e5e7eb;
  --color-border-soft: #f3f4f6;
  --color-border-primary: rgba(139, 92, 246, 0.2);
  --color-border-glass: rgba(255, 255, 255, 0.4);

  /* Statuts */
  --color-success: #16a34a;
  --color-success-soft: rgba(22, 163, 74, 0.1);
  --color-warning: #d97706;
  --color-warning-soft: rgba(217, 119, 6, 0.1);
  --color-danger: #dc2626;
  --color-danger-soft: rgba(220, 38, 38, 0.1);
  --color-info: #2563eb;
  --color-info-soft: rgba(37, 99, 235, 0.1);

  /* Ombres */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  --shadow-2xl: 0 25px 60px -12px rgba(76, 29, 149, 0.25);
  --shadow-primary: 0 10px 30px -8px rgba(99, 102, 241, 0.45);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.12);

  /* Rayons */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Typo */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.25rem;
  --font-size-6xl: 4rem;

  --line-height-tight: 1.15;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;

  --transition-fast: 150ms ease;
  --transition-normal: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  --container-w: 1180px;

  /* Course-block palette — echoes the real timetable module */
  --course-1: #8b5cf6;
  --course-2: #06b6d4;
  --course-3: #f59e0b;
  --course-4: #ec4899;
  --course-5: #22c55e;
  --course-6: #6366f1;
}

.dark {
  --color-bg: #0b1020;
  --color-bg-page: #070b16;
  --color-surface: #131a2e;
  --color-surface-glass: rgba(19, 26, 46, 0.72);
  --color-surface-overlay: rgba(11, 16, 32, 0.95);

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #8896b3;
  --color-text-disabled: #576179;
  --color-text-inverse: #0b1020;

  --color-primary: #a78bfa;
  --color-primary-hover: #c4b5fd;
  --color-primary-soft: rgba(167, 139, 250, 0.16);
  --color-primary-softer: rgba(167, 139, 250, 0.08);

  --gradient-primary: linear-gradient(135deg, #a78bfa, #818cf8);
  --gradient-header: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.14));
  --gradient-mesh: radial-gradient(circle at 15% 20%, rgba(139, 92, 246, 0.22), transparent 45%),
                   radial-gradient(circle at 85% 0%, rgba(99, 102, 241, 0.18), transparent 40%),
                   radial-gradient(circle at 50% 100%, rgba(79, 70, 229, 0.14), transparent 50%);

  --color-border: #26304a;
  --color-border-soft: #1a2238;
  --color-border-primary: rgba(167, 139, 250, 0.28);
  --color-border-glass: rgba(148, 163, 184, 0.14);

  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  --shadow-2xl: 0 25px 60px -12px rgba(0, 0, 0, 0.55);
}