/* ==========================================================================
   Professional Advantage � design tokens
   Source: design_handoff_blog_reskin/ds/tokens/{colors,typography,effects}.css
           plus the palette-compliance :root overrides from the prototype.

   Phase 0 of the blog reskin: tokens only. Loading this file makes no visual
   change on its own � components opt in by consuming the custom properties.

   Dark mode is opt-in via data-pa-theme="dark" on the <html> element. A generic
   data-theme attribute or OS-level dark mode must NOT trigger it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typeface � Inter (brand family). Self-hosted variable font from
   /fonts/InterVariable.woff2 (covers all weights).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Brand palette ================================================== */
  --pa-purple: #522A80;
  --pa-deep-purple: #291540;
  --pa-offwhite: #FCFCFC;

  /* Accent trio */
  --pa-orange: #EC6607;
  --pa-amber: #FFAA00;
  --pa-cyan: #7FF0FF;

  /* Shades & tints */
  --pa-purple-tint: #F9F1FB;
  --pa-purple-mid: #814D99;
  --pa-purple-shade: #291540;

  --pa-orange-tint: #FEEEE6;
  --pa-orange-mid: #FC9256;
  --pa-orange-shade: #B84300;

  --pa-amber-tint: #FDFAEA;
  --pa-amber-mid: #FFECA6;
  --pa-amber-shade: #E69900;

  --pa-cyan-tint: #E7FBFF;
  --pa-cyan-mid: #CDF7FD;
  --pa-cyan-shade: #06B7DB;

  /* Neutrals � the four ratified values. 100 and 50 are deliberately the same
     tone per the prototype's palette-compliance override. */
  --pa-neutral-900: #333333;
  --pa-neutral-300: #D9D9D9;
  --pa-neutral-100: #EFEFEF;
  --pa-neutral-50: #F7F7F7;

  /* ===== Semantic aliases =============================================== */
  --text-heading: var(--pa-deep-purple);
  --text-body: var(--pa-neutral-900);
  --text-muted: #6B6B6B;
  --text-on-brand: var(--pa-offwhite);
  --text-link: var(--pa-purple);

  --surface-page: var(--pa-offwhite);
  --surface-card: #FFFFFF;
  --surface-subtle: var(--pa-neutral-50);
  --surface-tint: var(--pa-purple-tint);
  --surface-brand: var(--pa-purple);
  --surface-ink: var(--pa-deep-purple);

  --border-subtle: var(--pa-neutral-300);
  --border-strong: var(--pa-purple);

  --accent-primary: var(--pa-purple);
  --accent-warm: var(--pa-orange);
  --accent-highlight: var(--pa-amber);
  --accent-cool: var(--pa-cyan);

  --focus-ring: var(--pa-purple-mid);

  /* Interactive accent � links, tabs, breadcrumbs, subnav, chevrons */
  --interactive-accent: var(--pa-purple);
  --interactive-accent-strong: var(--pa-deep-purple);

  /* ===== Component tokens (dark-mode remappable) ======================== */
  --btn-primary-bg: var(--pa-purple);
  --btn-primary-bg-hover: var(--pa-deep-purple);
  --btn-primary-bg-active: #1D0E2E;
  --btn-secondary-bg: var(--pa-purple-tint);
  --btn-secondary-bg-hover: #EBD9EB;
  --btn-secondary-fg: var(--pa-purple);
  --btn-outline-fg: var(--pa-purple);
  --btn-outline-border: var(--pa-purple);
  --btn-ghost-fg: var(--pa-purple);
  --btn-ghost-bg-hover: var(--pa-purple-tint);

  /* Two-tone icon library pairing. Never tinted with accent colours. */
  --icon-container: var(--pa-purple);
  --icon-glyph: var(--pa-purple-tint);
  --icon-container-reverse: var(--pa-purple-tint);

  /* Badges: products = purple, topics = cyan, industries = orange,
     featured = amber, meta = neutral. */
  --badge-purple-bg: var(--pa-purple-tint);   --badge-purple-fg: var(--pa-purple);
  --badge-orange-bg: var(--pa-orange-tint);   --badge-orange-fg: var(--pa-orange-shade);
  --badge-amber-bg: var(--pa-amber-tint);     --badge-amber-fg: var(--pa-amber-shade);
  --badge-cyan-bg: var(--pa-cyan-tint);       --badge-cyan-fg: var(--pa-cyan-shade);
  --badge-neutral-bg: var(--pa-neutral-100);  --badge-neutral-fg: var(--pa-neutral-900);

  /* ===== Typography ===================================================== */
  --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", -apple-system, "Segoe UI", sans-serif;

  --weight-quote: 200;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  --leading-heading: 1.15;
  --leading-snug: 1.25;
  --leading-body: 1.5;
  --leading-article: 1.75;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;

  /* ===== Spacing (8px base) ============================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --gutter: 20px;

  /* ===== Radii ========================================================== */
  --radius-xs: 10px;   /* pagination */
  --radius-sm: 12px;   /* small fields */
  --radius-tile: 14px;
  --radius-md: 18px;   /* media, sidebar panels */
  --radius-lg: 20px;   /* cards */
  --radius-xl: 24px;
  --radius-hero: 26px; /* hero / feature panels */
  --radius-pill: 999px;
  --radius-icon: 30%;

  /* ===== Shadows ======================================================== */
  --shadow-card: 0 2px 12px rgba(41, 20, 64, 0.08);
  --shadow-raised: 0 8px 28px rgba(41, 20, 64, 0.14);

  /* ===== Motion ========================================================= */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ===== Layout containers ============================================== */
  --container-wide: 1240px;  /* header, home hero, contact band, footer */
  --container-content: 1140px; /* article, listing, about */
  --container-narrow: 900px; /* search */
  --header-height: 70px;
}

