/*
 * HPL design tokens
 * Brand values from bodyfence.net/hpl (Elementor global colors and typography) and the HPL plugin front.css.
 * Only variables live here: change a brand value once and every rule that uses it follows.
 */
:root {
  /* Brand colors */
  --hpl-red: #E30613;          /* Elementor "accent", plugin --mm-primary */
  --hpl-red-dark: #C90C0F;     /* hover / pressed */
  --hpl-red-rgb: 227, 6, 19;
  --hpl-dark: #262A32;         /* dark buttons, headings on light backgrounds */
  --hpl-dark-rgb: 38, 42, 50;
  --hpl-black: #000000;
  --hpl-white: #FFFFFF;

  /* Text */
  --hpl-text: #333333;         /* Elementor "text" */
  --hpl-muted: #898A93;
  --hpl-muted-light: #A2A3A5;  /* Elementor "secondary" */

  /* Greys and surfaces */
  --hpl-grey-50: #F7F8FA;
  --hpl-grey-100: #F6F6F6;
  --hpl-grey-200: #F0F0F0;
  --hpl-grey-300: #DDDFE0;
  --hpl-grey-400: #C7C8C8;
  --hpl-border: #E5E7EB;       /* plugin --mm-border */

  /* Status */
  --hpl-success: #0A7A33;
  --hpl-success-bg: #EAF7EF;
  --hpl-warning-bg: #FFF4E2;
  --hpl-danger: #B00020;

  /* Typography */
  --hpl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hpl-weight-light: 300;
  --hpl-weight-regular: 400;
  --hpl-weight-medium: 500;
  --hpl-weight-semibold: 600;
  --hpl-weight-bold: 700;
  --hpl-weight-heavy: 800;
  --hpl-line-height: 1.5;

  /* Shape and spacing */
  --hpl-radius-sm: 6px;
  --hpl-radius: 12px;          /* inputs, list rows */
  --hpl-radius-card: 16px;     /* plugin --mm-radius */
  --hpl-radius-pill: 100px;    /* site and plugin buttons */
  --hpl-space: 16px;           /* plugin --mm-pad */
  --hpl-focus-ring: 0 0 0 3px rgba(var(--hpl-red-rgb), 0.18);
  --hpl-shadow-sm: 0 2px 8px rgba(18, 24, 32, 0.08);
  --hpl-shadow: 0 8px 24px rgba(18, 24, 32, 0.14);

  /* Map the brand onto Bootstrap 5.3 so plain Bootstrap classes use HPL colors */
  --bs-primary: var(--hpl-red);
  --bs-primary-rgb: var(--hpl-red-rgb);
  --bs-dark: var(--hpl-dark);
  --bs-dark-rgb: var(--hpl-dark-rgb);
  --bs-body-font-family: var(--hpl-font);
  --bs-body-font-weight: var(--hpl-weight-light);
  --bs-body-line-height: var(--hpl-line-height);
  --bs-body-color: var(--hpl-text);
  --bs-secondary-color: var(--hpl-muted);
  --bs-border-color: var(--hpl-border);
  --bs-border-radius: var(--hpl-radius);
  --bs-border-radius-lg: var(--hpl-radius-card);
  --bs-border-radius-pill: var(--hpl-radius-pill);
  --bs-link-color: var(--hpl-red);
  --bs-link-color-rgb: var(--hpl-red-rgb);
  --bs-link-hover-color: var(--hpl-red-dark);
  --bs-link-hover-color-rgb: 201, 12, 15;
  --bs-focus-ring-color: rgba(var(--hpl-red-rgb), 0.25);

  /* Keep plugin variable names working for markup ported from the plugin */
  --mm-bg: var(--hpl-white);
  --mm-fg: #111111;
  --mm-muted: #6B7280;
  --mm-border: var(--hpl-border);
  --mm-primary: var(--hpl-red);
  --mm-radius: var(--hpl-radius-card);
  --mm-pad: var(--hpl-space);
}