/* ============================================
   TYPOGRAPHY SYSTEM - BREIZHIT V3.1
   
   Fonts hiérarchie :
   - Geist : Titres, Hero, Headers (moderne, tech)
   - Satoshi : Paragraphes, contenu (lisibilité optimale)
   - Aeonik/Geist : Branding & CTA (impact visuel)
   ============================================ */

/* ============================================
   VARIABLES TYPOGRAPHIQUES
   ============================================ */
:root {
    /* Font families */
    --font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-brand: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
}

/* ============================================
   BASE TYPOGRAPHY - PARAGRAPHES (SATOSHI)
   ============================================ */
body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p, li, span, .text-body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
}

/* ============================================
   HEADINGS - TITRES (GEIST)
   ============================================ */
h1, h2, h3, h4, h5, h6,
.heading,
.title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--fw-bold);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--fw-bold);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--fw-semibold);
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: var(--fw-semibold);
}

/* ============================================
   HERO SECTION (GEIST)
   ============================================ */
.hero-content h1,
.hero-title,
#home h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
}

.hero-description,
.hero-content p {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    line-height: 1.7;
}

/* ============================================
   BRANDING - LOGO (GEIST)
   ============================================ */
.brand-title,
.brand-breizh,
.brand-it {
    font-family: var(--font-brand);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
}

/* ============================================
   CTA & BUTTONS (GEIST - IMPACT)
   ============================================ */
.btn-primary,
.cta-button,
.cta-secondary,
button,
.btn {
    font-family: var(--font-brand);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}

/* ============================================
   NAVIGATION (SATOSHI - LISIBILITÉ)
   ============================================ */
nav a,
.nav-link,
.menu-desktop-1000 a {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
}

/* ============================================
   SECTIONS TITRES (GEIST)
   ============================================ */
.section-title,
.card-title,
.service-title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

/* ============================================
   TEXTES SPÉCIAUX
   ============================================ */
.text-accent,
.hero-accent {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

.text-neutral,
.hero-neutral {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

/* Badge Agence Digitale */
.badge,
span.text-sm {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    
    h1 {
        letter-spacing: -0.02em;
    }
}

/* ============================================
   OPTIMISATIONS PERFORMANCE
   ============================================ */
@supports (font-variation-settings: normal) {
    :root {
        font-feature-settings: "liga" 1, "calt" 1;
    }
}