/* --------------------------------------------------------------------------
   Dark mode � ratified palette colours only: Deep Purple pages, Purple cards,
   Neon interactive accent, Onahau hover accent.
   -------------------------------------------------------------------------- */
[data-pa-theme="dark"] {
  --surface-page: #291540;
  --surface-card: #522A80;
  --surface-subtle: rgba(252, 252, 252, 0.06);
  --surface-tint: rgba(252, 252, 252, 0.08);

  --text-heading: var(--pa-offwhite);
  --text-body: rgba(252, 252, 252, 0.85);
  --text-muted: rgba(252, 252, 252, 0.6);
  --text-link: var(--pa-cyan);

  --border-subtle: rgba(252, 252, 252, 0.18);
  --border-strong: rgba(252, 252, 252, 0.45);
  --focus-ring: var(--pa-cyan);

  --interactive-accent: var(--pa-cyan);
  --interactive-accent-strong: var(--pa-cyan-mid);

  --btn-primary-bg-hover: #6B3AA6;
  --btn-primary-bg-active: #7B48B8;
  --btn-secondary-bg: rgba(252, 252, 252, 0.12);
  --btn-secondary-bg-hover: rgba(252, 252, 252, 0.2);
  --btn-secondary-fg: var(--pa-offwhite);
  --btn-outline-fg: var(--pa-offwhite);
  --btn-outline-border: rgba(252, 252, 252, 0.45);
  --btn-ghost-fg: var(--pa-cyan);
  --btn-ghost-bg-hover: rgba(252, 252, 252, 0.16);

  /* Icon pairing inverts in dark mode */
  --icon-container: var(--pa-purple-tint);
  --icon-glyph: var(--pa-purple);
  --icon-container-reverse: var(--pa-purple);

  --badge-purple-bg: rgba(249, 241, 251, 0.16); --badge-purple-fg: var(--pa-purple-tint);
  --badge-orange-bg: rgba(236, 102, 7, 0.22);   --badge-orange-fg: var(--pa-orange-mid);
  --badge-amber-bg: rgba(255, 170, 0, 0.2);     --badge-amber-fg: var(--pa-amber);
  --badge-cyan-bg: rgba(127, 240, 255, 0.16);   --badge-cyan-fg: var(--pa-cyan);
  --badge-neutral-bg: rgba(252, 252, 252, 0.12);--badge-neutral-fg: rgba(252, 252, 252, 0.85);
}

/* --------------------------------------------------------------------------
   Theme-swapped assets. Mark the light-mode asset .pa-logo-light / .pa-icon-light
   and the dark-mode one .pa-logo-dark / .pa-icon-dark.
   -------------------------------------------------------------------------- */
.pa-logo-dark,
.pa-icon-dark { display: none; }

[data-pa-theme="dark"] .pa-logo-light,
[data-pa-theme="dark"] .pa-icon-light { display: none; }

[data-pa-theme="dark"] .pa-logo-dark,
[data-pa-theme="dark"] .pa-icon-dark { display: block; }

/* --------------------------------------------------------------------------
   Brand swirl � background device only. Always applied as a CSS mask filled
   with a low-opacity tone, oversized and bleeding off a panel corner.
   Never place near the logo.
   -------------------------------------------------------------------------- */
.pa-swirl {
  -webkit-mask-image: url("/content/brand/logos/pa-swirl-thick.svg");
  mask-image: url("/content/brand/logos/pa-swirl-thick.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

::selection {
  background: var(--pa-purple);
  color: #FFFFFF;
}

@keyframes paFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}