/* ============================================================
   Penguin Design System — component styles.
   Extracted verbatim from the DS React components' injected CSS
   (Button, Badge, Card, Input, StatBlock, FeatureCard,
   SectionHeading) for this static implementation.
   ============================================================ */

/* ---- Button ---- */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);line-height:1;
  border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard),
  border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
  transform var(--dur-fast) var(--ease-standard);}
.pg-btn__i{display:inline-flex;align-items:center;}
.pg-btn__i svg{display:block;width:1.05em;height:1.05em;}
.pg-btn--sm{font-size:var(--fs-small);padding:8px 14px;}
.pg-btn--md{font-size:var(--fs-body);padding:11px 20px;}
.pg-btn--lg{font-size:var(--fs-body-lg);padding:15px 28px;}
.pg-btn--primary{background:var(--action-primary);color:var(--action-primary-text);}
.pg-btn--primary:hover{background:var(--action-primary-hover);}
.pg-btn--primary:active{background:var(--action-primary-press);transform:translateY(1px);}
.pg-btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--border-strong);}
.pg-btn--secondary:hover{background:rgba(202,202,221,0.09);border-color:var(--iceberg);}
.pg-btn--secondary:active{background:rgba(202,202,221,0.05);transform:translateY(1px);}
.pg-btn--ghost{background:transparent;color:var(--text-brand);}
.pg-btn--ghost:hover{background:rgba(121,100,206,0.12);}
.pg-btn--ghost:active{transform:translateY(1px);}
.pg-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.pg-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

/* ---- Badge ---- */
.pg-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.04em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-pill);
  border:1px solid transparent;line-height:1;white-space:nowrap;}
.pg-badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);}
.pg-badge--neutral{background:rgba(202,202,221,0.10);color:var(--iceberg);border-color:var(--border-subtle);}
.pg-badge--live{background:rgba(27,227,203,0.12);color:var(--aqua);border-color:rgba(27,227,203,0.32);}
.pg-badge--warn{background:rgba(247,194,48,0.13);color:var(--sun);border-color:rgba(247,194,48,0.34);}
.pg-badge--info{background:rgba(121,100,206,0.16);color:var(--sunrise-60);border-color:rgba(121,100,206,0.38);}

/* ---- Card ---- */
.pg-card{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out);}
.pg-card--p-sm .pg-card__body{padding:var(--space-4);}
.pg-card--p-md .pg-card__body{padding:var(--space-5);}
.pg-card--p-lg .pg-card__body{padding:var(--space-6);}
.pg-card__body{position:relative;z-index:1;}
.pg-card__pattern{position:absolute;inset:0;background-repeat:repeat;background-size:120px;opacity:.35;z-index:0;pointer-events:none;}
.pg-card--interactive{cursor:pointer;}
.pg-card--interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-glow);transform:translateY(-3px);}

/* ---- Input ---- */
.pg-field{display:flex;flex-direction:column;gap:7px;font-family:var(--font-sans);}
.pg-field__label{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--text-body);}
.pg-input{font-family:var(--font-sans);width:100%;color:var(--text-strong);
  background:var(--surface-overlay);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);outline:none;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
.pg-input::placeholder{color:var(--text-muted);}
.pg-input--sm{font-size:var(--fs-small);padding:8px 11px;}
.pg-input--md{font-size:var(--fs-body);padding:11px 13px;}
.pg-input--lg{font-size:var(--fs-body-lg);padding:14px 15px;}
.pg-input:hover{border-color:var(--iceberg);}
.pg-input:focus{border-color:var(--focus-ring);box-shadow:0 0 0 3px rgba(27,227,203,0.22);}
.pg-input--error{border-color:#e2607a;}
.pg-input--error:focus{box-shadow:0 0 0 3px rgba(226,96,122,0.22);}
.pg-field__msg{font-size:var(--fs-caption);color:var(--text-muted);}
.pg-field__msg--error{color:#e98aa0;}

/* ---- StatBlock ---- */
.pg-stat{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans);}
.pg-stat--center{align-items:center;text-align:center;}
.pg-stat--right{align-items:flex-end;text-align:right;}
.pg-stat__value{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:var(--fw-extra);
  letter-spacing:var(--ls-tight);line-height:1;color:var(--text-strong);}
.pg-stat--aqua .pg-stat__value{color:var(--aqua);}
.pg-stat--sun .pg-stat__value{color:var(--sun);}
.pg-stat--sunrise .pg-stat__value{color:var(--sunrise-60);}
.pg-stat__label{font-size:var(--fs-small);font-weight:var(--fw-medium);
  color:var(--text-muted);line-height:1.3;text-wrap:balance;}

/* ---- FeatureCard ---- */
.pg-feature{display:flex;flex-direction:column;gap:12px;font-family:var(--font-sans);
  padding:var(--space-5);background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out);}
.pg-feature:hover{border-color:var(--border-strong);transform:translateY(-3px);}
.pg-feature__icon{width:42px;height:42px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(121,100,206,0.14);color:var(--sunrise-60);}
.pg-feature__icon svg{width:22px;height:22px;display:block;}
.pg-feature__title{font-size:var(--fs-h5);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-snug);color:var(--text-strong);}
.pg-feature__desc{font-size:var(--fs-small);line-height:1.55;color:var(--text-body);margin:0;}

/* ---- SectionHeading ---- */
.pg-head{display:flex;flex-direction:column;gap:14px;font-family:var(--font-sans);}
.pg-head--center{align-items:center;text-align:center;}
.pg-head__eyebrow{font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-brand);}
.pg-head__title{margin:0;font-weight:var(--fw-extra);letter-spacing:var(--ls-tight);
  line-height:1.05;color:var(--text-strong);max-width:18ch;text-wrap:balance;}
.pg-head--center .pg-head__title{max-width:22ch;}
.pg-head--lg .pg-head__title{font-size:clamp(2rem,3.5vw,2.9rem);}
.pg-head--xl .pg-head__title{font-size:clamp(2.6rem,5vw,4rem);}
.pg-head--sm .pg-head__title{font-size:clamp(1.5rem,2.5vw,2rem);}
.pg-head__title b{color:var(--sunrise);font-weight:var(--fw-extra);}