/* ============================================================================
   AFY — DESIGN TOKENS — AF-40 (Charte visuelle finalisée)
   ============================================================================

   Fichier autonome : aucune dépendance vers afy.css / style.css.
   Les valeurs hexadécimales sont dupliquées (volontairement) plutôt que
   référencées par var(), afin que l'ordre de chargement n'ait pas d'impact.

   Structure :
     1. Palette PUBLIC  (Direction A « Récit & Impact », cf. afy.css)
     2. Palette ADMIN   (Dashboard SaaS, cf. style.css)
     3. Échelle d'espacements (base 4px)  — transverse
     4. Échelle typographique modulaire    — transverse
     5. Familles de polices                 — public + admin
     6. Rayons                              — public + admin
     7. Ombres                              — public + admin
     8. Transitions                         — transverse

   Documentation détaillée :
     - spec/AF-40/AF-40.md
     - spec/AF-40/AF-40-tokens.md
     - spec/AF-40/AF-40-components.md
     - spec/AF-40/charte-demo.html (preview locale)

   Les anciens noms (--afy-blue-*, --paper, etc.) restent définis dans
   afy.css / style.css et continuent de fonctionner sans modification.
   Les tokens ci-dessous sont des ALIAS SÉMANTIQUES additionnels.
============================================================================ */

