/*
 * Jetons de design ArabSoft (socle:FRO-02).
 * Source de référence des valeurs graphiques communes à tous les produits.
 * Chaque application copie ce fichier tel quel (ou l'importe dans son SCSS) et
 * construit ses propres composants dessus. Ne pas modifier dans un produit :
 * proposer le changement ici.
 *
 * Thème : clair par défaut ; sombre avec [data-theme="dark"] sur <html>,
 * ou automatiquement selon le système si data-theme est absent.
 * Contrastes vérifiés WCAG 2.1 AA (texte ≥ 4,5:1, composants ≥ 3:1).
 */

:root {
  /* Couleurs de la marque, relevées dans le logo officiel. Ne pas utiliser
     l'orange pour du texte sur fond clair (contraste 2,3:1). */
  --as-brand-blue: #1E56A3;
  --as-brand-orange: #EC9A02;
  --as-brand-grey: #706F6F;

  /* Rôles (thème clair) */
  --as-color-primary: #1E56A3;          /* 7,2:1 sur blanc */
  --as-color-primary-hover: #17447F;
  --as-color-primary-soft: #E7EEF8;     /* fond d'élément actif */
  --as-color-on-primary: #FFFFFF;
  --as-color-accent: #EC9A02;           /* filets, indicateurs, jamais du texte */
  --as-color-accent-text: #8A5200;      /* texte orangé : 6,4:1 sur blanc */
  --as-color-bg: #F5F7FA;
  --as-color-surface: #FFFFFF;
  --as-color-surface-muted: #F1F3F6;
  --as-color-text: #1F2937;
  --as-color-text-muted: #5B6475;       /* 6,0:1 sur blanc */
  --as-color-border: #D9DEE7;
  --as-color-border-strong: #8792A6;    /* bord des champs : ≥ 3:1 */
  --as-color-focus: #1E56A3;
  --as-color-overlay: rgb(15 23 38 / 0.45);
  --as-color-logo-plate: transparent;   /* fond derrière le logo */

  /* Statuts : texte / fond. Toujours accompagnés d'un libellé (pas la couleur seule). */
  --as-status-success: #17663A;  --as-status-success-bg: #DFF5E6;
  --as-status-warning: #7A5300;  --as-status-warning-bg: #FFF4D6;
  --as-status-danger:  #B42318;  --as-status-danger-bg:  #FBE9E9;
  --as-status-info:    #174A8F;  --as-status-info-bg:    #E7EEF8;
  --as-status-neutral: #5B6475;  --as-status-neutral-bg: #EEF1F5;

  /* Typographie : Inter (latin) et Noto Sans Arabic (arabe), hébergées avec l'application. */
  --as-font-sans: "Inter Variable", "Inter", "Noto Sans Arabic Variable", "Noto Sans Arabic", system-ui, "Segoe UI", sans-serif;
  --as-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --as-font-size-xs: 12px;   /* mentions, badges */
  --as-font-size-sm: 13px;   /* aides, métadonnées */
  --as-font-size-md: 15px;   /* tableaux et champs */
  --as-font-size-base: 16px; /* texte courant */
  --as-font-size-lg: 18px;   /* titre de carte */
  --as-font-size-xl: 20px;   /* titre de section */
  --as-font-size-2xl: 24px;  /* titre de page */
  --as-font-size-3xl: 32px;  /* écran de connexion, tableau de bord */
  --as-font-weight-regular: 400;
  --as-font-weight-medium: 500;
  --as-font-weight-semibold: 600;
  --as-font-weight-bold: 700;
  --as-line-height: 1.5;
  --as-line-height-tight: 1.25;

  /* Espacements : base 4 px */
  --as-space-1: 4px;  --as-space-2: 8px;  --as-space-3: 12px; --as-space-4: 16px;
  --as-space-5: 20px; --as-space-6: 24px; --as-space-8: 32px; --as-space-12: 48px;

  /* Formes */
  --as-radius-sm: 4px;  --as-radius-md: 6px; --as-radius-lg: 8px; --as-radius-xl: 12px; --as-radius-pill: 999px;
  --as-shadow-sm: 0 1px 2px rgb(15 23 38 / 0.06);
  --as-shadow-md: 0 4px 12px rgb(15 23 38 / 0.10);
  --as-shadow-lg: 0 12px 32px rgb(15 23 38 / 0.18);
  --as-focus-ring: 0 0 0 2px var(--as-color-surface), 0 0 0 4px var(--as-color-focus);

  /* Dimensions des composants */
  --as-control-height: 36px;
  --as-control-height-sm: 32px;
  --as-table-row-height: 44px;
  --as-table-row-height-dense: 36px;
  --as-header-height: 56px;
  --as-sidebar-width: 248px;
  --as-sidebar-width-collapsed: 64px;
  --as-modal-width: 560px;
  --as-content-max-width: 1280px;
  --as-logo-full-min-width: 120px;
  --as-logo-symbol-min-size: 24px;

  /* Points de rupture (référence ; les media queries ne lisent pas les variables) :
     mobile < 600 px, tablette 600–899 px, bureau ≥ 900 px, large ≥ 1280 px. */
  --as-bp-sm: 600px; --as-bp-md: 900px; --as-bp-lg: 1280px;

  /* Animations */
  --as-duration-fast: 120ms;
  --as-duration-base: 200ms;
  --as-easing: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;
}

