/* ============================================================
   Angel's homepage — COLOR LAYER
   This is the ONLY file with colour decisions in it. Every
   value below is consumed by comp.css, so changing a line here
   changes the page and nothing else breaks.

   Base = the colours in Figma V3, unchanged. Ali is taking the
   colour direction from here.

   Two constraints from the brand book worth knowing before
   changing anything:
     · Goldenrod is NEVER type. "Background only, avoid" on
       porcelain. Rules, bars, dots and grounds only.
     · Copper takes BLACK type, not white (4.97:1 vs 4.22:1).
       Locked copper also fails as type on porcelain, which is
       what --copper-deep exists for.
   ============================================================ */

:root{
  --c-page:var(--porcelain);

  /* ---- nav + global chrome ---- */
  --c-nav-solid:rgba(255,254,250,.86);
  /* .75/170px, not .5/150 — the nav links sit over the BRIGHT right side of
     the hero photo, where the old scrim left them at 1.68:1. */
  /* Raised .75 -> .86, and the fade now holds full strength through
     the first 45% instead of decaying from pixel one. The sub-page
     navs began overlaying photography on 26 Aug, and those crops are
     lighter than the homepage facade this scrim was tuned against:
     four links measured 4.33-4.49:1 on a 4.5 bar. Measured with
     check-nav-on-hero.py, which composites the real pixels — axe
     cannot see text on a photograph. */
  --c-nav-scrim:linear-gradient(rgba(4,18,26,.86) 0%,rgba(4,18,26,.78) 45%,transparent 100%);
  --c-nav-link:rgba(255,254,250,1);
  --c-nav-panel-bg:var(--porcelain);
  --c-nav-panel-shadow:0 14px 30px rgba(0,0,0,.07);
  --c-progress:var(--teal);
  --c-link:var(--teal);
  --c-link-hover:var(--copper-deep);
  --c-btn-bg:var(--teal);
  --c-btn-fg:var(--w);
  --c-btn-bg-hover:var(--teal-deep);


  --c-tag-fg:var(--teal-deep);   /* small pill labels, e.g. the booking fallback */

  /* ---- photography ---- */
  --c-photo-filter:none;
  /* Captions sit directly on photography, so they carry their own ground —
     a text-shadow is not a contrast guarantee and axe cannot score it. */
  --c-cap-bg:rgba(4,18,26,.55);

  /* ---- image placeholders (temporary — until the client photos land) ---- */
  --c-ph-line:rgba(0,113,165,.45);
  --c-ph-glyph:rgba(0,113,165,.55);
  --c-ph-cap:var(--teal);          /* 4.79:1 on the tint; 75% was only 3.11 */
  --c-ph-note-fg:rgba(255,254,250,.88);
  --c-ph-note-line:rgba(255,255,255,.28);

  /* ---- hero ---- */
  --c-hero-scrim:linear-gradient(100deg,rgba(6,8,10,.86) 0%,rgba(6,8,10,.62) 44%,rgba(6,8,10,.30) 70%,rgba(6,8,10,.18) 100%);
  --c-hero-accent:var(--gold);   /* "telling" — goldenrod, as in V3 */

  /* ---- marquee ---- */
  --c-marq-bg:var(--porcelain);
  --c-marq-dot:var(--gold);

  /* ---- 01 a familiar gap ---- */
  --c-gap-bg:var(--porcelain);

  /* ---- V4 statement band ---- */
  --c-band-bg:var(--teal);
  --c-band-fg:var(--w);          /* porcelain on teal = 5.31:1 */

  /* ---- V4 cards ---- */
  --c-vcard-bg:var(--porcelain);
  --c-vcard-shadow:0 18px 40px rgba(0,0,0,.10);   /* lift on hover */
  --c-vcard-line:var(--gold);    /* card stroke + the divider under each heading — a RULE, never type */

  /* ---- 02 the difference (dark section) ---- */
  --c-diff-bg:var(--ink);
  --c-diff-fg:var(--w);
  --c-diff-fg-dim:var(--w-dim2);
  --c-diff-accent-phrase:var(--w);   /* "a steady partner in the room." */

  /* ---- 03 how i help (cards) ----
     One teal wash for every card — no colour rotation, matching
     the card decision. No index numerals. */
  --c-help-bg:var(--porcelain);
  /* Was teal-tint on all three. Ali 20 Aug: "i dont really want any of that
     light blue background on cards." The homepage cards carried the same wash
     as the inner-page cards, so both move to the cool neutral together — this
     is also the single biggest thing tying the homepage to the inner pages. */
  --c-card-1:var(--porcelain-cool);
  --c-card-2:var(--porcelain-cool);
  --c-card-3:var(--porcelain-cool);

  /* ---- 04 who it's for ---- */
  --c-who-wash:linear-gradient(90deg,rgba(4,18,26,.28),rgba(4,18,26,.05));
  --c-who-panel:rgba(0,0,0,.58);   /* V4 exact */
  /* V4 specifies 30%, which measures 3.52:1 over this photo — below the 4.5
     needed for 11.5px text. 42% is the smallest value that clears AA.
     Change the photo and this must be re-measured. */
  --c-who-cap:rgba(0,0,0,.42);

  /* ---- 05 meet colleen ---- */
  --c-colleen-bg:var(--porcelain);
  --c-illus-filter:none;

  /* ---- 06 the first step ---- */
  --c-final-wash:linear-gradient(90deg,rgba(10,14,18,.35),rgba(10,14,18,.82));
  --c-final-accent-phrase:var(--w);  /* "together." — teal is unreadable here */

  --c-list-spine:var(--gold);      /* the "What I help you with" spine — a rule, not type */

  /* ---- poster panel (placeholder ground — final treatment TBC) ---- */
  --c-poster-bg:var(--teal-tint);
  --c-poster-line:rgba(0,113,165,.45);
  --c-poster-fg:var(--ink);        /* 18.7:1 on the tint */
  --c-poster-tag:var(--teal);      /* 4.79:1 on the tint */

  /* ---- outcomes line (placeholder until the infographic is settled) ---- */
  --c-outline-bg:var(--porcelain-cool);
  --c-outline-rule:rgba(0,113,165,.28);
  --c-outline-mark:var(--teal);

  /* ---- who it's for — the yes/no inversion carries the page ---- */
  --c-fit-yes-mark:var(--teal);      /* 4.79:1 on porcelain */
  --c-fit-no-bg:var(--ink);
  --c-fit-no-mark:var(--gold);       /* 9.26:1 on ink — the one ground gold earns */

  /* ---- advisory: how it starts ---- */
  --c-step-rule:var(--gold);      /* a RULE, never type */
  --c-step-num:var(--teal);       /* 4.79:1 on warm */

  /* ---- inner-page closing CTA ----
     Photo with a dark scrim, not flat ink — on ink it ran straight into the
     black footer and the two read as one 800px block. The scrim is heavier on
     the left where the copy sits. Measured over the real image, not eyeballed. */
  --c-pclose-bg:var(--ink);
  --c-pclose-wash:linear-gradient(90deg,rgba(6,12,16,.88) 0%,rgba(6,12,16,.78) 46%,rgba(6,12,16,.52) 100%);
  --c-pclose-fg:var(--w);
  --c-pclose-body:var(--w-dim);
  --c-pclose-accent:var(--gold);

  /* ---- inner pages (V1 language) ----
     The band colours ARE the section rhythm, so this short list controls
     how the whole inner-page set feels. All measured — see SYSTEM-LOCK. */
  --c-phero-wash:rgba(255,254,250,.72);  /* keeps 110px ink type legible over a photo */
  --c-isec-tint:var(--teal-tint);
  --c-isec-deep:var(--teal-deep);        /* white on this = 7.57:1 */
  --c-isec-ink:var(--ink);
  --c-isec-pale:var(--porcelain);
  --c-on-deep-body:rgba(255,254,250,.80);/* 5.41:1 on teal-deep */

  /* ---- inner pages ---- */
  --c-page-head-bg:var(--porcelain);
  --c-page-warm:var(--porcelain-cool);   /* was the light yellow, retired 20 Aug */
  --c-page-tint:var(--teal-tint);
  /* --c-pclose-bg lives with the K4 block above — it was declared twice and the
     later one silently won, which would have kept the closing block on tint. */
  --c-rule-dark-soft:rgba(255,255,255,.16);
  --c-not-mark:var(--gold);       /* RULE only — goldenrod is never type */
  --c-expect-dot:var(--teal);

  /* ---- form fields ---- */
  --c-field-bg:var(--porcelain);
  --c-field-line:rgba(0,0,0,.22);        /* 3.4:1 on porcelain, clears 3.0 for UI */
  --c-field-line-hover:rgba(0,0,0,.42);
  --c-field-line-focus:var(--teal);

  /* ---- footer ---- */
  --c-foot-bg:var(--ink);
  /* Goldenrod section labels, per the 24 Aug homepage design.
     Legal here because the footer ground is INK: 9.26:1. The rule
     that bans goldenrod as type is about porcelain, where it
     fails badly — never lift this onto a light ground. */
  --c-foot-head:var(--gold);
}