/**
 * tokens.css — Variables CSS globales
 * Hors-Champ Studio 3.0
 *
 * Source unique de vérité pour toutes les valeurs de design :
 * couleurs, typographie, espacements, animations, border-radius.
 */

:root {

    /* ──────────────────────────────
       PALETTE COULEURS
    ────────────────────────────── */

    /* Couleurs de marque */
    --color-accent:        #FF3D00;   /* CTA principal — bouton rouge-orangé */
    --color-accent-hover:  #e03600;   /* Hover CTA */

    /* Neutres sombres */
    --color-dark-900:      #1a1a1a;   /* Texte principal */
    --color-dark-800:      #2A0800;   /* Fond pastille catégorie */
    --color-dark-700:      #333333;

    /* Neutres clairs */
    --color-light-100:     #FFFFFF;
    --color-light-200:     #FDF7F0;   /* Fond hover éléments */
    --color-light-300:     #EBE0D1;   /* Pastille label projet */
    --color-light-400:     #E9E0D3;   /* Fond pôles */
    --color-light-500:     #e5e5e5;   /* Bordures, séparateurs */

    /* Couleur secondaire */
    --color-teal:          #104F55;   /* Hover pastille catégorie */

    /* Utilitaires */
    --color-muted:         #666666;
    --color-subtle:        #999999;

    /* ──────────────────────────────
       TYPOGRAPHIE
    ────────────────────────────── */

    --font-serif:          'Instrument Serif', Georgia, serif;
    --font-sans:           'Inter', system-ui, sans-serif;

    /* Tailles de base (rem, base 16px) */
    --text-xs:   0.75rem;   /*  12px */
    --text-sm:   0.875rem;  /*  14px */
    --text-base: 1rem;      /*  16px */
    --text-md:   1.125rem;  /*  18px */
    --text-lg:   1.5rem;    /*  24px */
    --text-xl:   2rem;      /*  32px */
    --text-2xl:  2.5rem;    /*  40px */
    --text-3xl:  3rem;      /*  48px */
    --text-4xl:  4rem;      /*  64px */

    /* Poids */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;

    /* Interlignage */
    --leading-tight:   1.2;
    --leading-normal:  1.5;
    --leading-relaxed: 1.6;

    /* Letter-spacing */
    --tracking-tight: -0.04em;
    --tracking-normal: 0;

    /* ──────────────────────────────
       ESPACEMENTS
    ────────────────────────────── */

    --space-1:   0.25rem;  /*  4px */
    --space-2:   0.5rem;   /*  8px */
    --space-3:   0.75rem;  /* 12px */
    --space-4:   1rem;     /* 16px */
    --space-5:   1.25rem;  /* 20px */
    --space-6:   1.5rem;   /* 24px */
    --space-8:   2rem;     /* 32px */
    --space-10:  2.5rem;   /* 40px */
    --space-12:  3rem;     /* 48px */
    --space-16:  4rem;     /* 64px */
    --space-20:  5rem;     /* 80px */

    /* ──────────────────────────────
       BORDER RADIUS
    ────────────────────────────── */

    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-pill:  100px;
    --radius-full:  9999px;

    /* ──────────────────────────────
       OMBRES
    ────────────────────────────── */

    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.12);

    /* ──────────────────────────────
       ANIMATIONS
    ────────────────────────────── */

    --ease-bounce:    cubic-bezier(0.34, 1.2, 0.64, 1);
    --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:       cubic-bezier(0, 0, 0.2, 1);

    --duration-fast:    0.15s;
    --duration-normal:  0.3s;
    --duration-slow:    0.5s;
    --duration-xslow:   0.8s;

    /* ──────────────────────────────
       HEADER
    ────────────────────────────── */

    --header-width-closed:     360px;
    --header-height-closed:    30px;
    --header-width-open:       50vw;
    --header-height-open:      420px;
    --header-padding-closed:   var(--space-4) var(--space-6);
    --header-padding-open:     var(--space-8) var(--space-12);
    --header-top:              20px;
    --header-z:                1000;
    --overlay-z:               999;

    /* ──────────────────────────────
       OVERLAY
    ────────────────────────────── */

    --overlay-bg:   rgba(0, 0, 0, 0.4);
    --overlay-blur: 4px;
}