/*
  ZHM design tokens, UI kit v0.5. One source for every ZHM stylesheet:
  blog.css, case-study.css and pages/*.css load after this file and only use var(--zhm-*).
  The UI kit page (brand/zhm-ui-kit.html) is built from this same file.
*/
:root {
  /* Brand */
  --zhm-indigo: #472E8F;
  --zhm-blue: #407BBE;
  --zhm-coral: #EF4D5F;
  --zhm-deep: #2A2566;
  --zhm-lavender: #F1EDFC;
  --zhm-mist: #F8F6FE;            /* lightest surface: hero backgrounds, soft panels, row hover */
  --zhm-line: #DAD3F5;            /* decorative borders only, never form controls */
  --zhm-ink: #2B2A3D;
  --zhm-slate: #5B5A6E;
  --zhm-white: #FFFFFF;
  --zhm-blue-text: #396DA9;
  --zhm-coral-text: #D34151;
  --zhm-on-dark-muted: #D9D5F2;   /* secondary text on Deep / Indigo: 9.49:1 on Deep, 7.18:1 on Indigo */

  /* Interaction states */
  --zhm-field-border: #8985B0;    /* 3.47:1 on white, 3.02:1 on Lavender (WCAG 1.4.11) */
  --zhm-placeholder: #7671A2;     /* 4.51:1 on white */
  --zhm-focus: #396DA9;           /* 5.34:1 on white, 4.64:1 on Lavender; never confused with error red */
  --zhm-focus-on-dark: #FFFFFF;
  --zhm-disabled-bg: #EEEDF4;
  --zhm-disabled-fg: #8E8BA6;     /* disabled controls are exempt from contrast rules */

  /* Status: text passes 4.5:1 on white and on its own tint */
  --zhm-error: #B3261E;   --zhm-error-tint: #FDECEE;
  --zhm-success: #1F7D52; --zhm-success-tint: #E7F5EE;   /* white text on success: 5.11:1 */
  --zhm-warning: #A36100; --zhm-warning-tint: #FFF4E0;
  --zhm-info: #396DA9;    --zhm-info-tint: #EAF1FA;   --zhm-info-line: #C9DCF0;
  --zhm-danger: #B3261E;  --zhm-danger-hover: #8E1C16;   /* white text 6.54:1 / 9.02:1 */

  /* Type */
  --zhm-font-heading: "Outfit", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zhm-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape: one radius scale */
  --zhm-radius-sm: 8px;           /* small controls, inputs */
  --zhm-radius-md: 12px;          /* icon tiles, nested images */
  --zhm-radius-card: 20px;        /* cards, boxes, tables, testimonials */
  --zhm-radius-lg: 24px;          /* profile card, hero media */
  --zhm-radius-xl: 28px;          /* screenshot frames, closing call-to-action cards */
  --zhm-radius-pill: 999px;

  /* Size */
  --zhm-target: 44px;             /* standard hit area; WCAG 2.5.8 minimum is 24px */
  --zhm-btn-h-sm: 40px;
  --zhm-btn-h: 48px;
  --zhm-btn-h-lg: 52px;           /* landing and case study pages */

  /* Layout */
  --zhm-col: 760px;               /* reading column: article, boxes, share, author */
  --zhm-wide: 1200px;             /* wide content: heroes, related posts, case study sections */
  --zhm-section-y: 104px;         /* vertical padding of full-width sections */
  --zhm-box-pad: 28px 32px;       /* inner padding of every boxed element in an article */
  --zhm-box-gap: 2em;             /* space above and below every boxed element in an article */

  /* Depth and motion */
  --zhm-shadow-raised: 0 18px 40px rgba(42, 37, 102, 0.12);
  --zhm-shadow-pop: 0 10px 24px rgba(42, 37, 102, 0.18);
  --zhm-ease: cubic-bezier(.2, .7, .2, 1);
  --zhm-spring: cubic-bezier(.34, 1.4, .64, 1);
  --zhm-dur: .28s;
}
@media (max-width: 1024px) { :root { --zhm-section-y: 88px; } }
@media (max-width: 767px) { :root { --zhm-section-y: 64px; --zhm-box-pad: 22px 20px; } }
@media (prefers-reduced-motion: reduce) { :root { --zhm-dur: .01s; } }