/* ============================================================
   PENNER COLLECTIVE — DESIGN TOKENS & STYLE GUIDE
   Extracted from pennercollective.com source HTML/CSS
   Drop this file into any project and reference the variables.
   ============================================================ */


/* ─────────────────────────────────────────────
   1. COLOR PALETTE
   ───────────────────────────────────────────── */
:root {

  /* Backgrounds */
  --pc-bg-cream:          rgba(242, 239, 234, 1);   /* #F2EFEA  — navbar, page cream */
  --pc-bg-white:          rgba(255, 255, 255, 1);   /* #FFFFFF  — section default */
  --pc-bg-warm-white:     rgba(251, 250, 248, 1);   /* #FBFAF8  — alternate section bg */
  --pc-bg-hero:           rgba(43,  43,  43,  1);   /* #2B2B2B  — hero dark bg */
  --pc-bg-dark:           rgba(45,  45,  45,  1);   /* #2D2D2D  — mobile menu / CTA btn */
  --pc-bg-peach:          #fdf6f0;   /* #2D2D2D  — mobile menu / CTA btn */

  /* Accent / Decorative */
  --pc-accent-peach:      rgba(253, 216, 188, 0.25);/* soft peach tint — testimonial, about panels */
  --pc-accent-taupe-bg:   rgba(216, 210, 203, 0.5); /* muted taupe overlay */

  /* Buttons */
  --pc-btn-contact:       rgba(166, 153, 142, 1);   /* #A6998E  — desktop "Contact" button */
  --pc-btn-dark:          rgba(45,  45,  45,  1);   /* #2D2D2D  — mobile / CTA buttons */
  --pc-btn-charcoal:      rgba(70,  76,  74,  1);   /* #464C4A  — desktop CTA button variant */

  /* Borders */
  --pc-border-dark:       rgba(45,  45,  45,  1);   /* outline button stroke */

  /* Text */
  --pc-text-light:        rgba(242, 239, 234, 1);   /* on dark backgrounds */
  --pc-text-dark:         rgba(43,  43,  43,  1);   /* #2B2B2B  — body copy on white */
  --pc-text-med:         rgba(45,  45,  45,  1); 
  --pc-text-muted-light:  rgba(255, 255, 255, 0.65);/* subdued on dark bg */

  /* Dropdown / Submenu */
  --pc-dropdown-bg:       rgba(242, 239, 234, 1);   /* same as --pc-bg-cream */
}


/* ─────────────────────────────────────────────
   2. TYPOGRAPHY
   ───────────────────────────────────────────── */

/* --- Font Families --- */
/*
  @font-face  Uniform           (custom woff) — brand display / labels / eyebrows
  Google Font Playfair Display  — headings / editorial serif
  Google Font Lato              — body copy / descriptive text
*/
@font-face {
  font-family: 'Uniform';
  src: url('/fonts/uniform_black_webfont.woff')  format('woff');
  font-weight: 400;
  font-display: swap;
}

:root {
  --pc-font-display:  'Playfair Display', Georgia, serif; /* headings */
  --pc-font-body:     'Lato', Helvetica, sans-serif;      /* body copy */
  --pc-font-label:    'Uniform', 'Lato', sans-serif;      /* eyebrows, nav links, caps labels */
}

/* --- Font Sizes (Desktop → Mobile) --- */
:root {
  /* Hero / Page Title */
  --pc-fs-hero-d:       63px;    /* desktop hero h1 */
  --pc-fs-hero-m:       32px;    /* mobile  hero h1 */

  /* Section Headings */
  --pc-fs-h2-xl-d:      57px;    /* "What it Entails" section title */
  --pc-fs-h2-xl-m:      46px;
  --pc-fs-h2-lg-d:      55px;    /* "The Process" section title */
  --pc-fs-h2-lg-m:      25px;
  --pc-fs-h2-d:         50px;    /* "If You're Ready" heading */
  --pc-fs-h2-m:         37px;
  --pc-fs-h2-sm-d:      47px;    /* "The Problem" heading */
  --pc-fs-h2-sm-m:      31px;

  /* Section Sub-headings */
  --pc-fs-h3-d:         35px;    /* testimonial quote, about-me heading */
  --pc-fs-h3-m:         23px;

  /* Mid-level Headings */
  --pc-fs-h4-d:         33px;    /* "Our Approach" heading */
  --pc-fs-h4-m:         24px;
  --pc-fs-h4-sm-d:      27px;    /* repeated sub-headings */
  --pc-fs-h4-sm-m:      27px;

  /* Process Step Titles */
  --pc-fs-step-d:       23px;
  --pc-fs-step-m:       23px;

  /* Body Copy */
  --pc-fs-body-d:       19px;    /* primary body text on desktop */
  --pc-fs-body-m:       15px;
  --pc-fs-body-sm-d:    15px;    /* secondary / smaller body */
  --pc-fs-body-sm-m:    14px;

  /* Small / Feature Lists */
  --pc-fs-feature-d:    14px;
  --pc-fs-feature-m:    12px;  /* mobile variant */

  /* Labels / Eyebrows */
  --pc-fs-label-d:      12px;
  --pc-fs-label-m:      11px;

  /* Navigation Links */
  --pc-fs-nav:          14px;    /* mobile nav items */

  /* Button Text */
  --pc-fs-btn-m:        11px;    /* mobile button label */
}

/* --- Letter Spacing --- */
:root {
  --pc-ls-tight:        0em;
  --pc-ls-body:         0.025em;
  --pc-ls-nav:          0.1em;
  --pc-ls-label:        0.2em;   /* eyebrows, uppercase caps labels */
  --pc-ls-hero:         0.01em;
}

