/* =========================================================================
   IDZ Practice Launch: global theme configuration (design tokens).

   Source of truth for the light palette: the live idz-agency theme
   (wp-content/themes/idz-agency/assets/design.css :root and theme.json),
   read 31 Oct 2026. Light values are copied value for value; the dark
   palette is new and scoped to pages rendered by this plugin.

   Layers:
     1. Semantic tokens (--tp-*): light on :root, dark under
        html[data-tp-theme="dark"], or html[data-tp-theme="auto"] when the
        system prefers dark.
     2. Bridge: on body.page-practice the live theme variables (--v2-*) are
        re-pointed at the semantic tokens, so every reused theme component
        (header, buttons, FAQ, cards, footer) follows light/dark mode.
     3. Primitives built only from tokens: type scale, layout gaps,
        button variants (primary, secondary, ghost, disabled) and states.
   ========================================================================= */

:root {
  /* Surfaces */
  --tp-surface: #f5f2ec;
  --tp-surface-raised: #ffffff;
  --tp-surface-band: #e9e4da;
  --tp-surface-sunken: #efeae2;
  --tp-header-bg: rgba(245, 242, 236, 0.92);

  /* Text */
  --tp-ink: #1d1c1a;
  --tp-text: #45423c;
  --tp-text-muted: #5e5a53;

  /* Lines */
  --tp-line: #ddd7cc;
  --tp-line-soft: #efeae2;
  --tp-line-input: #cfc8ba;

  /* Brand (plum) */
  --tp-brand: #604977;
  --tp-brand-hover: #4a3860;
  --tp-brand-soft: #e3daec;
  --tp-on-brand: #ffffff;

  /* Accent (coral) */
  --tp-accent: #f06c72;
  --tp-accent-ink: #d9545b;
  --tp-accent-strong: #b83c44;
  /* Live value is #c4434b (4.42:1 on the page). Raised to the live coral-dark for AA. */
  --tp-accent-eyebrow: #b83c44;
  --tp-accent-soft: #fce9ea;
  --tp-accent-line: #f5c4c6;
  --tp-rose: #f7a3a7;
  --tp-on-accent: #1d1c1a;
  /* Order band (the plum section). Live: --v2-brand background, rose eyebrow
     #f7a3a7 (3.96:1, below AA); the eyebrow is lightened here. */
  --tp-order-bg: #604977;
  --tp-order-ink: #f5f2ec;
  --tp-order-muted: #e3daec;
  --tp-order-eyebrow: #fac3c6;
  --tp-order-line: rgba(245, 242, 236, 0.25);

  /* Status (from the live form-preview notices) */
  --tp-success-bg: #e8f0eb;
  --tp-success-line: #bfd4c6;
  --tp-success-ink: #2c4a3b;
  --tp-danger-bg: #fceeee;
  --tp-danger-line: #f5c4c6;
  --tp-danger-ink: #8a2e35;

  /* Disabled */
  --tp-disabled-bg: #e3ddd2;
  --tp-disabled-ink: #6f6a62;
  --tp-disabled-line: #d6cfc3;

  /* Focus */
  --tp-focus: #604977;
  --tp-focus-ring: 0 0 0 3px #f5f2ec, 0 0 0 5px #604977;

  /* Elevation */
  --tp-shadow-card: 0 40px 80px -48px rgba(43, 33, 53, 0.5);
  --tp-shadow-pop: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
  --tp-shadow-sticky: 0 -12px 32px -16px rgba(29, 28, 26, 0.35);

  /* Typography: families (live theme.json) */
  --tp-font-head: 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  --tp-font-text: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tp-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Typography: scale (theme.json fontSizes, fluid where the theme is fluid) */
  --tp-size-2xs: 0.75rem;
  --tp-size-xs: 0.875rem;
  --tp-size-sm: 1rem;
  --tp-size-md: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
  --tp-size-lg: clamp(1.25rem, 1.2rem + 0.25vw, 1.375rem);
  --tp-size-xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --tp-size-2xl: clamp(2.125rem, 1.8rem + 1.5vw, 2.875rem);
  --tp-size-3xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --tp-size-h1: clamp(40px, 5.2vw, 68px);
  --tp-size-h2: clamp(32px, 3.6vw, 46px);
  --tp-size-h3: clamp(20px, 1.6vw, 24px);
  --tp-size-lede: clamp(17px, 1.5vw, 20px);
  --tp-leading-tight: 1.05;
  --tp-leading-snug: 1.2;
  --tp-leading-body: 1.55;
  --tp-leading-loose: 1.65;
  --tp-tracking-head: -0.015em;
  --tp-tracking-display: -0.02em;
  --tp-tracking-caps: 0.08em;
  --tp-weight-regular: 400;
  --tp-weight-medium: 500;
  --tp-weight-semibold: 600;
  --tp-weight-bold: 700;

  /* Layout (live .v2-wrap and section rhythm) */
  --tp-container: 1200px;
  --tp-container-narrow: 760px;
  --tp-gutter: clamp(20px, 4vw, 40px);
  --tp-section-y: clamp(64px, 9vw, 112px);
  --tp-section-y-tight: clamp(48px, 7vw, 88px);
  --tp-gap-2xs: 4px;
  --tp-gap-xs: 8px;
  --tp-gap-sm: 12px;
  --tp-gap-md: 16px;
  --tp-gap-lg: 24px;
  --tp-gap-xl: 40px;
  --tp-gap-2xl: 56px;
  --tp-gap-3xl: 72px;

  /* Radii */
  --tp-radius-sm: 6px;
  --tp-radius-md: 8px;
  --tp-radius-lg: 12px;
  --tp-radius-xl: 14px;
  --tp-radius-2xl: 16px;
  --tp-radius-pill: 999px;

  /* Motion */
  --tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tp-duration: 0.15s;

  color-scheme: light;
}

