/* ==========================================================================
   NUNITO — Self-Hosted Web Font System
   Primary and sole typeface for PlugIQ.
   Files live in assets/fonts/ (Latin subset, weights 300–900).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */

:root {
  --font-avenir: "Nunito", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Helvetica, Arial, sans-serif;

  /* Weight tokens */
  --font-weight-light:    300;
  --font-weight-book:     400;
  --font-weight-roman:    400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-heavy:    800;
  --font-weight-black:    900;

  /* Type scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */

  /* Line height tokens */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  /* Letter spacing tokens */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;
}


/* --------------------------------------------------------------------------
   2. @FONT-FACE DECLARATIONS — Nunito (Latin subset)
   -------------------------------------------------------------------------- */

/* 300 Light */
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/nunito-latin-300-normal.woff2') format('woff2'),
       url('../fonts/nunito-latin-300-normal.woff')  format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/nunito-latin-300-italic.woff2') format('woff2'),
       url('../fonts/nunito-latin-300-italic.woff')  format('woff');
}

/* 400 Regular */
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2'),
       url('../fonts/nunito-latin-400-normal.woff')  format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-latin-400-italic.woff2') format('woff2'),
       url('../fonts/nunito-latin-400-italic.woff')  format('woff');
}

/* 500 Medium */
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/nunito-latin-500-normal.woff2') format('woff2'),
       url('../fonts/nunito-latin-500-normal.woff')  format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/nunito-latin-500-italic.woff2') format('woff2'),
       url('../fonts/nunito-latin-500-italic.woff')  format('woff');
}

/* 600 SemiBold */
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2'),
       url('../fonts/nunito-latin-600-normal.woff')  format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-latin-600-italic.woff2') format('woff2'),
       url('../fonts/nunito-latin-600-italic.woff')  format('woff');
}

/* 700 Bold */
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2'),
       url('../fonts/nunito-latin-700-normal.woff')  format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-latin-700-italic.woff2') format('woff2'),
       url('../fonts/nunito-latin-700-italic.woff')  format('woff');
}

/* 800 ExtraBold */
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2'),
       url('../fonts/nunito-latin-800-normal.woff')  format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-latin-800-italic.woff2') format('woff2'),
       url('../fonts/nunito-latin-800-italic.woff')  format('woff');
}

/* 900 Black */
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/nunito-latin-900-normal.woff2') format('woff2'),
       url('../fonts/nunito-latin-900-normal.woff')  format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/nunito-latin-900-italic.woff2') format('woff2'),
       url('../fonts/nunito-latin-900-italic.woff')  format('woff');
}


/* --------------------------------------------------------------------------
   3. BASE STYLES
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-book);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* --------------------------------------------------------------------------
   4. HEADING DEFAULTS
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-avenir);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-heavy); }
h2 { font-size: var(--text-3xl); font-weight: var(--font-weight-heavy); }
h3 { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--text-xl);  font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--text-lg);  font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--text-base);font-weight: var(--font-weight-semibold); }


/* --------------------------------------------------------------------------
   5. WEIGHT UTILITY CLASSES
   -------------------------------------------------------------------------- */

.nunito                { font-family: var(--font-avenir); }
.nunito-light          { font-family: var(--font-avenir); font-weight: 300; font-style: normal; }
.nunito-light-italic   { font-family: var(--font-avenir); font-weight: 300; font-style: italic; }
.nunito-regular        { font-family: var(--font-avenir); font-weight: 400; font-style: normal; }
.nunito-italic         { font-family: var(--font-avenir); font-weight: 400; font-style: italic; }
.nunito-medium         { font-family: var(--font-avenir); font-weight: 500; font-style: normal; }
.nunito-medium-italic  { font-family: var(--font-avenir); font-weight: 500; font-style: italic; }
.nunito-semibold       { font-family: var(--font-avenir); font-weight: 600; font-style: normal; }
.nunito-semibold-italic{ font-family: var(--font-avenir); font-weight: 600; font-style: italic; }
.nunito-bold           { font-family: var(--font-avenir); font-weight: 700; font-style: normal; }
.nunito-bold-italic    { font-family: var(--font-avenir); font-weight: 700; font-style: italic; }
.nunito-extrabold      { font-family: var(--font-avenir); font-weight: 800; font-style: normal; }
.nunito-extrabold-italic{ font-family: var(--font-avenir); font-weight: 800; font-style: italic; }
.nunito-black          { font-family: var(--font-avenir); font-weight: 900; font-style: normal; }
.nunito-black-italic   { font-family: var(--font-avenir); font-weight: 900; font-style: italic; }

