/**
 * Gourmand Typography System
 *
 * Single source of truth for all typography across the theme and plugins.
 * Edit values here to change typography site-wide.
 *
 * MOBILE-FIRST APPROACH:
 * - Base :root values are for mobile (smallest screens)
 * - min-width: 768px scales up for tablet
 * - min-width: 1024px scales up for desktop
 *
 * Structure:
 * - Font Families
 * - Font Weights
 * - Colors
 * - Type Scale (mobile base, with tablet/desktop scale-ups)
 * - Line Heights
 * - Letter Spacing
 * - Semantic Type Classes
 */

:root {
    /* ========================================
       FONT FAMILIES
       ======================================== */

    --font-heading: 'Lusitana', Georgia, serif;
    --font-body: 'Lusitana', Georgia, serif;
    --font-meta: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-nav: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


    /* ========================================
       FONT WEIGHTS
       ======================================== */

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;


    /* ========================================
       TYPOGRAPHY COLORS
       ======================================== */

    --color-heading: #333;
    --color-body: #555;
    --color-meta: #333;
    --color-nav: #fff;
    --color-copyright: #333;


    /* ========================================
       TYPE SCALE - MOBILE BASE (< 768px)
       Smallest sizes. Tablet/desktop scale up.
       ======================================== */

    /* Headings / Titles */
    --heading-xl: 2.0rem;
    --heading-l: 1.75rem;
    --heading-m: 1.5rem;
    --heading-s: 1.25rem;
    --heading-xs: 1.1rem;
    --heading-xxs: 1.0rem;

    /* Body Text */
    --body-l: 1.0rem;
    --body-m: 0.95rem;
    --body-s: 0.875rem;

    /* Meta / Labels */
    --meta-m: 0.85rem;
    --meta-s: 0.7rem;

    /* Navigation / UI */
    --nav-m: 0.9rem;

    /* Caption */
    --caption: 0.75rem;

    /* Logo */
    --logo: 1.4rem;


    /* ========================================
       LINE HEIGHTS
       ======================================== */

    --leading-heading-tight: 1.2;    /* For xl, l, m headings */
    --leading-heading-normal: 1.3;   /* For s, xs headings */
    --leading-body-relaxed: 1.8;     /* For body-l */
    --leading-body-normal: 1.6;      /* For body-m */
    --leading-body-tight: 1.4;       /* For body-s, meta, caption */
    --leading-nav: 1.6;              /* For navigation */


    /* ========================================
       LETTER SPACING
       ======================================== */

    --tracking-meta: 0.05em;         /* For meta labels (uppercase) */
    --tracking-nav: 0.1em;           /* For navigation (uppercase) */
    --tracking-normal: 0;            /* For body/headings */
}


/* ============================================
   TABLET (768px+)
   Scale up from mobile base
   ============================================ */

@media (min-width: 768px) {
    :root {
        /* Scale up headings for tablet */
        --heading-xl: 2.5rem;
        --heading-l: 2.0rem;
        --heading-m: 1.75rem;
        --heading-s: 1.375rem;
        --heading-xs: 1.125rem;
        --heading-xxs: 1.0rem;

        /* Body slightly larger on tablet */
        --body-l: 1.05rem;
        --body-m: 1.0rem;
        --body-s: 0.9rem;

        /* Logo larger on tablet */
        --logo: 1.6rem;
    }
}


/* ============================================
   DESKTOP (1024px+)
   Scale up from tablet
   ============================================ */

@media (min-width: 1024px) {
    :root {
        /* Full-size headings for desktop */
        --heading-xl: 3.0rem;
        --heading-l: 2.5rem;
        --heading-m: 2.0rem;
        --heading-s: 1.5rem;
        --heading-xs: 1.25rem;
        --heading-xxs: 1.125rem;

        /* Full-size body for desktop */
        --body-l: 1.1rem;
        --body-m: 1.0rem;
        --body-s: 0.9rem;

        /* Full-size logo for desktop */
        --logo: 1.8rem;
    }
}


/* ============================================
   SEMANTIC TYPE CLASSES

   Use these classes directly on elements, or
   reference the variables in component CSS.
   ============================================ */

/* --- Headings / Titles --- */

.type-heading-xl {
    font-family: var(--font-heading);
    font-size: var(--heading-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--color-heading);
}

.type-heading-l {
    font-family: var(--font-heading);
    font-size: var(--heading-l);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--color-heading);
}

.type-heading-m {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--color-heading);
}

.type-heading-s {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--color-heading);
}

.type-heading-xs {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--color-heading);
}

.type-heading-xxs {
    font-family: var(--font-heading);
    font-size: var(--heading-xxs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--color-heading);
}


/* --- Body Text --- */

.type-body-l {
    font-family: var(--font-body);
    font-size: var(--body-l);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body-relaxed);
    letter-spacing: var(--tracking-normal);
    color: var(--color-body);
}

.type-body-m {
    font-family: var(--font-body);
    font-size: var(--body-m);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--color-body);
}

.type-body-s {
    font-family: var(--font-body);
    font-size: var(--body-s);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--color-body);
}


/* --- Meta / Labels --- */

.type-meta-m {
    font-family: var(--font-meta);
    font-size: var(--meta-m);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body-tight);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-meta);
}

.type-meta-s {
    font-family: var(--font-meta);
    font-size: var(--meta-s);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body-tight);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-meta);
}


/* --- Navigation --- */

.type-nav {
    font-family: var(--font-nav);
    font-size: var(--nav-m);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-nav);
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    color: var(--color-nav);
}


/* --- Copyright --- */

.type-copyright {
    font-family: var(--font-nav);
    font-size: var(--nav-m);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-nav);
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    color: var(--color-copyright);
}


/* --- Caption --- */

.type-caption {
    font-family: var(--font-body);
    font-size: var(--caption);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--color-body);
}


/* --- Logo --- */

.type-logo {
    font-family: var(--font-heading);
    font-size: var(--logo);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--color-heading);
}