/* ============================================================
   COLORS
   A calm, trustworthy palette built around deep navy ink and
   soft sky-blue, with a warm earthy accent family for icons,
   categories and calls-to-action. Two tiers are provided:
   - Brand tier: the exact brand spec values (logos, print).
   - Web tier: the same hues with slightly boosted saturation
     & brightness, as the brand guidelines request for screen.
   ============================================================ */

.pbg-page {
  /* ---- Core ink & surfaces ---------------------------------- */
  --color-ink:            #131a24;  /* primary text, footer, dark logo */
  --color-ink-soft:       #2a333f;  /* hover / pressed dark surfaces */
  --color-muted:          #a4a6ad;  /* H3/H4, captions, meta text */

  --color-white:          #ffffff;  /* primary clean background */
  --color-ivory:          #fbfaf9;  /* secondary off-white background */
  --color-sky:            #bcdae4;  /* accent section background */
  --color-sky-logo:       #8ac3d6;  /* logo lockup background */
  --color-sky-deep:       #6fb4cc;  /* web-boosted sky for fills */

  /* ---- Accent family (icons, categories, sub-sections) ------ */
  /* Brand-spec values */
  --color-purple:         #8a73ad;
  --color-yellow:         #ddb553;
  --color-orange:         #e07852;
  --color-green:          #45744e;
  --color-olive:          #9fab77;

  /* Web tier — boosted saturation/brightness for screens */
  --color-purple-web:     #9a7ec6;
  --color-yellow-web:     #ecc25b;
  --color-orange-web:     #ed7d52;
  --color-green-web:      #4f8a5a;
  --color-olive-web:      #aab982;

  /* Soft tints for backgrounds / chips (12–18% over ivory) */
  --color-purple-tint:    #ece7f3;
  --color-yellow-tint:    #f9efd4;
  --color-orange-tint:    #f9e3da;
  --color-green-tint:     #dfeae1;
  --color-olive-tint:     #ebeede;
  --color-sky-tint:       #e4f0f4;

  /* ---- Buttons / CTAs --------------------------------------- */
  --color-cta:            #ddb553;  /* primary CTA — warm yellow */
  --color-cta-hover:      #cda43f;
  --color-cta-active:     #bd9531;
  --color-cta-2:          #cf6f46;  /* secondary CTA — terracotta */
  --color-cta-2-hover:    #bd6039;
  --color-cta-2-active:   #aa5430;

  /* ---- Functional / status ---------------------------------- */
  --color-success:        #45744e;
  --color-warning:        #ddb553;
  --color-danger:         #c0492f;
  --color-info:           #6fb4cc;

  /* ---- Borders & lines -------------------------------------- */
  --color-border:         #e7e3dd;  /* hairline on ivory */
  --color-border-strong:  #d4cfc6;
  --color-border-ink:     rgba(19,26,36,0.12);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --text-strong:          var(--color-ink);     /* H1, H2 */
  --text-body:            var(--color-ink);      /* paragraphs */
  --text-muted:           var(--color-muted);    /* H3, H4, meta */
  --text-on-dark:         var(--color-ivory);
  --text-on-accent:       var(--color-ink);
  --text-link:            var(--color-orange);

  --surface-page:         var(--color-white);
  --surface-alt:          var(--color-ivory);
  --surface-accent:       var(--color-sky);
  --surface-card:         var(--color-white);
  --surface-dark:         var(--color-ink);

  --border-default:       var(--color-border);
  --border-card:          var(--color-border);

  --accent-primary:       var(--color-cta);      /* warm yellow */
  --accent-secondary:     var(--color-cta-2);    /* terracotta */
}

/* ============================================================
   TYPOGRAPHY
   Headings & UI: Chopin Bold -> Sofia Sans (700/800).
   Body & long text: Chopin Regular / Inter -> Sofia Sans (400).
   The brand pairs bold, tightly-tracked headings with a calm,
   readable body. H3/H4 are intentionally MUTED (grey #a4a6ad)
   and act as eyebrows / supporting labels above darker H1/H2.
   ============================================================ */