/* Legacy avenir class aliases — keeps existing markup working */
.avenir                { font-family: var(--font-avenir); }
.avenir-light          { font-family: var(--font-avenir); font-weight: 300; font-style: normal; }
.avenir-light-oblique  { font-family: var(--font-avenir); font-weight: 300; font-style: italic; }
.avenir-book           { font-family: var(--font-avenir); font-weight: 400; font-style: normal; }
.avenir-book-oblique   { font-family: var(--font-avenir); font-weight: 400; font-style: italic; }
.avenir-roman          { font-family: var(--font-avenir); font-weight: 500; font-style: normal; }
.avenir-oblique        { font-family: var(--font-avenir); font-weight: 500; font-style: italic; }
.avenir-medium         { font-family: var(--font-avenir); font-weight: 600; font-style: normal; }
.avenir-medium-oblique { font-family: var(--font-avenir); font-weight: 600; font-style: italic; }
.avenir-heavy          { font-family: var(--font-avenir); font-weight: 800; font-style: normal; }
.avenir-heavy-oblique  { font-family: var(--font-avenir); font-weight: 800; font-style: italic; }
.avenir-black          { font-family: var(--font-avenir); font-weight: 900; font-style: normal; }
.avenir-black-oblique  { font-family: var(--font-avenir); font-weight: 900; font-style: italic; }


/* --------------------------------------------------------------------------
   6. SIZE UTILITY CLASSES
   -------------------------------------------------------------------------- */

.text-xs   { font-size: var(--text-xs);   line-height: var(--leading-normal); }
.text-sm   { font-size: var(--text-sm);   line-height: var(--leading-normal); }
.text-base { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-md   { font-size: var(--text-md);   line-height: var(--leading-snug);   }
.text-lg   { font-size: var(--text-lg);   line-height: var(--leading-snug);   }
.text-xl   { font-size: var(--text-xl);   line-height: var(--leading-snug);   }
.text-2xl  { font-size: var(--text-2xl);  line-height: var(--leading-tight);  }
.text-3xl  { font-size: var(--text-3xl);  line-height: var(--leading-tight);  }
.text-4xl  { font-size: var(--text-4xl);  line-height: var(--leading-tight);  }
.text-5xl  { font-size: var(--text-5xl);  line-height: var(--leading-tight);  }


/* --------------------------------------------------------------------------
   7. LETTER-SPACING UTILITY CLASSES
   -------------------------------------------------------------------------- */

.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight);   }
.tracking-normal  { letter-spacing: var(--tracking-normal);  }
.tracking-wide    { letter-spacing: var(--tracking-wide);    }
.tracking-wider   { letter-spacing: var(--tracking-wider);   }
.tracking-widest  { letter-spacing: var(--tracking-widest);  }


/* --------------------------------------------------------------------------
   8. LINE-HEIGHT UTILITY CLASSES
   -------------------------------------------------------------------------- */

.leading-tight   { line-height: var(--leading-tight);   }
.leading-snug    { line-height: var(--leading-snug);    }
.leading-normal  { line-height: var(--leading-normal);  }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose);   }


/* --------------------------------------------------------------------------
   9. FLUID / RESPONSIVE TYPE UTILITIES
   -------------------------------------------------------------------------- */

.fluid-h1 {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-heavy);
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.fluid-h2 {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-heavy);
  font-size: clamp(1.5rem, 3vw + 0.75rem, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.fluid-h3 {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(1.25rem, 2vw + 0.5rem, 2.25rem);
  line-height: var(--leading-snug);
}

.fluid-body {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-book);
  font-size: clamp(0.9375rem, 1vw + 0.5rem, 1.125rem);
  line-height: var(--leading-relaxed);
}


/* --------------------------------------------------------------------------
   10. COMMON UI PATTERNS
   -------------------------------------------------------------------------- */

.avenir-eyebrow {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.avenir-display {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-black);
  font-size: clamp(2.5rem, 6vw + 1rem, 5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.avenir-subheading {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-roman);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

.avenir-caption {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-book);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-wide);
}

.avenir-label {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
}

.avenir-quote {
  font-family: var(--font-avenir);
  font-weight: var(--font-weight-light);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
}


/* --------------------------------------------------------------------------
   11. PRINT STYLES
   -------------------------------------------------------------------------- */

@media print {
  body {
    font-family: var(--font-avenir);
    font-size: 11pt;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  h1 { font-size: 24pt; font-weight: 800; }
  h2 { font-size: 18pt; font-weight: 800; }
  h3 { font-size: 14pt; font-weight: 600; }
  h4 { font-size: 12pt; font-weight: 600; }
}