/* static/css/cpts/tokens.css
 * Design tokens Pilote CPTS — source unique de vérité.
 * Voir docs/superpowers/specs/2026-05-09-identite-graphique-design.md
 */

:root {
  /* ============================================
   * COULEURS — BLEUS (couleur principale)
   * ============================================ */
  --cpts-blue-900: #1E3A8A;
  --cpts-blue-700: #1D4ED8;  /* couleur de marque principale */
  --cpts-blue-600: #2563EB;
  --cpts-blue-500: #3B82F6;
  --cpts-blue-400: #60A5FA;
  --cpts-blue-100: #DBEAFE;
  --cpts-blue-50:  #EFF6FF;

  /* ============================================
   * COULEURS — TEAL (accent santé)
   * ============================================ */
  --cpts-teal-700: #0F766E;
  --cpts-teal-600: #0D9488;  /* action positive principale */
  --cpts-teal-500: #14B8A6;
  --cpts-teal-100: #CCFBF1;

  /* ============================================
   * COULEURS — NEUTRES
   * ============================================ */
  --cpts-slate-900: #0F172A;
  --cpts-slate-700: #334155;
  --cpts-slate-600: #475569;
  --cpts-slate-500: #64748B;
  --cpts-slate-400: #94A3B8;
  --cpts-slate-300: #CBD5E1;
  --cpts-slate-200: #E2E8F0;
  --cpts-slate-100: #F1F5F9;
  --cpts-slate-50:  #F8FAFC;
  --cpts-white: #FFFFFF;

  /* ============================================
   * COULEURS — ALERTES (rares, fortes)
   * ============================================ */
  --cpts-orange-600: #EA580C;
  --cpts-orange-100: #FFEDD5;
  --cpts-red-600: #DC2626;
  --cpts-red-100: #FEE2E2;

  /* ============================================
   * TYPOGRAPHIE
   * ============================================ */
  --cpts-font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cpts-text-display: 2.25rem;    /* 36px — hero vitrine */
  --cpts-text-h1: 1.5rem;           /* 24px — titres de page */
  --cpts-text-h2: 1.125rem;         /* 18px — titres de section */
  --cpts-text-h3: 0.9375rem;        /* 15px — sous-titres */
  --cpts-text-base: 0.875rem;       /* 14px — corps */
  --cpts-text-sm: 0.8125rem;        /* 13px — tableau, métadonnées */
  --cpts-text-xs: 0.6875rem;        /* 11px — labels uppercase */
  --cpts-text-micro: 0.625rem;      /* 10px — timestamps */

  /* ============================================
   * RADIUS
   * ============================================ */
  --cpts-radius-sm: 6px;
  --cpts-radius-md: 8px;
  --cpts-radius-lg: 10px;
  --cpts-radius-xl: 14px;
  --cpts-radius-full: 9999px;

  /* ============================================
   * OMBRES
   * ============================================ */
  --cpts-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --cpts-shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06);
  --cpts-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
  --cpts-shadow-rich: 0 12px 28px -10px rgba(30, 64, 175, 0.45);  /* hero KPI uniquement */

  /* ============================================
   * ÎLOT FLOTTANT — langage transversal (sidebar, barre du haut, cartes)
   * Surfaces détachées, arrondies, en lévitation sur le dégradé clair.
   * ============================================ */
  --cpts-radius-island: 20px;
  --cpts-shadow-island:    0 18px 40px -18px rgba(30, 64, 175, 0.28);  /* lévitation douce, bleutée */
  --cpts-shadow-island-sm: 0 8px 22px -12px rgba(30, 64, 175, 0.22);   /* chrome / petites surfaces */
  --cpts-glass-face:   rgba(255, 255, 255, 0.72);  /* verre clair translucide */
  --cpts-glass-border: rgba(255, 255, 255, 0.60);
  --cpts-glass-blur:   blur(16px);

  /* ============================================
   * ESPACEMENTS (échelle 4px)
   * ============================================ */
  --cpts-space-1: 0.25rem;   /* 4px */
  --cpts-space-2: 0.5rem;    /* 8px */
  --cpts-space-3: 0.75rem;   /* 12px */
  --cpts-space-4: 1rem;      /* 16px */
  --cpts-space-5: 1.25rem;   /* 20px */
  --cpts-space-6: 1.5rem;    /* 24px */
  --cpts-space-8: 2rem;      /* 32px */
  --cpts-space-10: 2.5rem;   /* 40px */

  /* ============================================
   * TRANSITIONS
   * ============================================ */
  --cpts-transition-fast: 150ms ease-out;
  --cpts-transition-base: 200ms ease-out;
  --cpts-transition-out: 150ms ease-in;
}