/* ===================================================================
   GLOBAL TYPOGRAPHY SYSTEM
   Base transition: Outfit & Playfair Display / Manrope
   Inspiration: Frontend Design Skill - High-end Editorial
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Manrope:wght@300;400;600;800&family=Outfit:wght@300;400;600;800&display=swap');

:root {
    /* Fonts Families */
    --font-primary: 'Outfit', sans-serif;
    --font-secondary: 'Manrope', sans-serif;
    --font-editorial: 'Playfair Display', serif;

    /* Typo Scales (Desktop) */
    --fs-display-1: clamp(4rem, 10vw, 8rem);
    --fs-display-2: clamp(3rem, 7vw, 5.5rem);
    --fs-display-3: clamp(2rem, 5vw, 4rem);
    --fs-h1: 3.5rem;
    --fs-h2: 2.8rem;
    --fs-h3: 2.2rem;
    --fs-lead: 1.5rem;
    --fs-base: 1rem;
    --fs-small: 0.85rem;
    --fs-mini: 0.75rem;

    /* Letter Spacing */
    --ls-tight: -0.05rem;
    --ls-base: 0;
    --ls-wide: 0.2rem;
    --ls-widest: 0.5rem;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .display-1, .display-2 {
    font-family: var(--font-primary);
    font-weight: 800;
}

.font-editorial { font-family: var(--font-editorial); }
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

.italic { font-style: italic; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }