/* Dira — design tokens.
   Palette dérivée du LOGO Dira (public/assets/images/dira-logo.png) :
   bleu roi #1160A8 (lettrage « DIRA », dégradé du « D »), vert-sarcelle #12A79A
   (feuille + triangle du « A »). Aucune autre couleur de marque (le rose de
   l'ancienne charte a été retiré). */

/* ---------- Couleurs ---------- */
:root {
  /* Primaire — bleu du logo (H ≈ 208) */
  --color-primary-50:  #eef4fb;
  --color-primary-100: #d7e6f4;
  --color-primary-200: #afcde8;
  --color-primary-300: #7fb0dd;
  --color-primary-400: #4a8ecb;
  --color-primary-500: #1f72b9;
  --color-primary-600: #1160a8; /* graine — couleur de marque */
  --color-primary-700: #0d4f8a;
  --color-primary-800: #0a3d6b;
  --color-primary-900: #082c4f;

  /* Secondaire — vert-sarcelle du logo (feuille / triangle, H ≈ 176) */
  --color-secondary-50:  #ecf8f6;
  --color-secondary-100: #d2efec;
  --color-secondary-200: #a7e1db;
  --color-secondary-300: #71cec4;
  --color-secondary-400: #3cb5aa;
  --color-secondary-500: #12a79a; /* graine */
  --color-secondary-600: #0f8d82;
  --color-secondary-700: #0d746b;
  --color-secondary-800: #0a5952;
  --color-secondary-900: #073f3a;

  /* Neutres — gris froids, teintés vers le bleu de marque */
  --color-neutral-0:   #fefefe;
  --color-neutral-50:  #f4f7fa;
  --color-neutral-100: #e8ecf1;
  --color-neutral-200: #d4dae1;
  --color-neutral-300: #b9c1cb;
  --color-neutral-400: #9aa4b1;
  --color-neutral-500: #79828f;
  --color-neutral-600: #5c6570;
  --color-neutral-700: #424a54;
  --color-neutral-800: #2c333b;
  --color-neutral-900: #1a1f25;

  /* Statuts RH (congé approuvé / en attente / refusé) — vert distinct du
     sarcelle de marque, ambre, rouge. */
  --color-success-50:  #eef8f0; --color-success-100: #d6efdb; --color-success-500: #1fa049; --color-success-600: #17833b; --color-success-700: #14682f;
  --color-warning-50:  #fff4cc; --color-warning-100: #ffe7b0; --color-warning-500: #a97400; --color-warning-600: #895700; --color-warning-700: #663f00;
  --color-error-50:    #ffe6de; --color-error-100: #ffd6cb; --color-error-500: #d24a3d; --color-error-600: #b12f26; --color-error-700: #86201a;

  /* Alias sémantiques — à utiliser dans les composants, jamais les rampes brutes */
  --color-bg: var(--color-neutral-0);
  --color-bg-subtle: var(--color-neutral-50);
  /* Fond d'application : gris chaud très pâle façon fil d'actualité (LinkedIn) */
  --color-canvas: #f4f2ee;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  /* Filet de séparation des cartes — un vrai bord fin, pas une ombre */
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-hairline: var(--color-neutral-100);

  /* Texte en noir transparent (rendu « doux » façon LinkedIn), pas en gris opaque. */
  --color-text: rgba(0, 0, 0, 0.90);
  --color-text-muted: rgba(0, 0, 0, 0.60);
  --color-text-disabled: rgba(0, 0, 0, 0.42);
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #ffffff;

  --color-accent: var(--color-primary-600);
  --color-accent-hover: var(--color-primary-700);
  --color-accent-pressed: var(--color-primary-800);
  --color-accent-tint: var(--color-primary-50);

  --color-secondary-accent: var(--color-secondary-100);
  --color-secondary-accent-strong: var(--color-secondary-600);

  --color-focus-ring: var(--color-primary-600);

  --color-success: var(--color-success-600);
  --color-success-bg: var(--color-success-50);
  --color-warning: var(--color-warning-600);
  --color-warning-bg: var(--color-warning-50);
  --color-error: var(--color-error-600);
  --color-error-bg: var(--color-error-50);
}

/* ---------- Typographie ---------- */
:root {
  /* Pile système : rendu net, immédiat (pas de police web à télécharger),
     proche du rendu LinkedIn / des applications Google. Roboto reste en repli. */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', sans-serif;
  --font-display: var(--font-system);
  --font-body: var(--font-system);
  --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Échelle resserrée (~15 % plus compacte) — les anciens titres étaient trop gros. */
  --text-display-lg: 700 2.5rem/1.15 var(--font-display);
  --text-display-md: 700 1.875rem/1.2 var(--font-display);
  --text-headline-lg: 600 1.375rem/1.3 var(--font-display);
  --text-headline-md: 600 1.125rem/1.35 var(--font-display);
  --text-title-lg: 600 1.0625rem/1.4 var(--font-display);
  --text-title-md: 600 0.9375rem/1.4 var(--font-display);
  --text-body-lg: 400 0.9375rem/1.55 var(--font-body);
  --text-body-md: 400 0.875rem/1.5 var(--font-body);
  --text-body-sm: 400 0.8125rem/1.45 var(--font-body);
  --text-label-lg: 600 0.8125rem/1.2 var(--font-body);
  --text-label-md: 600 0.75rem/1.2 var(--font-body);
  --letter-tight: -0.011em;
  --letter-wide: 0.02em;
}

/* ---------- Espacement (grille 4px) ---------- */
:root {
  --space-0: 0px;  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --layout-gutter: var(--space-6);
  --layout-max-width: 1280px;
  --sidebar-width: 264px;
}

/* ---------- Rayons ---------- */
:root {
  --radius-none: 0px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
}

/* ---------- Élévation ---------- */
:root {
  /* Élévation très sobre : les surfaces se distinguent surtout par leur filet
     (--color-border), l'ombre ne fait qu'un léger décollement. */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(16, 31, 47, 0.06);
  --elevation-2: 0 1px 3px rgba(16, 31, 47, 0.08), 0 1px 2px rgba(16, 31, 47, 0.04);
  --elevation-3: 0 4px 12px rgba(16, 31, 47, 0.10);
  --elevation-4: 0 8px 24px rgba(16, 31, 47, 0.12);
  --elevation-5: 0 16px 40px rgba(16, 31, 47, 0.16);
  --elevation-focus: 0 0 0 2px var(--color-primary-200);
  --card-shadow: 0 1px 2px rgba(16, 31, 47, 0.04);
  --hover-veil: rgba(0, 0, 0, 0.04);
}

/* ---------- Mouvement ---------- */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1);
  --duration-fast: 130ms;
  --duration-standard: 200ms;
  --duration-slow: 350ms;
}