/* ==========================================================================
   tokens.css - design tokens (the only file with raw values)

   Everything downstream (base.css, components.css) references these variables,
   never hard-coded colours or sizes. brand.css is generated by build.py from
   brand/brand.md and loaded AFTER this file, so it can override the palette
   and font without touching anything here.
   ========================================================================== */

/* ---- Web font ---------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- Brand palette (defaults; brand.css may override) --------------- */
  --px-navy:      #0b1f3b;   /* Trust        */
  --px-navy-700:  #12315c;   /* raised navy  */
  --px-blue:      #2563eb;   /* Innovation   */
  --px-teal:      #14b8a6;   /* Progress     */
  --px-purple:    #8b5cf6;   /* Creativity   */
  --px-cloud:     #cbd5e1;   /* Balance      */
  --px-mist:      #f3f6fa;   /* Clarity      */

  /* ---- Semantic colour roles ---------------------------------------- */
  --px-bg:            #ffffff;
  --px-bg-muted:      var(--px-mist);
  --px-bg-invert:     var(--px-navy);
  --px-surface:       #f6f8fb;
  --px-text:          var(--px-navy);
  --px-text-muted:    #5b6472;
  --px-text-invert:   #ffffff;
  --px-text-invert-muted: rgba(255, 255, 255, 0.72);
  --px-border:        #e2e6ec;
  --px-border-invert: rgba(255, 255, 255, 0.16);
  --px-link:          var(--px-blue);
  --px-focus:         var(--px-blue);

  /* card taxonomy pills */
  --px-pill-cat-bg:   #e8f0fe;
  --px-pill-cat-fg:   #1a4bd8;
  --px-pill-tag-bg:   #eef1f6;
  --px-pill-tag-fg:   #48546a;

  /* ---- Typography -------------------------------------------------- */
  --px-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --px-weight-normal: 400;
  --px-weight-medium: 500;
  --px-weight-semibold: 600;
  --px-weight-bold: 700;

  --px-fs-h1:   clamp(2.25rem, 4vw + 1rem, 3.25rem);
  --px-fs-h2:   clamp(1.9rem, 2.4vw + 1rem, 2.5rem);
  --px-fs-h3:   clamp(1.4rem, 1.4vw + 1rem, 1.75rem);
  --px-fs-h4:   1.2rem;
  --px-fs-lead: 1.125rem;
  --px-fs-base: 1rem;
  --px-fs-sm:   0.875rem;
  --px-fs-xs:   0.8rem;
  --px-fs-eyebrow: 0.8rem;
  --px-leading: 1.6;
  --px-leading-tight: 1.2;

  /* ---- Layout & spacing ------------------------------------------ */
  --px-container: 1200px;
  --px-container-narrow: 720px;
  --px-gutter: 1.5rem;
  --px-section-y: 4rem;
  --px-section-y-sm: 2.5rem;

  /* ---- Shape & depth ------------------------------------------- */
  --px-radius-sm: 8px;
  --px-radius: 12px;
  --px-radius-lg: 16px;
  --px-radius-pill: 100px;
  --px-shadow: 0 1px 2px rgba(11, 31, 59, 0.06), 0 10px 30px rgba(11, 31, 59, 0.08);
  --px-shadow-hover: 0 4px 10px rgba(11, 31, 59, 0.10), 0 18px 40px rgba(11, 31, 59, 0.14);

  /* ---- Motion ---------------------------------------------- */
  --px-transition: 0.2s ease;

  /* ---- Fixed elements ------------------------------------ */
  --px-header-h: 64px;
}