/* Thème sombre : mêmes rôles, valeurs ajustées pour garder AA. */
:root[data-theme="dark"] {
  --as-color-primary: #8DB4EC;          /* 8,4:1 sur le fond sombre */
  --as-color-primary-hover: #A9C7F2;
  --as-color-primary-soft: #1D2D4A;
  --as-color-on-primary: #0F1726;
  --as-color-accent: #EC9A02;
  --as-color-accent-text: #F2B544;
  --as-color-bg: #0F1726;
  --as-color-surface: #172033;
  --as-color-surface-muted: #1D2840;
  --as-color-text: #E6EAF2;
  --as-color-text-muted: #A3ACBC;
  --as-color-border: #2B3A55;
  --as-color-border-strong: #6B7890;
  --as-color-focus: #8DB4EC;
  --as-color-overlay: rgb(0 0 0 / 0.6);
  --as-color-logo-plate: #FFFFFF;       /* le logo officiel est posé sur une plaque blanche */
  --as-status-success: #6FCF97;  --as-status-success-bg: #133524;
  --as-status-warning: #F2C14E;  --as-status-warning-bg: #3A2E10;
  --as-status-danger:  #F28B82;  --as-status-danger-bg:  #3D1C1A;
  --as-status-info:    #8DB4EC;  --as-status-info-bg:    #1D2D4A;
  --as-status-neutral: #A3ACBC;  --as-status-neutral-bg: #232E44;
  --as-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --as-shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
  --as-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --as-color-primary: #8DB4EC; --as-color-primary-hover: #A9C7F2; --as-color-primary-soft: #1D2D4A;
    --as-color-on-primary: #0F1726; --as-color-accent-text: #F2B544;
    --as-color-bg: #0F1726; --as-color-surface: #172033; --as-color-surface-muted: #1D2840;
    --as-color-text: #E6EAF2; --as-color-text-muted: #A3ACBC; --as-color-border: #2B3A55;
    --as-color-border-strong: #6B7890; --as-color-focus: #8DB4EC; --as-color-overlay: rgb(0 0 0 / 0.6);
    --as-color-logo-plate: #FFFFFF;
    --as-status-success: #6FCF97;  --as-status-success-bg: #133524;
    --as-status-warning: #F2C14E;  --as-status-warning-bg: #3A2E10;
    --as-status-danger:  #F28B82;  --as-status-danger-bg:  #3D1C1A;
    --as-status-info:    #8DB4EC;  --as-status-info-bg:    #1D2D4A;
    --as-status-neutral: #A3ACBC;  --as-status-neutral-bg: #232E44;
    --as-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --as-shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --as-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --as-duration-fast: 0ms; --as-duration-base: 0ms; }
}