.pbg-page {
  /* ---- Families -------------------------------------------- */
  --font-brand:   'Sofia Sans', 'Inter', system-ui, sans-serif;   /* Chopin substitute */
  --font-body:    'Sofia Sans', 'Inter', system-ui, sans-serif;
  --font-wordmark:'Montserrat', 'Sofia Sans', sans-serif;          /* Mont substitute (logo) */

  /* ---- Weights --------------------------------------------- */
  --fw-regular:   400;  /* @kind font */
  --fw-medium:    500;  /* @kind font */
  --fw-semibold:  600;  /* @kind font */
  --fw-bold:      700;  /* @kind font */
  --fw-black:     800;  /* @kind font */

  /* ---- Type scale (rem, 1rem = 16px) ----------------------- */
  --fs-display:   clamp(2.75rem, 5vw, 4rem);    /* @kind font */
  --fs-h1:        clamp(2.25rem, 3.6vw, 3rem);  /* @kind font */
  --fs-h2:        clamp(1.75rem, 2.6vw, 2.25rem); /* @kind font */
  --fs-h3:        1.375rem;    /* @kind font */
  --fs-h4:        1.0625rem;   /* @kind font */
  --fs-lead:      1.25rem;    /* @kind font */
  --fs-body:      1.0625rem;  /* @kind font */
  --fs-small:     0.9375rem;  /* @kind font */
  --fs-caption:   0.8125rem;  /* @kind font */
  --fs-eyebrow:   0.78125rem; /* @kind font */

  /* ---- Line heights ---------------------------------------- */
  --lh-tight:     1.08;   /* @kind font */
  --lh-snug:      1.22;   /* @kind font */
  --lh-body:      1.62;   /* @kind font */
  --lh-relaxed:   1.75;   /* @kind font */

  /* ---- Letter spacing -------------------------------------- */
  --ls-tight:     -0.02em;   /* @kind font */
  --ls-normal:    0;         /* @kind font */
  --ls-eyebrow:   0.14em;    /* @kind font */
}

/* ---- Heading + text helpers (opt-in classes) -------------- */
.h-display {
  font-family: var(--font-brand);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.h1 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.h2 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.h3 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.h4 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.eyebrow {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-secondary);
}
.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ============================================================
   SPACING, RADII, SHADOWS, MOTION, LAYOUT
   A soft, generous system. Cards use medium radii and gentle,
   diffuse shadows (never hard/dark). Motion is calm — short
   ease-out fades and small lifts, no bounces.
   ============================================================ */

.pbg-page {
  /* ---- Spacing scale (4px base) ---------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   3rem;      /* 48 */
  --space-8:   4rem;      /* 64 */
  --space-9:   6rem;      /* 96 */
  --space-10:  8rem;      /* 128 */

  /* ---- Radii ----------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;   /* default card / input */
  --radius-lg:   24px;   /* feature cards, media */
  --radius-xl:   32px;   /* hero panels */
  --radius-pill: 999px;  /* buttons, chips, tags */

  /* ---- Shadows (soft, cool-tinted) ------------------------- */
  --shadow-xs:  0 1px 2px rgba(19,26,36,0.05);
  --shadow-sm:  0 2px 8px rgba(19,26,36,0.06);
  --shadow-md:  0 8px 24px rgba(19,26,36,0.08);
  --shadow-lg:  0 18px 48px rgba(19,26,36,0.10);
  --shadow-focus: 0 0 0 3px rgba(111,180,204,0.45);

  /* ---- Borders --------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Motion ---------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);        /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   220ms;   /* @kind other */
  --dur-slow:   360ms;   /* @kind other */

  /* ---- Layout ---------------------------------------------- */
  --container:      1180px;
  --container-wide: 1320px;
  --container-text: 720px;   /* article measure */
  --gutter:         clamp(1.25rem, 4vw, 3rem);  /* @kind spacing */
}