/* Pure Labs — design tokens
   Portable to a WordPress theme stylesheet. Every value used in the mockups
   resolves from this block; nothing is hard-coded downstream.
   Contrast: every text tier clears WCAG AA (4.5:1) on white and on the tinted
   surfaces it is paired with. Do not lighten --pl-ink-3 or --pl-ink-4. */

:root {
  /* Type families. Google Fonts only. */
  --pl-sans: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --pl-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Text. Sans for language, mono for every piece of data. */
  --pl-ink:    #0B1220;  /* headings                       19.0:1 on white */
  --pl-ink-2:  #39434F;  /* body                            9.6:1 */
  --pl-ink-3:  #4E5966;  /* labels, secondary               7.1:1 */
  --pl-ink-4:  #656F7C;  /* micro data labels               5.1:1 */

  /* Surfaces and rules */
  --pl-line:   #E3E7ED;
  --pl-line-2: #EEF1F5;
  --pl-bg:     #FFFFFF;
  --pl-bg-2:   #F7F9FB;
  --pl-bg-3:   #F1F4F8;
  --pl-bg-ink: #0B1220;

  /* Accent. Blue is the only brand colour besides white. */
  --pl-blue:     #1552D9;  /* 6.5:1 on white, and with white text on it */
  --pl-blue-700: #0E3CA6;  /* hover, pressed */
  --pl-blue-100: #DCE7FD;  /* borders on tinted panels */
  --pl-blue-50:  #EFF4FE;  /* tinted panel fill */

  /* Status. Each pairs with its own tinted background. */
  --pl-ok:       #0F7A52;
  --pl-ok-bg:    #E9F5EF;
  --pl-warn:     #8A5300;
  --pl-warn-bg:  #FDF4E5;
  --pl-err:      #B3261E;
  --pl-err-bg:   #FDECEA;

  /* Radii. Small on purpose: large radii read consumer, not clinical. */
  --pl-r-1: 2px;
  --pl-r-2: 4px;
  --pl-r-3: 8px;
  --pl-r-4: 12px;
  --pl-r-pill: 999px;

  /* Spacing, 4-based */
  --pl-s-1: 4px;
  --pl-s-2: 8px;
  --pl-s-3: 12px;
  --pl-s-4: 16px;
  --pl-s-5: 24px;
  --pl-s-6: 32px;
  --pl-s-7: 48px;
  --pl-s-8: 64px;
  --pl-s-9: 96px;

  /* Elevation. Two shadows only, plus the focus ring. */
  --pl-sh-1: 0 1px 2px rgba(11, 18, 32, .05);
  --pl-sh-2: 0 10px 30px -12px rgba(11, 18, 32, .16);
  --pl-ring: 0 0 0 3px rgba(21, 82, 217, .16);

  /* Section rhythm. Overridden per breakpoint below. */
  --pl-sec: 96px;
}

@media (max-width: 1439px) { :root { --pl-sec: 72px; } }
@media (max-width: 767px)  { :root { --pl-sec: 56px; } }

/* Type scale, as used in the mockups.
   1920/1440 desktop values; headings scale down with the container.
   Never below 12px anywhere, never below 12pt in print. */
:root {
  --pl-t-display: clamp(30px, 5.4vw, 62px);  /* hero */
  --pl-t-h1:      clamp(26px, 3.8vw, 44px);
  --pl-t-h2:      clamp(24px, 3.4vw, 38px);
  --pl-t-h3:      24px;
  --pl-t-h4:      19px;
  --pl-t-body-l:  17px;
  --pl-t-body:    16px;
  --pl-t-small:   13.5px;
  --pl-t-data:    13px;   /* mono */
  --pl-t-label:   11px;   /* mono, .14em, uppercase */
}

/* Base reset used by the mockups */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--pl-sans);
  color: var(--pl-ink);
  background: var(--pl-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--pl-blue); text-decoration: none; }
a:hover { color: var(--pl-blue-700); text-decoration: underline; }
::selection { background: var(--pl-blue-100); }

/* Motion. Six functional transitions only, all under 200ms.
   No scroll reveals, no counters, no parallax. */
@keyframes plFade   { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes plGrid   { from { opacity: .4; } to { opacity: 1; } }
@keyframes plDrawer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes plPop    { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Minimum hit target at the 412 breakpoint. Applies to every control:
   chips, steppers, text buttons, inline links in tap regions. */
@media (max-width: 767px) {
  button, a[role="button"], input, select, textarea, summary { min-height: 44px; }
}