/* OnsiteHub — Brand System v2.1 tokens
 * These are the in-code source of truth for the code components.
 * Names mirror what we'll register as Webflow Variables later, so the
 * components inherit the site's values when present and fall back to these.
 *
 * Fonts (Quicksand, Montserrat, JetBrains Mono) are loaded by the Webflow site
 * itself — we only reference the families here, never @import them. */

:host {
  /* Primary */
  --oh-cadmium: #ffec00; /* signature yellow — accent only, ~10% coverage */
  --oh-sun-soft: #fff7a8; /* tint: backgrounds, hover washes */

  /* Dark surface (replaces black) */
  --oh-adriatic: #0e5b7a;

  /* Neutrals — warm, replace pure black/white */
  --oh-paper: #faf6ec;
  --oh-cream: #f4eddf;
  --oh-stone: #dcd7cc;
  --oh-mist: #d7d4cc;
  --oh-slate: #6b6b72;
  --oh-charcoal: #2a2a2e;
  --oh-ink: #0e0e10; /* text only — never a surface */

  /* Supporting */
  --oh-olive: #6f8f3a;
  --oh-terracotta: #d96b3f;

  /* Type */
  --oh-font-display: "Quicksand", system-ui, sans-serif; /* headings */
  --oh-font-body: "Montserrat", system-ui, sans-serif; /* body */
  --oh-font-mono: "JetBrains Mono", ui-monospace, monospace; /* tags/labels */
}

/* ============================================================
   OnsiteHub Design Tokens — v2.1
   Refined with feedback: no black backgrounds, Adriatic for
   dark surfaces, light grey replaces mustard-deep, original
   logo asset, scratchy highlighter texture.
   ============================================================ */

/* ---- COLOR ---- */
:host, :host {
  /* Primary — signature highlighter */
  --oh-yellow:        #FFEC00;
  --oh-yellow-soft:   #FFFEEF;   /* Sunsoft — almost-white warm tint */
  --oh-stone:         #F4F4F4;   /* neutral light grey */

  /* Ink & paper (warm neutrals, for TEXT — not for surfaces) */
  --oh-ink:           #0E0E10;   /* text only */
  --oh-charcoal:      #2A2A2E;
  --oh-slate:         #6B6B72;
  --oh-mist:          #D7D4CC;
  --oh-paper:         #FAF6EC;   /* default page bg */
  --oh-cream:         #F4EDDF;   /* card bg */
  --oh-sand:          #E8D4A8;
  --oh-white:         #FFFFFF;

  /* Adriatic blue — the new DARK surface.
     Replaces black/ink for any tinted background. */
  --oh-adriatic:      #0E5B7A;
  --oh-adriatic-deep: #0A4359;
  --oh-adriatic-soft: #B9D4DE;

  /* Secondary support colours — no archetype mapping, just names */
  --oh-olive:         #6F8F3A;
  --oh-olive-soft:    #C9D6A8;
  --oh-terracotta:    #D96B3F;
  --oh-terracotta-soft:#F4C9B5;

  /* Semantic */
  --oh-success: var(--oh-olive);
  --oh-warning: #E8A33A;
  --oh-error:   #C9402E;
}

/* ---- TYPE ---- */

/* Self-hosted Montserrat — heavy weights uploaded by the brand owner.
   Lighter weights (300–600) still come from the Google Fonts CDN link. */







/* Self-hosted JetBrains Mono — uploaded by the brand owner.
   Regular (400) and Medium (500) still come from the Google Fonts CDN link. */










/* Self-hosted Quicksand — uploaded by the brand owner.
   Bold (700) still comes from the Google Fonts CDN link. */






:host, :host {
  --oh-font-display: 'Quicksand', system-ui, sans-serif;
  --oh-font-body:    'Montserrat', system-ui, sans-serif;
  --oh-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Scale */
  --oh-d1: clamp(56px, 6vw, 96px); /* @kind spacing */
  --oh-d2: clamp(40px, 4.4vw, 64px); /* @kind spacing */
  --oh-d3: clamp(28px, 3vw, 40px); /* @kind spacing */

  --oh-t-xl: 22px;
  --oh-t-l:  18px;
  --oh-t-m:  16px;
  --oh-t-s:  14px;
  --oh-t-xs: 12px;

  /* Tracking */
  --oh-track-tight:  -0.02em;
  --oh-track-wide:   0.08em;
}

/* ---- SHAPE ---- */
:host, :host {
  --oh-r-sm: 4px;
  --oh-r-md: 10px;
  --oh-r-lg: 18px;
  --oh-r-pill: 999px;

  --oh-stroke: 2.25px;
  --oh-shadow-card: 0 1px 0 #00000010, 0 12px 32px -16px #0E0E1024;
}


/* ---- BASE (scoped to this component's shadow root) ---- */
.pp-root, .pp-root *, .pp-root *::before, .pp-root *::after { box-sizing: border-box; }

.pp-root {
  margin: 0;
  background: var(--oh-paper);
  color: var(--oh-ink);
  font-family: var(--oh-font-body);
  font-size: var(--oh-t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.pp-wrap { max-width: 820px; margin: 0 auto; padding: 72px 24px 96px; }

.pp-eyebrow {
  font-family: var(--oh-font-mono);
  font-size: var(--oh-t-xs);
  font-weight: 500;
  letter-spacing: var(--oh-track-wide);
  text-transform: uppercase;
  color: var(--oh-slate);
}

.pp-root h1 {
  font-family: var(--oh-font-display);
  font-weight: 700;
  letter-spacing: var(--oh-track-tight);
  line-height: 1.05;
  font-size: clamp(40px, 5vw, 64px);
  margin: 12px 0 0;
}

.pp-updated { font-family: var(--oh-font-mono); font-size: 13px; color: var(--oh-slate); margin: 16px 0 0; }

.pp-intro { font-size: 18px; line-height: 1.65; margin: 28px 0 0; }

.pp-rule { height: var(--oh-stroke); background: var(--oh-ink); border-radius: 2px; margin: 40px 0 0; }

.pp-root h2 {
  font-family: var(--oh-font-display);
  font-weight: 700;
  letter-spacing: var(--oh-track-tight);
  line-height: 1.15;
  font-size: 28px;
  margin: 52px 0 0;
}

.pp-root h3 {
  font-family: var(--oh-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 28px 0 0;
}

.pp-root p { font-size: 16px; line-height: 1.7; color: var(--oh-charcoal); margin: 14px 0 0; }

.pp-root ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }

.pp-root li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.7; color: var(--oh-charcoal); }

/* Brand highlighter dot instead of a default bullet. */
.pp-root li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--oh-r-pill);
  background: var(--oh-yellow);
  border: 1.5px solid var(--oh-ink);
}

.pp-root a { color: var(--oh-adriatic); font-weight: 600; text-underline-offset: 3px; }

.pp-card {
  border: var(--oh-stroke) solid var(--oh-ink);
  border-radius: var(--oh-r-lg);
  background: var(--oh-cream);
  box-shadow: var(--oh-shadow-card);
  padding: 28px 32px;
  margin: 20px 0 0;
}
.pp-card p { margin: 6px 0 0; color: var(--oh-ink); }
.pp-card p:first-child { margin: 0; font-family: var(--oh-font-display); font-weight: 700; font-size: 18px; }

@media (max-width: 720px) {
  .pp-wrap { padding: 48px 16px 64px; }
  .pp-root h2 { font-size: 24px; margin-top: 40px; }
  .pp-intro { font-size: 17px; }
  .pp-card { padding: 20px 20px; }
}