/* ATLAS Partners — jetons de design (DESIGN.md sections 2, 3, 5, 6).
   Toutes les couleurs passent par des variables : aucune valeur brute ailleurs. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Couleurs */
  --color-bg: #F7F5F0;
  --color-bg-rgb: 247, 245, 240;
  --color-surface: #FFFFFF;
  --color-surface-soft: #EEF3EF;
  --color-surface-warm: #FBF3E4;
  --color-border: #DCE4DE;
  --color-border-strong: #B8C8BD;
  --color-text: #17241D;
  --color-text-muted: #657269;
  --color-primary: #115333;
  --color-primary-rgb: 17, 83, 51;
  --color-primary-hover: #0B4127;
  --color-accent: #B9801D;
  --color-accent-rgb: 185, 128, 29;
  --color-secondary: #8BAE39;
  --color-secondary-rgb: 139, 174, 57;
  --color-success: #277A4B;
  --color-warning: #9A6511;
  --color-error: #A33A32;
  --color-info: #286A78;
  --color-focus: #D5A23F;

  /* Typographie */
  --font-body: 'Noto Sans', 'Noto Sans Arabic', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-size-page-title: clamp(1.5rem, 3vw, 2rem);
  --font-size-section-title: clamp(1.15rem, 2vw, 1.5rem);
  --font-size-card-title: 1rem;
  --font-size-body: 0.925rem;
  --font-size-label: 0.78rem;
  --font-size-metric: clamp(1.6rem, 3vw, 2.35rem);

  /* Espacement : 4, 8, 12, 16, 24, 32, 48 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation (DESIGN.md section 6) */
  --elevation-2: 0 12px 30px rgba(var(--color-primary-rgb), 0.08);
  --elevation-3: 0 20px 44px rgba(var(--color-primary-rgb), 0.14);

  /* Structure */
  --layout-max: 1440px;
  --sidebar-width: 248px;
  --target-min: 44px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.18s;
  --duration-base: 0.32s;
  --duration-slow: 0.55s;
}

/* Variantes typographiques arabes : la famille arabe passe en premier. */
:root:lang(ar),
[dir='rtl'] {
  --font-body: 'Noto Sans Arabic', 'Noto Sans', system-ui, 'Segoe UI', Arial, sans-serif;
}