/* =========================
   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;
}

/* Wordmark only - see potterform-shell.css header/footer usage.
   Variable font, single file, covers the 400-500 weight range used by
   the shared PotterForm wordmark. Not applied to general headings in
   UI-2A; that is a UI-2B decision. */
@font-face{
  font-family:"Newsreader";
  src:url("fonts/web/Newsreader-Variable.woff2") format("woff2");
  font-weight:400 500;
  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);

  /* Authoritative landing shell tokens (F:\Projects\PotterForm Website 2.0\site).
     Added for the shared PotterForm header/footer and outer page surfaces
     (UI-2A). Intentionally separate from --pf-color-background/-surface
     above, which stay in place for existing consumers until UI-2B. */
  --pf-canvas: #FBF8F4;
  --pf-surface: #F3EEE9;
  --pf-surface-strong: #E7DED8;
  --pf-white: #FFFDFC;
  --pf-control-border: #776C72;

  /* Warm ink/muted-text pair from the same landing source. Distinct from
     --pf-color-text/-text-soft above (a separate, cooler near-black pair)
     for the same reason --pf-canvas is distinct from --pf-color-background:
     different design language, not a reuse. */
  --pf-ink: #2B2729;
  --pf-text-muted: #625B5F;

  --pf-radius-small: 8px;
  --pf-radius-control: 10px;
  --pf-radius-panel: 20px;

  --pf-font-display: "Newsreader", Georgia, serif;

  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);
}