/* ============================================================
   PUREPOINT SUPPLY — Colors & Type
   Clinical, minimal, premium. Restraint over excess.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=League+Spartan:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --pp-teal:        #12747D;   /* primary brand */
  --pp-teal-hover:  #0E5C63;   /* darker on hover */
  --pp-teal-press:  #0A484E;   /* deeper press */
  --pp-teal-10:     rgba(18, 116, 125, 0.10); /* subtle wash */
  --pp-teal-05:     rgba(18, 116, 125, 0.05);
  --pp-teal-20:     rgba(18, 116, 125, 0.20);

  --pp-ink:         #1A1A1A;   /* near-black, primary type */
  --pp-ink-2:       #3D3D3D;   /* secondary type */
  --pp-ink-3:       #6B6B6B;   /* tertiary / metadata */
  --pp-ink-4:       #9A9A9A;   /* disabled / placeholder */

  --pp-paper:       #FFFFFF;   /* pure white background */
  --pp-paper-soft:  #FAFAFA;   /* alternate sheet */
  --pp-paper-warm:  #F5F2EC;   /* warm off-white (sticker bg) */

  --pp-line:        #E6E6E6;   /* hairline border */
  --pp-line-strong: #CFCFCF;   /* stronger divider */

  /* Semantic — used sparingly. No marketing color. */
  --pp-fg:          var(--pp-ink);
  --pp-fg-muted:    var(--pp-ink-3);
  --pp-bg:          var(--pp-paper);
  --pp-accent:      var(--pp-teal);
  --pp-border:      var(--pp-line);

  /* ── Type families — three strict roles ───────────────────
     1) Serif: LOGO / WORDMARK ONLY ("purepoint" + "supply" sub).
        Never use for body, UI, or labels.
     2) Sans:  PRIMARY UI / WEB / BODY / DOCS / SOCIAL.
     3) Mono:  TECHNICAL DATA — CAS, LOT, MFG, EXP, sequences, accents. */
  --pp-serif:   'Lora', 'Source Serif Pro', Georgia, serif;
  --pp-sans:    'League Spartan', 'Outfit', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type scale ────────────────────────────────────────── */
  --pp-size-xxs:   10px;
  --pp-size-xs:    11px;
  --pp-size-sm:    13px;
  --pp-size-base:  15px;
  --pp-size-md:    17px;
  --pp-size-lg:    20px;
  --pp-size-xl:    28px;
  --pp-size-2xl:   40px;
  --pp-size-3xl:   56px;
  --pp-size-4xl:   80px;

  /* ── Spacing (8pt base, with hairline halves) ─────────── */
  --pp-space-0:    0px;
  --pp-space-1:    4px;
  --pp-space-2:    8px;
  --pp-space-3:    12px;
  --pp-space-4:    16px;
  --pp-space-5:    24px;
  --pp-space-6:    32px;
  --pp-space-7:    48px;
  --pp-space-8:    64px;
  --pp-space-9:    96px;
  --pp-space-10:  128px;

  /* ── Radii (minimal — clinical labels are rectilinear) ── */
  --pp-radius-0:    0px;       /* default — labels, packaging */
  --pp-radius-1:    2px;       /* gentle softening */
  --pp-radius-2:    4px;       /* buttons, inputs */
  --pp-radius-3:    8px;       /* cards (rare) */
  --pp-radius-pill: 999px;     /* status pills */
  --pp-radius-full: 50%;       /* round stickers, the ⊙ */

  /* ── Borders ───────────────────────────────────────────── */
  --pp-border-hair:   1px solid var(--pp-line);
  --pp-border-strong: 1px solid var(--pp-line-strong);
  --pp-border-ink:    1px solid var(--pp-ink);
  --pp-border-teal:   1px solid var(--pp-teal);

  /* ── Shadows — almost never used ───────────────────────── */
  --pp-shadow-none: none;
  --pp-shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 0 0 1px var(--pp-line);

  /* ── Motion ────────────────────────────────────────────── */
  --pp-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --pp-duration-1:  120ms;
  --pp-duration-2:  200ms;
  --pp-duration-3:  320ms;

  /* ── Layout ────────────────────────────────────────────── */
  --pp-max-content: 1120px;
  --pp-gutter:      48px;
}

/* ============================================================
   Base elements — opinionated defaults
   ============================================================ */

html, body {
  background: var(--pp-bg);
  color: var(--pp-fg);
  font-family: var(--pp-sans);
  font-size: var(--pp-size-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — sans by default. Reserve serif strictly for the logo. */
.pp-display,
h1 {
  font-family: var(--pp-sans);
  font-weight: 700;
  font-size: var(--pp-size-3xl);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--pp-ink);
}

h2 {
  font-family: var(--pp-sans);
  font-weight: 700;
  font-size: var(--pp-size-2xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--pp-ink);
}

h3 {
  font-family: var(--pp-sans);
  font-weight: 700;
  font-size: var(--pp-size-lg);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--pp-ink);
}

h4, .pp-eyebrow {
  font-family: var(--pp-sans);
  font-weight: 700;
  font-size: var(--pp-size-xs);
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pp-ink-3);
}

p {
  font-size: var(--pp-size-base);
  line-height: 1.6;
  color: var(--pp-ink-2);
  text-wrap: pretty;
}

small, .pp-meta {
  font-size: var(--pp-size-xs);
  color: var(--pp-ink-3);
  letter-spacing: 0.02em;
}

code, kbd, samp, .pp-mono, .pp-spec {
  font-family: var(--pp-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--pp-ink);
}

.pp-spec-label {
  font-family: var(--pp-mono);
  font-size: var(--pp-size-xxs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-ink-3);
}

/* Wordmark — serif "purepoint", sans bold "supply" */
.pp-wordmark {
  font-family: var(--pp-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pp-ink);
}
.pp-wordmark--sub {
  font-family: var(--pp-sans);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--pp-ink);
}

/* Hairline rules used as structural dividers */
.pp-rule {
  border: 0;
  border-top: var(--pp-border-hair);
  margin: 0;
}
.pp-rule--strong { border-top: var(--pp-border-strong); }
.pp-rule--ink    { border-top: var(--pp-border-ink); }

/* Compliance text — required on packaging */
.pp-compliance {
  font-family: var(--pp-sans);
  font-size: var(--pp-size-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-ink-3);
  font-weight: 600;
}