/* =========================
   PotterForm Design System
   Phase 1: shared foundation
   - Instrument Sans web typography
   - Shared .potterform-scope tokens
   No colour, layout or component changes in this phase.
   ========================= */

@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/web/InstrumentSans-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/web/InstrumentSans-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/web/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

.potterform-scope{
  --pf-font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pf-color-primary: #6E3B5B;
  --pf-color-primary-hover: #5A304C;
  --pf-color-primary-soft-hover: rgba(110, 59, 91, 0.05);
  --pf-color-primary-soft: rgba(110, 59, 91, 0.07);
  --pf-color-primary-soft-active: rgba(110, 59, 91, 0.13);
  --pf-color-primary-border: rgba(110, 59, 91, 0.28);
  --pf-color-focus-ring: rgba(110, 59, 91, 0.35);

  /* Semantic alias, kept separate from --pf-color-primary so the pottery
     shape-outline colour can be redirected independently later without
     rewriting every component rule that draws a shape. */
  --pf-color-shape: var(--pf-color-primary);

  /* Genuine warning/caution content only (e.g. Throwability warnings) -
     never a general-purpose orange accent. */
  --pf-color-warning: #A94D24;
  --pf-color-warning-soft: rgba(169, 77, 36, 0.08);
  --pf-color-warning-border: rgba(169, 77, 36, 0.35);

  /* Shared error/destructive family. */
  --pf-color-error: #AA1111;
  --pf-color-error-hover: #8A0E0E;
  --pf-color-error-focus-ring: rgba(170, 17, 17, 0.30);
  --pf-color-error-border: rgba(170, 17, 17, 0.35);
  --pf-color-error-soft: rgba(170, 17, 17, 0.06);

  --pf-color-background: #ffffff;
  --pf-color-surface: #fbfbfb;
  --pf-color-border: rgba(17, 17, 17, 0.08);
  --pf-color-border-strong: rgba(17, 17, 17, 0.12);
  --pf-color-text: #111111;
  --pf-color-text-soft: rgba(17, 17, 17, 0.72);
  --pf-color-text-faint: rgba(17, 17, 17, 0.52);
  --pf-color-line: rgba(17, 17, 17, 0.08);

  font-family: var(--pf-font-family);
}

/* Runtime correction: Blocksy (the theme actually active on staging) sets
   its own direct font-family/font-weight rules on headings, labels, form
   controls and buttons. Inherited font-family from .potterform-scope loses
   to any directly-matching rule regardless of the ancestor's specificity,
   so each of these element types needs its own explicit declaration here.
   The class is doubled (.potterform-scope.potterform-scope) only to raise
   specificity enough to beat Blocksy's own direct element selectors -
   this is plain selector specificity, not !important, and stays scoped to
   .potterform-scope. */
.potterform-scope.potterform-scope h1,
.potterform-scope.potterform-scope h2,
.potterform-scope.potterform-scope h3,
.potterform-scope.potterform-scope h4,
.potterform-scope.potterform-scope h5,
.potterform-scope.potterform-scope h6{
  font-family: var(--pf-font-family);
  font-weight: 600;
}

.potterform-scope.potterform-scope label,
.potterform-scope.potterform-scope figcaption,
.potterform-scope.potterform-scope button,
.potterform-scope.potterform-scope input,
.potterform-scope.potterform-scope select,
.potterform-scope.potterform-scope textarea{
  font-family: var(--pf-font-family);
}