:root {
    /* ========================================================================
       1. PALETTE PUBLIC (Direction A — Récit & Impact)
       ======================================================================== */

    /* Fonds */
    --public-color-bg:         #fbf7f1; /* paper, fond principal             */
    --public-color-bg-alt:     #f3ebdd; /* paper-2, fond secondaire / cartes */
    --public-color-bg-deep:    #2c241d; /* deep, fond contrasté (héros)      */

    /* Texte */
    --public-color-text:       #241d18; /* ink, texte principal              */
    --public-color-text-muted: #6f6155; /* muted, texte secondaire           */
    --public-color-text-on-deep: #fbf7f1; /* texte sur fond deep            */

    /* Accent (terracotta) — couleur primaire d'action */
    --public-color-primary:        #df6420; /* accent                         */
    --public-color-primary-strong: #b94e12; /* accent-700 (hover)             */
    --public-color-primary-deep:   #933d0d; /* accent-800 (active / focus)    */

    /* Secondaire (terra) — surfaces, accents subtils */
    --public-color-secondary:  #9c4a26;

    /* Sémantique */
    --public-color-success:    #3f7d3a; /* ok                                 */
    --public-color-warning:    #b94e12; /* (alias accent-700, à confirmer)    */
    --public-color-danger:     #9c4a26; /* (alias terra, à confirmer)         */

    /* Bordures / placeholders */
    --public-color-border:     #e7ddca; /* line                               */
    --public-color-placeholder-bg:  #e4d8c2; /* ph                            */
    --public-color-placeholder-ink: #998963; /* ph-ink                        */


    /* ========================================================================
       2. PALETTE ADMIN (Dashboard SaaS)
       ======================================================================== */

    /* Primaire (vert AFY actuel — note : nommés "blue" pour raisons legacy) */
    --admin-color-primary:        #19bf66; /* afy-blue-700                    */
    --admin-color-primary-strong: #0d8b11; /* afy-blue-900 (hover, active)    */
    --admin-color-primary-soft:   #5cd38be2; /* afy-blue-500 (highlights)     */

    /* Secondaire (orange) */
    --admin-color-secondary:        #f28d1b; /* afy-orange-600                */
    --admin-color-secondary-soft:   #ffb01c; /* afy-orange-500                */

    /* Sémantique */
    --admin-color-success: #57b557; /* afy-green-500                          */
    --admin-color-warning: #ffb01c; /* afy-orange-500                         */
    --admin-color-danger:  #d35e9f; /* afy-pink-500                           */

    /* Neutres (slate) — 50 = clair, 950 = profond */
    --admin-color-neutral-0:    #ffffff;
    --admin-color-neutral-50:   #f6f8fb;
    --admin-color-neutral-100:  #eef3f8;
    --admin-color-neutral-200:  #d9e0ea;
    --admin-color-neutral-500:  #6a7890;
    --admin-color-neutral-700:  #33435d;
    --admin-color-neutral-800:  #18263d;
    --admin-color-neutral-900:  #101b2d;
    --admin-color-neutral-950:  #09111f;

    /* Alias usuels admin */
    --admin-color-bg:           #f6f8fb; /* page background                   */
    --admin-color-surface:      #ffffff; /* cards, modals                     */
    --admin-color-text:         #101b2d; /* corps de texte                    */
    --admin-color-text-muted:   #6a7890; /* texte secondaire                  */
    --admin-color-border:       #d9e0ea;


    /* ========================================================================
       3. ÉCHELLE D'ESPACEMENTS (base 4px) — transverse
       ======================================================================== */

    --space-0:  0;
    --space-1:  0.25rem;  /*   4px */
    --space-2:  0.5rem;   /*   8px */
    --space-3:  0.75rem;  /*  12px */
    --space-4:  1rem;     /*  16px */
    --space-5:  1.5rem;   /*  24px */
    --space-6:  2rem;     /*  32px */
    --space-7:  3rem;     /*  48px */
    --space-8:  4rem;     /*  64px */
    --space-9:  6rem;     /*  96px */
    --space-10: 8rem;     /* 128px */


    /* ========================================================================
       4. ÉCHELLE TYPOGRAPHIQUE MODULAIRE (ratio 1.25 — "Major Second")
       ======================================================================== */

    --text-xs:   0.75rem;   /* 12px — captions, badges                          */
    --text-sm:   0.875rem;  /* 14px — texte secondaire                          */
    --text-base: 1rem;      /* 16px — corps de texte                            */
    --text-lg:   1.125rem;  /* 18px — sous-titres                               */
    --text-xl:   1.25rem;   /* 20px — H4                                        */
    --text-2xl:  1.5rem;    /* 24px — H3                                        */
    --text-3xl:  1.875rem;  /* 30px — H2                                        */
    --text-4xl:  2.25rem;   /* 36px — H1 page                                   */
    --text-5xl:  3rem;      /* 48px — H1 héros                                  */

    /* Hauteurs de ligne */
    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;

    /* Poids */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;
    --weight-black:   800;


    /* ========================================================================
       5. FAMILLES DE POLICES
       ======================================================================== */

    /* Public — Direction A, éditorial */
    --font-public-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-public-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Admin — Dashboard SaaS */
    --font-admin-display: "Sora", system-ui, sans-serif;
    --font-admin-body:    "Manrope", system-ui, sans-serif;


    /* ========================================================================
       6. RAYONS
       ======================================================================== */

    --radius-public: 6px;      /* afy.css : --radius                            */

    --radius-sm: 12px;         /* style.css : --afy-radius-sm                   */
    --radius-md: 16px;         /* style.css : --afy-radius-md                   */
    --radius-lg: 22px;         /* style.css : --afy-radius-lg                   */
    --radius-xl: 30px;         /* style.css : --afy-radius-xl                   */
    --radius-full: 9999px;     /* badges, pills                                 */


    /* ========================================================================
       7. OMBRES
       ======================================================================== */

    --shadow-public: 0 8px 28px rgba(36, 29, 24, 0.12); /* afy.css : --shadow   */

    --shadow-sm: 0 10px 24px rgba(16, 27, 45, 0.08);    /* style.css            */
    --shadow-md: 0 18px 40px rgba(16, 27, 45, 0.12);
    --shadow-lg: 0 32px 80px rgba(9, 17, 31, 0.14);


    /* ========================================================================
       8. TRANSITIONS — transverse
       ======================================================================== */

    --transition-fast:  150ms ease;
    --transition-base:  220ms ease; /* alias style.css : --afy-transition     */
    --transition-slow:  400ms ease;
}