/* --- Line Heights --- */
:root {
  --pc-lh-tight:        1.1;     /* display serif headings */
  --pc-lh-heading:      1.2;
  --pc-lh-subhead:      1.3;
  --pc-lh-body:         1.4;
  --pc-lh-body-loose:   1.7;
  --pc-lh-label:        1.6;
}

/* --- Font Weights & Styles --- */
:root {
  --pc-fw-regular:      400;
  --pc-fw-bold:         700;
  --pc-fst-italic:      italic;
  --pc-fst-normal:      normal;
}


/* ─────────────────────────────────────────────
   3. HOVER EFFECTS
   ───────────────────────────────────────────── */
:root {
  /* All interactive links and nav items use opacity fade */
  --pc-hover-opacity:         0.5;
  --pc-hover-transition:      opacity 0.25s ease;
}

/*
  Usage — apply to any clickable element:

  .pc-link {
    transition: var(--pc-hover-transition);
  }
  .pc-link:hover {
    opacity: var(--pc-hover-opacity);
  }
*/


/* ─────────────────────────────────────────────
   4. READY-TO-USE COMPONENT CLASSES
   ───────────────────────────────────────────── */

/* Eyebrow / Label */
.pc-label {
  font-family: var(--pc-font-label);
  font-weight: var(--pc-fw-regular);
  font-style:  var(--pc-fst-normal);
  font-size:   var(--pc-fs-label-d);
  letter-spacing: var(--pc-ls-label);
  line-height: var(--pc-lh-label);
  text-transform: uppercase;
  color: var(--pc-text-dark);
}
.pc-label--light { color: var(--pc-text-light); }

/* Hero H1 */
.pc-hero-title {
  font-family:   var(--pc-font-display);
  font-weight:   var(--pc-fw-regular);
  font-style:    var(--pc-fst-normal);
  font-size:     var(--pc-fs-hero-d);
  line-height:   var(--pc-lh-tight);
  letter-spacing: var(--pc-ls-hero);
  color:         var(--pc-text-light);
}

/* Section Heading (serif, dark) */
.pc-heading {
  font-family:   var(--pc-font-display);
  font-weight:   var(--pc-fw-regular);
  font-style:    var(--pc-fst-normal);
  font-size:     var(--pc-fs-h3-d);
  line-height:   var(--pc-lh-subhead);
  letter-spacing: var(--pc-ls-tight);
  color:         var(--pc-text-dark);
}

/* Body Copy */
.pc-body {
  font-family:   var(--pc-font-body);
  font-weight:   var(--pc-fw-regular);
  font-style:    var(--pc-fst-normal);
  font-size:     var(--pc-fs-body-d);
  line-height:   var(--pc-lh-body);
  letter-spacing: var(--pc-ls-body);
  color:         var(--pc-text-dark);
}
.pc-body--light { color: var(--pc-text-light); }
.pc-body--loose { line-height: var(--pc-lh-body-loose); }
.pc-body--italic {
  font-weight: var(--pc-fw-bold);
  font-style:  var(--pc-fst-italic);
}

/* Button — Filled Dark (CTA) */
.pc-btn {
  display:        inline-block;
  font-family:    var(--pc-font-label);
  font-size:      var(--pc-fs-label-d);
  font-weight:    var(--pc-fw-regular);
  letter-spacing: var(--pc-ls-label);
  text-transform: uppercase;
  line-height:    var(--pc-lh-label);
  background-color: var(--pc-btn-charcoal);
  color:          var(--pc-text-light);
  border:         none;
  padding:        18px 30px;
  cursor:         pointer;
  text-decoration: none;
  transition:     var(--pc-hover-transition);
}
.pc-btn:hover { opacity: var(--pc-hover-opacity); }

/* Button — Outlined */
.pc-btn--outline {
  background-color: var(--pc-bg-white);
  color:            var(--pc-text-dark);
  border:           1px solid var(--pc-border-dark);
}

/* Button — Contact (taupe) */
.pc-btn--contact {
  background-color: var(--pc-btn-contact);
  color:            var(--pc-text-light);
  border:           none;
}

/* Nav Link */
.pc-nav-link {
  font-family:    var(--pc-font-body);
  font-weight:    var(--pc-fw-regular);
  font-size:      var(--pc-fs-nav);
  letter-spacing: var(--pc-ls-nav);
  text-transform: uppercase;
  color:          var(--pc-text-dark);
  text-decoration: none;
  transition:     var(--pc-hover-transition);
}
.pc-nav-link:hover { opacity: var(--pc-hover-opacity); }


/* ─────────────────────────────────────────────
   5. RESPONSIVE OVERRIDES  (mobile ≤ 767px)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {

  .pc-hero-title  { font-size: var(--pc-fs-hero-m); }
  .pc-heading     { font-size: var(--pc-fs-h3-m); }
  .pc-body        { font-size: var(--pc-fs-body-sm-m); }
  .pc-label       { font-size: var(--pc-fs-label-m); }

  .pc-btn {
    font-size:  var(--pc-fs-btn-m);
    padding:    14px 22px;
  }

  /* Mobile nav background switches to dark */
  .pc-nav-link { color: var(--pc-text-light); }
}


/* ─────────────────────────────────────────────
   6. SECTION BACKGROUND HELPERS
   ───────────────────────────────────────────── */
.pc-section--cream    { background-color: var(--pc-bg-cream);      }
.pc-section--white    { background-color: var(--pc-bg-white);      }
.pc-section--warm     { background-color: var(--pc-bg-warm-white); }
.pc-section--dark     { background-color: var(--pc-bg-hero);       }
.pc-section--peach    { background-color: var(--pc-accent-peach);  }
.pc-section--taupe    { background-color: var(--pc-accent-taupe-bg); }