/**
 * Gestilib Design Tokens v2
 * Palette extraite du logo : bleu #007BFF, teal #00A3D8, vert #00C853
 */
:root {
  /* Brand */
  --gl-primary: #007bff;
  --gl-primary-dark: #0066d6;
  --gl-primary-light: #3395ff;
  --gl-teal: #00a3d8;
  --gl-teal-dark: #008bb8;
  --gl-accent: #00c853;
  --gl-accent-dark: #00a844;
  --gl-accent-light: #00e676;

  /* Surfaces */
  --gl-bg: #f4f7fb;
  --gl-surface: #ffffff;
  --gl-surface-elevated: #ffffff;
  --gl-sidebar: #0b3d6b;
  --gl-sidebar-hover: rgba(255, 255, 255, 0.08);
  --gl-sidebar-active: rgba(0, 123, 255, 0.22);
  --gl-border: #e2e8f0;
  --gl-border-light: #eef2f7;

  /* Text */
  --gl-text: #0f172a;
  --gl-text-muted: #64748b;
  --gl-text-inverse: #ffffff;
  --gl-text-sidebar: rgba(255, 255, 255, 0.82);
  --gl-text-sidebar-muted: rgba(255, 255, 255, 0.55);

  /* Semantic */
  --gl-success: #00c853;
  --gl-warning: #f59e0b;
  --gl-danger: #ef4444;
  --gl-info: #00a3d8;

  /* Gradients */
  --gl-gradient-brand: linear-gradient(135deg, #007bff 0%, #00a3d8 100%);
  --gl-gradient-accent: linear-gradient(135deg, #00c853 0%, #00e676 100%);
  --gl-gradient-hero: linear-gradient(145deg, #007bff 0%, #0090cc 45%, #00a3d8 100%);

  /* Typography */
  --gl-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gl-font-size-xs: 0.75rem;
  --gl-font-size-sm: 0.875rem;
  --gl-font-size-base: 1rem;
  --gl-font-size-lg: 1.125rem;
  --gl-font-size-xl: 1.25rem;
  --gl-font-size-2xl: 1.5rem;
  --gl-font-size-3xl: 1.875rem;
  --gl-line-height: 1.5;
  --gl-line-height-tight: 1.25;

  /* Spacing */
  --gl-space-1: 0.25rem;
  --gl-space-2: 0.5rem;
  --gl-space-3: 0.75rem;
  --gl-space-4: 1rem;
  --gl-space-5: 1.25rem;
  --gl-space-6: 1.5rem;
  --gl-space-8: 2rem;
  --gl-space-10: 2.5rem;
  --gl-space-12: 3rem;

  /* Radius */
  --gl-radius-sm: 8px;
  --gl-radius: 12px;
  --gl-radius-lg: 16px;
  --gl-radius-xl: 20px;
  --gl-radius-pill: 999px;

  /* Shadows */
  --gl-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --gl-shadow-sm: 0 2px 8px rgba(0, 123, 255, 0.06);
  --gl-shadow: 0 4px 24px rgba(0, 123, 255, 0.08);
  --gl-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);
  --gl-shadow-card: 0 2px 12px rgba(15, 23, 42, 0.06);

  /* Layout */
  --gl-sidebar-width: 260px;
  --gl-sidebar-width-mini: 72px;
  --gl-header-height: 64px;
  --gl-content-max-width: 1440px;

  /* Transitions */
  --gl-transition: 0.2s ease;
  --gl-transition-slow: 0.35s ease;

  /* Bootstrap overrides */
  --bs-primary: #007bff;
  --bs-primary-rgb: 0, 123, 255;
  --bs-success: #00c853;
  --bs-success-rgb: 0, 200, 83;
  --bs-info: #00a3d8;
  --bs-info-rgb: 0, 163, 216;
  --bs-body-font-family: var(--gl-font-sans);
  --bs-body-color: var(--gl-text);
  --bs-body-bg: var(--gl-bg);
  --bs-border-color: var(--gl-border);
  --bs-border-radius: var(--gl-radius-sm);
  --bs-link-color: var(--gl-primary);
  --bs-link-hover-color: var(--gl-primary-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}