/* ============================================================
   Consystex — Design Tokens
   Single source of truth for colour, type, spacing.
   Extracted from the live consystex.com (Elementor) build,
   reconciled with Marketing/Branding/brand.json.
   Edit tokens HERE — never hard-code hex values in page CSS.
   ============================================================ */

:root {
  /* --- Brand colours --- */
  --c-pink:        #EB2893;  /* signature magenta — primary accent  */
  --c-pink-2:      #EA3197;  /* secondary pink (gradients/hover)     */
  --c-pink-dark:   #C91F7A;  /* hover/active                          */
  --c-pink-light:  #FF5FAD;
  --c-navy:        #070D3A;  /* headings, dark sections, footer       */
  --c-navy-soft:   #0E1550;

  /* --- Neutrals --- */
  --c-white:       #FFFFFF;
  --c-off-white:   #F5F5F5;  /* light section backgrounds             */
  --c-grey-100:    #EBEBEC;
  --c-grey-300:    #DCDCDE;
  --c-grey-500:    #888888;
  --c-grey-700:    #4E4E4E;
  --c-ink:         #272727;  /* body text on light                    */
  --c-black:       #111111;

  /* --- Semantic --- */
  --bg-page:       var(--c-white);
  --bg-alt:        var(--c-off-white);
  --bg-dark:       var(--c-navy);
  --text-body:     var(--c-ink);
  --text-heading:  var(--c-navy);
  --text-on-dark:  var(--c-white);
  --accent:        var(--c-pink);
  --accent-hover:  var(--c-pink-dark);

  /* --- Typography --- */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Open Sans", "Segoe UI", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;
  --fw-black:   800;

  /* fluid type scale */
  --fs-hero:   clamp(2.6rem, 5.5vw, 4.5rem);
  --fs-h1:     clamp(2.1rem, 4vw, 3.25rem);
  --fs-h2:     clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.9rem;
  --lh-body:   1.7;
  --lh-tight:  1.2;

  /* --- Spacing --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* --- Layout --- */
  --container:    1200px;
  --container-wide: 1400px;
  --radius:       8px;
  --radius-lg:    16px;
  --shadow-sm:    0 2px 8px rgba(7,13,58,0.08);
  --shadow-md:    0 8px 30px rgba(7,13,58,0.12);
  --shadow-lg:    0 20px 50px rgba(7,13,58,0.18);

  /* --- Motion --- */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur:     0.35s;

  /* --- Header --- */
  --header-h: 92px;
}