/* =============================================================================
   ALVINAH PARTNERS — Site vitrine V2
   tokens.css · variables CSS (couleurs, typo, espacements, effets)
   Source : BRIEF_VITRINE.md V1.0 — 2026-04-29
   ============================================================================= */


/* ============================================================================
   POLICES — self-hosted woff2 (V1.1 : assets fournis par Vincent)
   ============================================================================ */

@font-face {
    font-family: 'Great Vibes';
    src: url('../fonts/GreatVibes-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}


/* ============================================================================
   TOKENS — Design System V2 (BRIEF_VITRINE §3)
   ============================================================================ */
:root {

    /* ---------------------------------------------------------------
       1. Palette de couleurs
       --------------------------------------------------------------- */

    /* Fond principal */
    --color-bg-primary:     #0E1922;
    --color-bg-darker:      #000000;
    --color-bg-card:        #162030;

    /* Accents */
    --color-accent-blue:        #2C6FAD;
    --color-accent-blue-soft:   #2C6FAD33;   /* 20% — fonds boutons subtils */
    --color-accent-blue-radial: #2C6FAD55;   /* 33% — centre du halo radial */

    /* Logo & taupe */
    --color-taupe:          #D4C4A8;         /* taupe clair — titres calligraphie */
    --color-taupe-dim:      #958F85;         /* taupe d'origine logo SVG */

    /* Textes */
    --color-text-primary:    #FFFFFF;
    --color-text-secondary:  #E8DCC4;        /* taupe doux */
    --color-text-muted:      #8FA0B4;
    --color-text-faint:      #5A6B82;

    /* Bordures */
    --color-border-faint:    #FFFFFF1A;      /* 10% blanc */
    --color-border-soft:     #FFFFFF33;      /* 20% — boutons hover */


    /* ---------------------------------------------------------------
       2. Typographies
       --------------------------------------------------------------- */
    --font-calligraphy: 'Great Vibes', cursive;
    --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Échelle typographique (mobile-first) */
    --fs-hero-calli:     clamp(32px, 6vw, 64px);    /* phrase calligraphique */
    --fs-section-title:  clamp(22px, 3vw, 40px);    /* H1 — UNE AUTRE LECTURE */
    --fs-h2:             clamp(18px, 2vw, 28px);
    --fs-label:          clamp(13px, 1vw, 15px);    /* BUDGET ESTIMÉ, eyebrows */
    --fs-body-italic:    clamp(16px, 1.4vw, 20px);  /* cartes "Une autre lecture" */
    --fs-body:           clamp(15px, 1.1vw, 17px);
    --fs-caption:        clamp(11px, 0.9vw, 13px);  /* mentions / disclaimers */
    --fs-trajectory-num: clamp(32px, 3.5vw, 48px);

    /* Poids */
    --fw-extralight: 200;
    --fw-light:      300;
    --fw-regular:    400;

    /* Letter-spacing */
    --ls-tracked:    0.25em;
    --ls-wide:       0.15em;
    --ls-narrow:     0.1em;

    /* Line-height */
    --lh-heading:    1.2;
    --lh-body:       1.6;


    /* ---------------------------------------------------------------
       3. Espacements & layout
       --------------------------------------------------------------- */
    --container-max:           1200px;
    --container-narrow:        900px;
    --container-wide:          1392px;

    --section-spacing:         120px;
    --section-spacing-mobile:  64px;

    --card-padding:            48px;
    --card-padding-mobile:     24px;

    --viewport-padding:           24px;
    --viewport-padding-desktop:   80px;


    /* ---------------------------------------------------------------
       4. Border-radius
       --------------------------------------------------------------- */
    --radius-card:   24px;
    --radius-pill:   999px;
    --radius-input:  12px;


    /* ---------------------------------------------------------------
       5. Effets
       --------------------------------------------------------------- */
    /* Glow logo — atténué de ~33% (V1.5) puis -20% supplémentaire (V1.6)
       (option fallback : isoler le glow aux paths 'AVH' du SVG demanderait
       soit d'inliner le SVG, soit de modifier les fichiers .svg). */
    --glow-logo:        0 0 13px rgba(212, 196, 168, 0.14);
    --glow-logo-peak:   0 0 32px rgba(212, 196, 168, 0.22);
    --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.15);
    --backdrop-blur:    blur(12px);


    /* ---------------------------------------------------------------
       6. Transitions
       --------------------------------------------------------------- */
    --easing-default:    cubic-bezier(0.4, 0, 0.2, 1);
    --easing-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast:   150ms var(--easing-default);
    --transition:        300ms var(--easing-default);
    --transition-slow:   500ms var(--easing-default);
    --transition-hover:  200ms ease-out;


    /* ---------------------------------------------------------------
       7. Z-index
       --------------------------------------------------------------- */
    --z-decor:    -1;
    --z-base:      1;
    --z-overlay:   10;
    --z-menu:      100;
    --z-skip:      90;
    --z-modal:     1000;
}