/* =========================================================================
   Perry Dolmans — Design tokens
   Lifted directly from the Claude Design source (Perry Dolmans.dc.html)
   and the brand brief (§4.3 colours, §4.7 type scale, 8px spacing, radii).
   Single source of truth: every component reads these variables.
   ========================================================================= */

:root {
  /* ---- Primary surfaces (§4.3) ---- */
  --pd-black:      #0B0D0F;   /* main background      */
  --pd-charcoal:   #15191D;   /* cards, nav           */
  --pd-graphite:   #22272B;   /* borders, surfaces    */
  --pd-panel:      #0d0f12;   /* alt section bg       */
  --pd-field:      #0E1114;   /* inputs / consoles    */
  --pd-paper:      #E8E1D4;   /* warm editorial light */
  --pd-white:      #F5F3EE;   /* primary text on dark */
  --pd-cream:      #D8D4CA;   /* large supporting text*/
  --pd-text:       #C9C6BE;   /* body on dark         */
  --pd-steel:      #8B949E;   /* metadata / secondary */
  --pd-muted:      #5a636b;   /* faint metadata       */
  --pd-line:       #1d2226;   /* hairline dividers    */

  /* ---- Accents (§4.3) ---- */
  --pd-orange:     #FF6B35;   /* primary CTA / brand  */
  --pd-orange-hi:  #ff7d4d;   /* hover                */
  --pd-green:      #B8F33D;   /* live / active        */
  --pd-amber:      #F2B84B;   /* testing / warning    */
  --pd-red:        #D15C4A;   /* paused / archived    */

  /* ---- Typography (§4.5) ---- */
  --pd-font-display: 'Space Grotesk', system-ui, sans-serif;
  --pd-font-body:    'Inter', system-ui, sans-serif;
  --pd-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Type scale (§4.7), fluid clamps from the design ---- */
  --pd-hero:   clamp(44px, 7.4vw, 94px);
  --pd-h1:     clamp(40px, 6vw, 72px);
  --pd-h2:     clamp(30px, 4.2vw, 50px);
  --pd-h3:     clamp(22px, 2.6vw, 30px);
  --pd-body-l: clamp(19px, 2.3vw, 25px);
  --pd-body:   clamp(16px, 1.5vw, 18px);
  --pd-meta:   12.5px;

  /* ---- Spacing & layout ---- */
  --pd-maxw:    1280px;
  --pd-readw:   780px;        /* article / case-study reading width */
  --pd-gutter:  clamp(18px, 4vw, 40px);
  --pd-secpad:  120px;        /* overridden to 78px in "lab" density */
  --pd-cardpad: 28px;         /* overridden to 20px in "lab" density */

  /* ---- Radii (§4.9) ---- */
  --pd-r-sm: 7px;
  --pd-r:    10px;
  --pd-r-md: 14px;
  --pd-r-lg: 18px;

  --pd-header-h: 68px;
}

/* Keyframes — verbatim from the design <style> block */
@keyframes pdPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor} 50%{opacity:.4;box-shadow:0 0 9px 1px currentColor} }
@keyframes pdBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes pdReveal{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes pdRowIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}