/* ============================================================
   POWERING AUSTRALIA — Design tokens
   Colors + typography, base + semantic.
   Pulled from the 2024 Style Guide PDF and live site.
   ============================================================ */

/* ---------- Fonts ----------
   The brand font is GOTHAM (Hoefler&Co). The user supplied OTF files.
   Weights used in this system:
     300 Light · 400 Book · 500 Medium · 700 Bold · 800 Black · 900 Ultra
   Italics are mapped to their upright counterparts' weights. */

@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-Thin.otf") format("opentype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-ThinItalic.otf") format("opentype");  font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-XLight.otf") format("opentype");      font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-XLightItalic.otf") format("opentype");font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-Light.otf") format("opentype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-Book.otf") format("opentype");        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-BookItalic.otf") format("opentype");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-Medium.otf") format("opentype");      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-MediumItalic.otf") format("opentype");font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-Bold.otf") format("opentype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-BoldItalic.otf") format("opentype");  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-Black.otf") format("opentype");       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-Ultra.otf") format("opentype");       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/GothamHTF-UltraItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

/* Condensed variants — available as "Gotham Condensed" */
@font-face { font-family: "Gotham Condensed"; src: url("fonts/GothamHTF-LightCondensed.otf") format("opentype");  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham Condensed"; src: url("fonts/GothamHTF-BookCondensed.otf") format("opentype");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham Condensed"; src: url("fonts/GothamHTF-MediumCondensed.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham Condensed"; src: url("fonts/GothamHTF-BoldCondensed.otf") format("opentype");   font-weight: 700; font-style: normal; font-display: swap; }

/* Rounded variant — for casual / decorative use if ever needed */
@font-face { font-family: "Gotham Rounded"; src: url("fonts/GothamRnd-Light.otf") format("opentype");    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham Rounded"; src: url("fonts/GothamRnd-LightIta.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }

:root {
  /* ==========================================================
     COLORS — brand
     Source: Style Guide 2024
     BLUE   #20223D   RGB 32 34 61
     ORANGE #F47D20   RGB 244 125 32
     WHITE  #FFFFFF
     ========================================================== */
  --pa-navy: #20223D;
  --pa-orange: #F47D20;
  --pa-white: #FFFFFF;

  /* Secondary / extended (from live site header CTAs + PPT) */
  --pa-orange-light: #F7A043;   /* softer orange — site secondary */
  --pa-orange-hot:   #FF6821;   /* input border accent */
  --pa-navy-ink:     #1A1C2B;   /* darker navy — hero overlay */

  /* Neutrals — derived scale */
  --pa-ink-900: #0F1020;
  --pa-ink-800: #20223D;   /* = navy */
  --pa-ink-600: #4A4C64;
  --pa-ink-500: #6B6D82;
  --pa-ink-400: #9A9CAE;
  --pa-ink-300: #C7C8D3;
  --pa-ink-200: #E4E5EC;
  --pa-ink-100: #F2F3F7;
  --pa-ink-050: #F8F9FB;

  /* Semantic foreground */
  --fg-1: var(--pa-navy);         /* primary text */
  --fg-2: var(--pa-ink-600);      /* secondary text */
  --fg-3: var(--pa-ink-500);      /* tertiary / meta */
  --fg-on-dark: var(--pa-white);
  --fg-accent: var(--pa-orange);
  --fg-link: var(--pa-orange);

  /* Semantic background */
  --bg-page:     var(--pa-white);
  --bg-surface:  var(--pa-white);
  --bg-subtle:   var(--pa-ink-050);
  --bg-muted:    var(--pa-ink-100);
  --bg-inverse:  var(--pa-navy);
  --bg-accent:   var(--pa-orange);

  /* Borders */
  --border-subtle: var(--pa-ink-200);
  --border-strong: var(--pa-ink-300);
  --border-accent: var(--pa-orange);
  --border-focus:  var(--pa-orange-hot);

  /* ==========================================================
     TYPOGRAPHY
     Headings:  Gotham Bold  (fallback: Montserrat 700/800, UPPERCASE)
     Body:      Gotham Light (fallback: Montserrat 300/400)
     ========================================================== */
  --font-display: "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-condensed: "Gotham Condensed", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Base type scale — desktop (1920 ref) */
  --fs-display: 73px;   /* h1 — from scrape */
  --fs-h1:      58px;
  --fs-h2:      43px;   /* from scrape */
  --fs-h3:      32px;
  --fs-h4:      24px;
  --fs-h5:      20px;
  --fs-body:    18px;   /* from scrape */
  --fs-small:   15px;
  --fs-micro:   13px;
  --fs-eyebrow: 14px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:    0.08em;   /* eyebrows / small caps */
  --tracking-wider:   0.14em;   /* section labels */

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-heavy:    800;

  /* ==========================================================
     SPACING (base-4 unit per scrape)
     ========================================================== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ==========================================================
     RADIUS
     From scrape: base 5px, inputs 7px, primary button 100px (pill),
     secondary button 0px (squared).
     ========================================================== */
  --r-0:    0px;
  --r-sm:   5px;
  --r-md:   7px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 9999px;

  /* ==========================================================
     SHADOWS — understated. The brand uses flat shapes / curved
     color blocks rather than soft cards. These are for hover
     affordances and overlay panels only.
     ========================================================== */
  --shadow-xs: 0 1px 2px rgba(32,34,61,.06);
  --shadow-sm: 0 2px 6px rgba(32,34,61,.08);
  --shadow-md: 0 10px 24px rgba(32,34,61,.10);
  --shadow-lg: 0 24px 48px rgba(32,34,61,.14);

  /* Hero overlay (slide 1 of PPT uses #1A1C2B @ 73% alpha) */
  --overlay-hero: rgba(26, 28, 43, 0.73);
  --overlay-hero-bottom: linear-gradient(180deg, rgba(26,28,43,0) 0%, rgba(26,28,43,0.78) 100%);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply these classes, or re-declare the same properties on your
   own selectors.
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.pa-display,
h1.pa-hero {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: clamp(44px, 6vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

.pa-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
}

.pa-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: 0;
}

.pa-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.pa-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.pa-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.pa-body {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.pa-body-strong {
  font-weight: var(--w-semibold);
}

.pa-meta {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.pa-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.pa-link:hover { border-bottom-color: currentColor; }

/* ============================================================
   BUTTONS — taken verbatim from the scrape spec
   Primary: pill, orange, white text
   Secondary: squared, navy, white text
   ============================================================ */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 15px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 140ms ease, background-color 180ms ease, color 180ms ease;
  text-decoration: none;
}
.pa-btn:active { transform: translateY(1px); }

.pa-btn--primary {
  background: var(--pa-orange);
  color: var(--pa-white);
  border-radius: var(--r-pill);
  border-color: var(--pa-orange);
}
.pa-btn--primary:hover { background: #D96A12; border-color: #D96A12; }

.pa-btn--secondary {
  background: var(--pa-navy);
  color: var(--pa-white);
  border-radius: var(--r-0);
  border-color: var(--pa-navy);
}
.pa-btn--secondary:hover { background: #12142A; }

.pa-btn--ghost {
  background: transparent;
  color: var(--pa-navy);
  border-radius: var(--r-pill);
  border-color: var(--pa-navy);
}
.pa-btn--ghost:hover { background: var(--pa-navy); color: var(--pa-white); }

/* ============================================================
   INPUTS
   ============================================================ */
.pa-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 16px;
  color: var(--pa-navy);
  background: transparent;
  border: 1px solid var(--pa-orange-hot);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.pa-input::placeholder { color: var(--pa-ink-400); }
.pa-input:focus {
  border-color: var(--pa-orange);
  box-shadow: 0 0 0 3px rgba(244,125,32,0.18);
}

/* ============================================================
   LEGACY ALIAS — the pa-academy-core "PA Button" widget emits
   .pa-btn / .pa-btn--{style}; this keeps any older markup that
   still uses .pa-button rendering with the same brand styling.
   ============================================================ */
.pa-button            { display: inline-flex; align-items: center; justify-content: center;
                        padding: 14px 28px; font-family: var(--font-display); font-weight: var(--w-bold);
                        font-size: 15px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
                        text-decoration: none; cursor: pointer; border: 1px solid transparent;
                        transition: transform 140ms ease, background-color 180ms ease, color 180ms ease; }
.pa-button:active     { transform: translateY(1px); }
.pa-button--primary   { background: var(--pa-orange); color: var(--pa-white); border-radius: var(--r-pill); border-color: var(--pa-orange); }
.pa-button--primary:hover   { background: #D96A12; border-color: #D96A12; }
.pa-button--secondary { background: var(--pa-navy); color: var(--pa-white); border-radius: var(--r-0); border-color: var(--pa-navy); }
.pa-button--secondary:hover { background: #12142A; }