/* ============================================================================
   CompLogix design tokens
   ----------------------------------------------------------------------------
   Extracted from the live production site (https://www.complogix.io) on
   2026-08-03 by reading computed styles off the rendered Divi output.
   This file is the brand source of truth for new landing pages.

   Values are in px to match what Divi emits, so pages built on these tokens
   sit visually flush with existing Divi sections.

   ACCESSIBILITY: the brand's cyan, blue and green all fall below WCAG AA
   contrast when used for text. Measured ratios are noted inline. Use the
   `-aa` variants for any text, link, or button label. See README.md.
   ========================================================================== */

:root {
  /* --- Brand: core ------------------------------------------------------- */

  /* Navy. h1 colour and dark section background. 7.47:1 with white — AAA. */
  --clx-navy: #3a5870;
  /* Cyan. Links, eyebrow labels, accents. 2.14:1 on white — FAILS AA as text. */
  --clx-cyan: #14c0ed;
  /* Blue. Standard button fill. 2.53:1 with white label — FAILS AA. */
  --clx-blue: #00aeef;
  /* Green. High-intent CTA fill ("Request a Demo"). 2.33:1 with white — FAILS AA. */
  --clx-green: #77bc1f;

  /* --- Brand: AA-safe variants ------------------------------------------ */
  /* Same hues, darkened until they clear 4.5:1. Use these for text and for
     any button whose label is white. Verified with the WCAG 2.x formula. */

  --clx-cyan-aa:  #0e7490; /* 5.36:1 on white */
  --clx-blue-aa:  #0072a3; /* 5.33:1 with white label */
  --clx-green-aa: #4a7a13; /* 5.14:1 with white label */

  /* --- Brand: secondary blues ------------------------------------------- */
  /* Both are live on the site today (h3 and a footer accent). They are almost
     certainly drift rather than intent — see the "Blue drift" note in README. */
  --clx-blue-mid:  #2b87da;
  --clx-blue-deep: #0082ca;

  /* --- Text ------------------------------------------------------------- */
  --clx-text:          #666666; /* body copy. 5.74:1 on white — AA. */
  --clx-text-strong:   #333333; /* h2 and emphatic copy. 12.63:1 — AAA. */
  --clx-text-muted:    #6d6d6d; /* captions, meta. 5.32:1 — AA. */
  --clx-text-on-dark:  #ffffff;
  --clx-text-ghost:    #555555; /* label on the white/outline button. 7.46:1. */

  /* --- Surfaces --------------------------------------------------------- */
  --clx-surface:        #ffffff;
  --clx-surface-alt:    #f1f1f1;
  --clx-surface-muted:  #eeeeee;
  --clx-surface-dark:   #3a5870;
  --clx-border:         #e8e8e8;
  --clx-border-strong:  #dddddd;

  /* --- Feedback --------------------------------------------------------- */
  --clx-error:   #c02b0a; /* already in use for form errors. 5.93:1 — AA. */
  --clx-success: #4a7a13;

  /* --- Typography ------------------------------------------------------- */
  --clx-font: "Open Sans", Helvetica, Arial, Lucida, sans-serif;

  --clx-fw-light:    300;
  --clx-fw-regular:  400;
  --clx-fw-medium:   500;
  --clx-fw-semibold: 600;
  --clx-fw-bold:     700;

  /* Scale as rendered on the homepage. Note h1/h2 use negative tracking and
     h4 uses positive tracking — that contrast is intentional in the brand. */
  --clx-fs-h1: 56px;  --clx-lh-h1: 62px;  --clx-ls-h1: -1px;
  --clx-fs-h2: 48px;  --clx-lh-h2: 48px;  --clx-ls-h2: -2px;
  --clx-fs-h3: 24px;  --clx-lh-h3: 24px;  --clx-ls-h3: -1px;
  --clx-fs-h4: 18px;  --clx-lh-h4: 18px;  --clx-ls-h4: 1px;   /* uppercase eyebrow */
  --clx-fs-body: 14px; --clx-lh-body: 1.7;
  --clx-fs-lead: 18px; --clx-lh-lead: 1.6;
  --clx-fs-button: 16px; --clx-ls-button: 1px;

  /* --- Spacing ---------------------------------------------------------- */
  --clx-space-1: 4px;
  --clx-space-2: 8px;
  --clx-space-3: 16px;
  --clx-space-4: 24px;
  --clx-space-5: 32px;
  --clx-space-6: 48px;
  --clx-space-7: 64px;
  --clx-space-8: 96px;

  /* Divi's default section rhythm, matched so custom blocks align. */
  --clx-section-py: 54px;
  --clx-container: 1080px;

  /* --- Shape ------------------------------------------------------------ */
  /* Divi buttons on this site render at 1px, i.e. effectively square. */
  --clx-radius-button: 1px;
  --clx-radius-card: 4px;
  --clx-border-width: 2px;

  /* --- Elevation -------------------------------------------------------- */
  --clx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --clx-shadow-raised: 0 6px 20px rgba(58, 88, 112, 0.14);

  /* --- Motion ----------------------------------------------------------- */
  --clx-transition: 200ms ease;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root { --clx-transition: 0ms; }
}