/* ============================================================
   JC Home Services — design tokens
   Light-mode rendering of the AnchorWorks system.
   Token NAMES mirror AnchorWorks so components port across.
   Brand ink #161718 is sampled from the logo artwork.
   The accent is a placeholder until the JC brand guide lands;
   swapping it is a one-line change here, never a rebuild.
   ============================================================ */
:root {
  color-scheme: light;
  /* Surfaces — warm, not clinical white */
  --paper:      #EDF1F2;   /* page background — cool, keyed to the turquoise */
  --paper-2:    #E3E9EB;   /* alternating band */
  --surface:    #FFFFFF;   /* raised card */
  --ink:        #161718;   /* logo black — headlines, body */
  --ink-dim:    rgba(22, 23, 24, 0.72);
  --ink-faint:  rgba(22, 23, 24, 0.55);
  --ink-ghost:  rgba(22, 23, 24, 0.38);
  --hairline:   rgba(22, 23, 24, 0.13);
  --hairline-2: rgba(22, 23, 24, 0.08);

  /* Accent — JC turquoise. Two tones for one reason: white text on the
     brand turquoise measures 2.7:1, below the 4.5:1 readability bar.
     --accent-bright is the brand colour, used ON DARK where it glows (6.8:1).
     --accent is a deeper cut of the same hue for buttons on light (4.7:1). */
  --accent-bright: #7FA5AA;   /* the brand turquoise, as supplied */
  --accent:        #4A7C82;   /* button fill on light, AA with white */
  --accent-deep:   #3B646A;   /* hover / pressed */
  --accent-tint:   rgba(127, 165, 170, 0.12);
  --accent-glow:   rgba(127, 165, 170, 0.35);

  /* Dark band — the page alternates light and dark, AnchorWorks-style */
  --deep:      #12171A;
  --deep-2:    #192024;
  --on-deep:      #F2F0EC;
  --on-deep-dim:  rgba(242, 240, 236, 0.72);
  --on-deep-faint:rgba(242, 240, 236, 0.52);
  --deep-hairline: rgba(242, 240, 236, 0.14);

  --positive:   #2F6B4F;
  --focus:      #1F5FA8;

  /* Type */
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-h1:     clamp(2.3rem, 1.45rem + 3.3vw, 4rem);
  --fs-h2:     clamp(1.75rem, 1.25rem + 2.1vw, 2.85rem);
  --fs-h3:     clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-lead:   clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9375rem;
  --fs-label:  0.78rem;

  /* Spacing */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
  --space-sm:  1rem;    --space-md:  1.5rem; --space-lg: 2rem;
  --space-xl:  3rem;    --space-2xl: 4rem;   --space-3xl: 6rem;

  /* Layout */
  --section-y:        clamp(3.5rem, 2rem + 6vw, 7rem);

  /* One screen. The header is measured, not guessed: a guessed value
     overflows the viewport and produces a scrollbar on a page whose
     whole promise is that there is nothing to scroll. */
  --gate-header: 88px;
  /* Measured against the real header, not guessed: a guessed value
     overflows the viewport and produces a scrollbar on a page whose whole
     promise is that there is nothing to scroll. */
  /* One rhythm unit; vertical spacing is expressed in multiples of it so
     the scale stays proportional as the viewport changes. */
  --gate-rhythm: clamp(1.1rem, 0.8rem + 1vw, 1.9rem);
  --container:        1180px;
  --container-narrow: 720px;
  --gutter:           clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --radius:           14px;
  --radius-lg:        22px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 18px 50px -24px rgba(22, 23, 24, 0.28);
  --shadow-card: 0 28px 70px -30px rgba(22, 23, 24, 0.35);

  /* Hero photo treatment — the fade that turns a photo into atmosphere.
     Chris's ruling 15 Sep: heroes are faded, never portraits. */
  --hero-veil: linear-gradient(105deg,
      rgba(18, 23, 26, 0.90) 0%,
      rgba(18, 23, 26, 0.78) 40%,
      rgba(18, 23, 26, 0.55) 68%,
      rgba(18, 23, 26, 0.72) 100%);
  --hero-photo-opacity: 1;
  --hero-photo-filter: saturate(0.85) contrast(1.05);
}