/* =========================================================================
   BRAND TOKENS: C2 Contracting
   The per-client swap surface. The two brand colours are sampled from the
   client's logo: the navy of the "2" and the roofline, and the slate grey of
   the "C" and the wordmark. The accent is the lighter brand blue the old
   site used for its highlight word, kept in the same family so the page
   reads as one brand rather than navy plus a stranger.

   Type scale, weights and spacing are the measured standard and are not
   per-brand. Do not edit below the BRAND block on a clone.
   ========================================================================= */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --brand-primary:     #00387A;   /* logo navy */
  --brand-primary-dk:  #002A5C;
  --brand-primary-lt:  #2E6BC4;
  --brand-ink:         #0A1F3D;   /* deep navy, headings and dark surfaces */
  --brand-ink-2:       #16325C;
  --brand-accent:      #5EA3FF;   /* the old site's highlight blue, sparing use, never as text on white */
  --brand-accent-dk:   #3B82E0;
  --brand-accent-lt:   #8FC2FF;   /* on-dark chip highlight */
  --brand-primary-rgb: 0, 56, 122;
  --brand-accent-rgb:  94, 163, 255;
  --brand-ink-rgb:     10, 31, 61;
  --brand-white:       #FFFFFF;

  /* ---- Surfaces ---------------------------------------------------------
     Cool concrete greys rather than warm sand. Each boundary is visibly
     different so the page never collapses into one flat tone.
     ---------------------------------------------------------------------- */
  --surface-white:     #FFFFFF;
  --surface-paper:     #F3F5F8;   /* cool grey-white, the default */
  --surface-mist:      #E4ECF7;   /* navy wash */
  --surface-sand:      #ECEAE5;   /* cured-concrete warm grey, once per page at most */
  --surface-ink:       #0A1F3D;   /* inverted */
  --surface-gradient:  linear-gradient(135deg, #0A1F3D 0%, #113366 55%, #00387A 100%);

  /* ---- Text ------------------------------------------------------------- */
  --text-strong:       #0F2240;
  --text-body:         #4A5563;   /* the logo slate, shifted a step toward the navy */
  --text-muted:        #74808F;
  --text-on-dark:      #FFFFFF;
  --text-on-dark-soft: rgba(255, 255, 255, 0.78);

  /* ---- Lines and shadows ------------------------------------------------ */
  --line:              rgba(10, 31, 61, 0.12);
  --line-strong:       rgba(10, 31, 61, 0.18);
  --line-on-dark:      rgba(255, 255, 255, 0.16);

  --shadow-sm:  0 1px 2px rgba(10, 31, 61, 0.05), 0 2px 6px rgba(10, 31, 61, 0.04);
  --shadow-md:  0 4px 12px rgba(10, 31, 61, 0.06), 0 12px 26px rgba(10, 31, 61, 0.06);
  --shadow-lg:  0 8px 22px rgba(10, 31, 61, 0.07), 0 26px 54px rgba(10, 31, 61, 0.10);
  --shadow-cta: 0 4px 14px rgba(0, 56, 122, 0.26);

  /* ---- Type -------------------------------------------------------------
     One family. The measured standard, not per-brand.
     ---------------------------------------------------------------------- */
  --font-head: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:  clamp(2.40rem, 7vw, 6.30rem);
  --fs-h1:    clamp(2.10rem, 1.30rem + 3.90vw, 3.75rem);
  --fs-h2:    clamp(1.75rem, 1.45rem + 1.90vw, 2.25rem);
  --fs-h3:    clamp(1.15rem, 1.10rem + 0.22vw, 1.25rem);
  --fs-lead:  clamp(1.0625rem, 1.00rem + 0.31vw, 1.1875rem);
  --fs-body:  clamp(1.00rem, 0.93rem + 0.31vw, 1.125rem);
  --fs-small: 1rem;
  --fs-fine:  0.875rem;

  --fw-hero: 500;
  --fw-h1:   600;
  --fw-h2:   700;
  --fw-h3:   600;
  --fw-body: 400;
  --fw-btn:  500;

  --ls-hero: clamp(-4.60px, calc(0.56px - 0.354vw), -0.75px);
  --ls-h1:   clamp(-2.70px, calc(-0.02px - 0.186vw), -0.70px);
  --ls-h2:   clamp(-0.55px, calc(-0.09px - 0.043vw), -0.25px);
  --lh-hero: 0.94;
  --lh-h1:   1.02;
  --lh-h2:   1.14;
  --lh-h3:   1.40;
  --lh-body: 1.56;

  /* ---- Space ------------------------------------------------------------ */
  --gutter:      clamp(1.15rem, 0.85rem + 1.25vw, 2.5rem);
  --section-y:   clamp(3rem, 2.40rem + 2.0vw, 4rem);
  --section-y-s: clamp(2.25rem, 1.85rem + 1.35vw, 3rem);
  --max-w:       1280px;
  --max-w-text:  896px;

  /* ---- Shape ------------------------------------------------------------ */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

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

  /* ---- Chrome ----------------------------------------------------------- */
  --header-h:   68px;
  --ctabar-h:   62px;

  /* ---- Logo ------------------------------------------------------------- */
  --logo-primary: var(--brand-primary);
  --logo-ink:     var(--brand-ink);
  --logo-accent:  var(--brand-accent);
}