/* ==========================================================================
   HTJZ Design Tokens
   Loaded globally before all other plugin CSS.
   Colors alias to Astra globals — update Astra Customizer to change them.
   ========================================================================== */

:root {
  /* ── Color aliases (point to Astra globals) ────────────────────────── */
  --htjz-gold: var(--ast-global-color-0); /* #AE986F */
  --htjz-navy: var(--ast-global-color-1); /* #0D1F2E */
  --htjz-green: var(--ast-global-color-2); /* #436436 */
  --htjz-blue: var(--ast-global-color-3); /* #B4D2E7 */
  --htjz-bg-grey: var(--ast-global-color-4); /* #F3F5F7 */
  --htjz-light-text: var(--ast-global-color-5); /* #FFFFFF */
  --htjz-blue-light: var(--ast-global-color-6); /* #D3E3EF */
  --htjz-muted: var(--ast-global-color-7); /* #6B7280 */
  --htjz-border-color: var(--ast-global-color-8); /* #D8DDE1 */

  /* ── Plugin-level colors (not tied to Astra globals) ──────────────── */
  --htjz-danger: #bc412b;
  --htjz-danger-hover: #c9302c;

  /* ── Derived colors (computed from aliases — update only the alias above) */
  --htjz-surface: #ffffff;
  --htjz-navy-10: rgb(from var(--htjz-navy) r g b / 0.1);
  --htjz-navy-40: rgb(from var(--htjz-navy) r g b / 0.4);
  --htjz-green-hover: rgb(from var(--htjz-green) r g b / 0.7);
  --htjz-green-dark: color-mix(in srgb, var(--htjz-green) 70%, black);
  --htjz-gold-dark: color-mix(in srgb, var(--htjz-gold) 70%, black);
  --htjz-bg-grey-light: rgb(from var(--htjz-bg-grey) r g b / 0.5);

  /* ── Font sizes ───────────────────────────────────────────────────────
     Body copy must NOT have an explicit font-size — let Astra's 1rem base
     flow through. Use --htjz-text-sm only for genuinely secondary UI text.
     Use --htjz-text-base to explicitly reset inside a smaller-font parent.
     ─────────────────────────────────────────────────────────────────── */
  --htjz-text-xs: 0.625rem; /* 10px */
  --htjz-text-sm: 0.75rem; /* 12px */
  --htjz-text-base: 0.875rem; /* 14px */
  --htjz-text-lg: 1rem; /* 16px */
  --htjz-text-xl: 1.25rem; /* 20px */
  --htjz-text-2xl: 1.5rem; /* 24px */

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --htjz-space-xs: 0.25rem; /*  4px */
  --htjz-space-sm: 0.5rem; /*  8px */
  --htjz-space-md: 1rem; /* 16px */
  --htjz-space-lg: 1.5rem; /* 24px */
  --htjz-space-xl: 2rem; /* 32px */
  --htjz-space-2xl: 3rem; /* 48px — large section gaps */

  /* ── Borders ───────────────────────────────────────────────────────── */
  --htjz-border: 1px solid var(--htjz-border-color);
  --htjz-border-lg: 2px solid var(--htjz-border-color);
  --htjz-border-xl: 4px solid var(--htjz-border-color);

  /* ── Border radius ─────────────────────────────────────────────────── */
  --htjz-radius-sm: 0.25rem; /*  4px */
  --htjz-radius-md: 0.5rem; /*  8px */
  --htjz-radius-lg: 0.75rem; /* 12px */
  --htjz-radius-full: 50rem; /* pill  */

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --htjz-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  --htjz-shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  --htjz-shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.14);

  /* ── Focus ─────────────────────────────────────────────────────────── */
  --htjz-focus-ring: 0 0 0 2px rgb(from var(--htjz-green) r g b / 0.35);

  /* ── Transition ────────────────────────────────────────────────────── */
  --htjz-transition: 0.2s ease;
}