/* CCBS – canonical palette + Elementor-linked aliases */
:root{
  /* Canonical hex palette (single source of truth) */
  --ccbs-blue:        #1379B3;
  --ccbs-charcoal:    #414042;
  --ccbs-text:        #414042CC; /* 80% alpha charcoal */
  --ccbs-orange:      #EC7323;
  --ccbs-grey:        #808285;
  --ccbs-sand:        #EEEBE8;
  --ccbs-white:       #FFFFFF;
  --ccbs-transparent: #FFFFFF00;

  /* Semantic aliases (prefer these in your CSS)
     → use Elementor globals when available; fall back to canonical hex */
  --color-blue:        var(--e-global-color-primary,   var(--ccbs-blue));
  --color-charcoal:    var(--e-global-color-secondary, var(--ccbs-charcoal));
  --color-text:        var(--e-global-color-text,      var(--ccbs-text));
  --color-orange:      var(--e-global-color-accent,    var(--ccbs-orange));
  --color-grey:        var(--e-global-color-4ef6e0e,   var(--ccbs-grey));
  --color-sand:        var(--e-global-color-1891b07,   var(--ccbs-sand));
  --color-white:       var(--e-global-color-caa3973,   var(--ccbs-white));
  --color-transparent: var(--e-global-color-aa4accf,   var(--ccbs-transparent));

  /* Helpful derived tones (optional) */
  --blue-700:     color-mix(in srgb, var(--color-blue),    black 28%);
  --blue-100:     color-mix(in srgb, var(--color-blue),    white 85%);
  --orange-700:   color-mix(in srgb, var(--color-orange),  black 28%);
  --orange-100:   color-mix(in srgb, var(--color-orange),  white 86%);
  --charcoal-600: color-mix(in srgb, var(--color-charcoal), black 15%);
  --charcoal-100: color-mix(in srgb, var(--color-charcoal), white 88%);
  --grey-300:    color-mix(in srgb, var(--color-grey),     white 25%);
  --grey-100:     color-mix(in srgb, var(--color-grey),     white 60%);

  /* Common surfaces/borders */
  --surface-default: var(--color-white);
  --surface-muted:   var(--color-sand);
  --border-muted:    color-mix(in srgb, var(--color-charcoal), white 70%);
}