/* ---- Dark palette --------------------------------------------------------- */
html[data-tp-theme='dark'] {
  --tp-surface: #171519;
  --tp-surface-raised: #221f25;
  --tp-surface-band: #1e1b21;
  --tp-surface-sunken: #2a262d;
  --tp-header-bg: rgba(23, 21, 25, 0.9);
  --tp-ink: #f3efe8;
  --tp-text: #d9d3c9;
  --tp-text-muted: #aca59a;
  --tp-line: #3a353d;
  --tp-line-soft: #2a262d;
  --tp-line-input: #4d4752;
  --tp-brand: #c4b0dc;
  --tp-brand-hover: #d8c9ea;
  --tp-brand-soft: #3b3047;
  --tp-on-brand: #171519;
  --tp-accent: #f06c72;
  --tp-accent-ink: #f4878c;
  --tp-accent-strong: #f6a3a7;
  --tp-accent-eyebrow: #f4878c;
  --tp-accent-soft: #3a2326;
  --tp-accent-line: #6e3c40;
  --tp-rose: #f7a3a7;
  --tp-on-accent: #171519;
  --tp-order-bg: #2e2439;
  --tp-order-ink: #f3efe8;
  --tp-order-muted: #d2c6e2;
  --tp-order-eyebrow: #f7a3a7;
  --tp-order-line: rgba(243, 239, 232, 0.18);
  --tp-success-bg: #1d2b23;
  --tp-success-line: #355443;
  --tp-success-ink: #b9dcc6;
  --tp-danger-bg: #352023;
  --tp-danger-line: #6e3c40;
  --tp-danger-ink: #f6b9bc;
  --tp-disabled-bg: #2c2830;
  --tp-disabled-ink: #8c8591;
  --tp-disabled-line: #3a353d;
  --tp-focus: #c4b0dc;
  --tp-focus-ring: 0 0 0 3px #171519, 0 0 0 5px #c4b0dc;
  --tp-shadow-card: 0 40px 80px -48px rgba(0, 0, 0, 0.8);
  --tp-shadow-pop: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  --tp-shadow-sticky: 0 -12px 32px -16px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-tp-theme='auto'] {
    --tp-surface: #171519;
    --tp-surface-raised: #221f25;
    --tp-surface-band: #1e1b21;
    --tp-surface-sunken: #2a262d;
    --tp-header-bg: rgba(23, 21, 25, 0.9);
    --tp-ink: #f3efe8;
    --tp-text: #d9d3c9;
    --tp-text-muted: #aca59a;
    --tp-line: #3a353d;
    --tp-line-soft: #2a262d;
    --tp-line-input: #4d4752;
    --tp-brand: #c4b0dc;
    --tp-brand-hover: #d8c9ea;
    --tp-brand-soft: #3b3047;
    --tp-on-brand: #171519;
    --tp-accent: #f06c72;
    --tp-accent-ink: #f4878c;
    --tp-accent-strong: #f6a3a7;
    --tp-accent-eyebrow: #f4878c;
    --tp-accent-soft: #3a2326;
    --tp-accent-line: #6e3c40;
    --tp-rose: #f7a3a7;
    --tp-on-accent: #171519;
    --tp-order-bg: #2e2439;
    --tp-order-ink: #f3efe8;
    --tp-order-muted: #d2c6e2;
    --tp-order-eyebrow: #f7a3a7;
    --tp-order-line: rgba(243, 239, 232, 0.18);
    --tp-success-bg: #1d2b23;
    --tp-success-line: #355443;
    --tp-success-ink: #b9dcc6;
    --tp-danger-bg: #352023;
    --tp-danger-line: #6e3c40;
    --tp-danger-ink: #f6b9bc;
    --tp-disabled-bg: #2c2830;
    --tp-disabled-ink: #8c8591;
    --tp-disabled-line: #3a353d;
    --tp-focus: #c4b0dc;
    --tp-focus-ring: 0 0 0 3px #171519, 0 0 0 5px #c4b0dc;
    --tp-shadow-card: 0 40px 80px -48px rgba(0, 0, 0, 0.8);
    --tp-shadow-pop: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
    --tp-shadow-sticky: 0 -12px 32px -16px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

/* ---- Bridge: point the live theme variables at the semantic tokens -------- */
body.page-practice {
  --v2-page: var(--tp-surface);
  --v2-ink: var(--tp-ink);
  --v2-body: var(--tp-text);
  --v2-muted: var(--tp-text-muted);
  --v2-line: var(--tp-line);
  --v2-line-soft: var(--tp-line-soft);
  --v2-band: var(--tp-surface-band);
  --v2-brand: var(--tp-brand);
  --v2-brand-hover: var(--tp-brand-hover);
  --v2-brand-soft: var(--tp-brand-soft);
  --v2-coral: var(--tp-accent);
  --v2-coral-ink: var(--tp-accent-ink);
  --v2-coral-dark: var(--tp-accent-strong);
  --v2-coral-eyebrow: var(--tp-accent-eyebrow);
  --v2-pink: var(--tp-accent-soft);
  --v2-pink-soft: var(--tp-accent-soft);
  --v2-pink-line: var(--tp-accent-line);
  --v2-rose: var(--tp-rose);
  --v2-white: var(--tp-surface-raised);
  --v2-input-line: var(--tp-line-input);
  --v2-head: var(--tp-font-head);
  --v2-text: var(--tp-font-text);
  --v2-mono: var(--tp-font-mono);
  background: var(--tp-surface);
  color: var(--tp-ink);
}

/* Live rules with hard-coded colours, re-expressed through tokens on these pages. */
body.page-practice .v2-header {
  background: var(--tp-header-bg);
}
body.page-practice .v2-btn,
body.page-practice .v2-btn-sm,
body.page-practice .v2-btn-lg,
body.page-practice .v2-btn:hover,
body.page-practice .v2-btn-sm:hover,
body.page-practice .v2-btn-lg:hover {
  color: var(--tp-on-brand);
}
body.page-practice .v2-btn-outline:hover {
  background: var(--tp-ink);
  color: var(--tp-surface);
}
body.page-practice .hm-order {
  background: var(--tp-order-bg);
  color: var(--tp-order-ink);
}
body.page-practice .hm-order .v2-eyebrow.is-rose {
  color: var(--tp-order-eyebrow);
}
body.page-practice .hm-addon p,
body.page-practice .hm-order-quote figcaption,
body.page-practice .hm-diy {
  color: var(--tp-order-muted);
}
body.page-practice .hm-diy a {
  color: var(--tp-order-ink);
}
body.page-practice .hm-badge-coral {
  color: var(--tp-on-accent);
}
body.page-practice .v2-panel-actions .v2-link {
  color: var(--tp-surface);
}
body.page-practice .hm-addon,
body.page-practice .hm-diy {
  border-top-color: var(--tp-order-line);
}
/* The live logo is a raster wordmark in dark plum and coral; in dark mode it is
   re-lit (lightness inverted, hues kept) so it stays legible on the dark header. */
html[data-tp-theme='dark'] body.page-practice .v2-header-logo img {
  filter: invert(1) hue-rotate(180deg) saturate(1.4);
}
@media (prefers-color-scheme: dark) {
  html[data-tp-theme='auto'] body.page-practice .v2-header-logo img {
    filter: invert(1) hue-rotate(180deg) saturate(1.4);
  }
}
body.page-practice .v2-menu span {
  background: var(--tp-ink);
}
/* Live guarantee icons use coral #f06c72 for their 28px numerals (2.65:1). Use the
   live coral-ink (3.5:1, AA for large text) for the numerals; the ring stays coral. */
body.page-practice .v2-guarantee-icon {
  color: var(--tp-accent-ink);
}

/* ---- Type primitives ------------------------------------------------------ */
.tp-eyebrow {
  font-family: var(--tp-font-head);
  font-size: 15px;
  font-weight: var(--tp-weight-bold);
  letter-spacing: var(--tp-tracking-caps);
  text-transform: uppercase;
  color: var(--tp-brand);
}
.tp-h1 {
  font-family: var(--tp-font-head);
  font-weight: var(--tp-weight-semibold);
  font-size: var(--tp-size-h1);
  line-height: 1.03;
  letter-spacing: var(--tp-tracking-display);
  text-wrap: balance;
}
.tp-h2 {
  font-family: var(--tp-font-head);
  font-weight: var(--tp-weight-semibold);
  font-size: var(--tp-size-h2);
  line-height: 1.1;
  letter-spacing: var(--tp-tracking-head);
  text-wrap: balance;
}
.tp-h3 {
  font-family: var(--tp-font-head);
  font-weight: var(--tp-weight-bold);
  font-size: var(--tp-size-h3);
  line-height: var(--tp-leading-snug);
}
.tp-lede {
  font-size: var(--tp-size-lede);
  line-height: var(--tp-leading-body);
  color: var(--tp-text);
  text-wrap: pretty;
}
.tp-body {
  font-size: var(--tp-size-sm);
  line-height: var(--tp-leading-loose);
  color: var(--tp-text);
}
.tp-small {
  font-size: var(--tp-size-xs);
  line-height: var(--tp-leading-body);
  color: var(--tp-text-muted);
}

/* ---- Layout primitives ---------------------------------------------------- */
.tp-container {
  max-width: var(--tp-container);
  margin-inline: auto;
  padding-inline: var(--tp-gutter);
}
.tp-section {
  padding-block: var(--tp-section-y);
}
.tp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tp-gap-md);
}
.tp-grid {
  display: grid;
  gap: var(--tp-gap-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tp-grid.is-2,
  .tp-grid.is-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .tp-grid.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .tp-grid {
    gap: var(--tp-gap-xl) var(--tp-gap-lg);
  }
}

/* ---- Buttons: primary, secondary, ghost, disabled ------------------------- */
.tp-btn {
  --tp-btn-bg: var(--tp-brand);
  --tp-btn-ink: var(--tp-on-brand);
  --tp-btn-line: var(--tp-brand);
  --tp-btn-bg-hover: var(--tp-brand-hover);
  --tp-btn-ink-hover: var(--tp-on-brand);
  --tp-btn-line-hover: var(--tp-brand-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-gap-xs);
  min-height: 44px;
  padding: 15px 22px;
  border: 1.5px solid var(--tp-btn-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-btn-bg);
  color: var(--tp-btn-ink);
  font-family: var(--tp-font-text);
  font-size: var(--tp-size-sm);
  font-weight: var(--tp-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--tp-duration) var(--tp-ease),
    color var(--tp-duration) var(--tp-ease),
    border-color var(--tp-duration) var(--tp-ease),
    transform var(--tp-duration) var(--tp-ease);
}
.tp-btn:hover {
  background: var(--tp-btn-bg-hover);
  color: var(--tp-btn-ink-hover);
  border-color: var(--tp-btn-line-hover);
}
.tp-btn:active {
  transform: translateY(1px);
}
.tp-btn:focus-visible {
  outline: none;
  box-shadow: var(--tp-focus-ring);
}
.tp-btn.is-sm {
  min-height: 36px;
  padding: 10px 16px;
  font-size: var(--tp-size-xs);
  border-radius: var(--tp-radius-sm);
}
.tp-btn.is-lg {
  padding: 17px 26px;
  font-size: 17px;
}
.tp-btn.is-block {
  display: flex;
  width: 100%;
}
.tp-btn.is-secondary {
  --tp-btn-bg: transparent;
  --tp-btn-ink: var(--tp-ink);
  --tp-btn-line: var(--tp-ink);
  --tp-btn-bg-hover: var(--tp-ink);
  --tp-btn-ink-hover: var(--tp-surface);
  --tp-btn-line-hover: var(--tp-ink);
}
.tp-btn.is-ghost {
  --tp-btn-bg: transparent;
  --tp-btn-ink: var(--tp-brand);
  --tp-btn-line: transparent;
  --tp-btn-bg-hover: var(--tp-brand-soft);
  --tp-btn-ink-hover: var(--tp-ink);
  --tp-btn-line-hover: transparent;
}
.tp-btn.is-on-brand {
  --tp-btn-bg: var(--tp-surface);
  --tp-btn-ink: var(--tp-ink);
  --tp-btn-line: var(--tp-surface);
  --tp-btn-bg-hover: var(--tp-surface-raised);
  --tp-btn-ink-hover: var(--tp-ink);
  --tp-btn-line-hover: var(--tp-surface-raised);
}
.tp-btn:disabled,
.tp-btn[aria-disabled='true'],
.tp-btn.is-disabled {
  --tp-btn-bg: var(--tp-disabled-bg);
  --tp-btn-ink: var(--tp-disabled-ink);
  --tp-btn-line: var(--tp-disabled-line);
  --tp-btn-bg-hover: var(--tp-disabled-bg);
  --tp-btn-ink-hover: var(--tp-disabled-ink);
  --tp-btn-line-hover: var(--tp-disabled-line);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Focus for theme links and buttons reused on these pages (the live theme has none). */
body.page-practice a:focus-visible,
body.page-practice button:focus-visible,
body.page-practice summary:focus-visible {
  outline: none;
  box-shadow: var(--tp-focus-ring);
  border-radius: var(--tp-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.page-practice) {
    scroll-behavior: auto;
  }
  body.page-practice *,
  body.page-practice *::before,
  body.page-practice *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}