/* ============================================================
   BRAND TOKENS — The HAT at East Village
   ------------------------------------------------------------
   Cloned from the HAT template (hatgiroux.com, via 7th Avenue).
   This is the file that changes between HAT properties. The
   token NAMES are the template's and must stay as they are,
   because css/site.css reads them; only the values change.

   East Village leads with black. White is the accent: it is the
   call-to-action colour on every dark ground, and the lit
   water of the river menu. There is no third hue.
   ============================================================ */

:root {
  /* ---- Official palette ------------------------------------
     Contrast is measured, not guessed. It decides what each
     colour may be used for.
                         vs white   vs light   vs carbon        */
  --carbon:     #0F0F10;  /* 19.2 ✓    16.6 ✓              PRIMARY ground (black) */
  --graphite:   #2A2A2D;  /* 14.3 ✓    12.4 ✓              Secondary ground, buttons, eyebrows on light */
  --concrete:   #8C8C90;  /*  3.3 ✗     2.9 ✗     5.7      Decorative only  */
  --steel:      #6B6B70;  /*  5.3 ✓     4.6 ~     3.6 ✗    Decorative only — hairlines, numerals, captions */
  --tower-white: #FFFFFF; /*            1.1 ✗    19.2 ✓    ACCENT. Only ever on --carbon / --graphite */

  /* ---- Template slots ---------------------------------------
     site.css is written against the Giroux slot names. The
     ROLES are what carry across, not the hues:
       --sage  = primary ground       --smoke = secondary/actions
       --sea   = decorative           --stone = decorative utility */
  --succulent:   var(--carbon);
  --smoky-blue:  var(--graphite);
  --morning-sea: var(--concrete);
  --cityscape:   var(--steel);

  --sage:  var(--succulent);
  --smoke: var(--smoky-blue);
  --sea:   var(--morning-sea);
  --stone: var(--cityscape);
  --slate: var(--morning-sea);  /* legacy alias — decorative use only */

  /* Derived tints */
  --sage-deep:  #000000;    /* footer, sticky header. 21:1 ✓ */
  --smoke-deep: #3A3A3E;    /* button hover. 11.3:1 ✓ */
  --cream:      #EFEFEC;    /* light section ground (a neutral, not a cream) */
  --cream-warm: #F7F7F5;    /* lightest ground */
  --ink:        #0F0F10;    /* body copy on light grounds */
  --white:      #FFFFFF;
  --plan-ground: #F1F3F2;   /* the exact ground of the supplied floorplan drawings */

  /* ---- The accent ---------------------------------------
     White cannot be seen on the light grounds, so the rule for
     East Village is: THE CALL TO ACTION IS ALWAYS THE INVERSE OF
     ITS GROUND.
       on black / graphite → white pill, black text   (19.2:1)
       on light grounds    → black pill, white text   (19.2:1)
     css/property.css applies this; nothing else may colour a
     Book a Tour control.                                       */
  --accent:         var(--tower-white);
  --accent-ink:     var(--carbon);
  --accent-hover:   #DCDCDA;  /* 14.0:1 with --accent-ink ✓ */

  /* ---- Semantic roles ------------------------------------ */
  --bg-page:       var(--cream-warm);
  --bg-inverse:    var(--sage);
  --text-body:     var(--ink);
  --text-muted:    #58585D;                  /* 6.6:1 on cream-warm ✓ */
  --text-inverse:  var(--white);
  --text-on-sage-muted: rgba(255,255,255,.72);
  --rule:          rgba(107,107,112,.30);
  --rule-inverse:  rgba(255,255,255,.18);

  /* Scrim over photography (hero, page heroes) — black, not green */
  --scrim-rgb: 8, 8, 9;

  /* ---- Motif colours (consumed by rosette.svg) --- */
  --rosette-fill:   var(--cream);
  --rosette-shadow: var(--sea);

  /* ---- Button ------------------------------------------- */
  --btn-bg:          var(--smoke);
  --btn-bg-hover:    var(--smoke-deep);
  --btn-text:        var(--white);

  /* ---- Typography — unchanged from the template ---------- */
  --font-display: Georgia, "Gelasio", serif;
  --font-body:    "Poppins", "Museo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tracking-display: .18em;
  --tracking-eyebrow: .32em;
  --tracking-btn:     .16em;

  --fs-hero:    clamp(2.5rem, 6.2vw, 5.25rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h2:      clamp(1.65rem, 3.2vw, 2.6rem);
  --fs-h3:      clamp(1.2rem, 1.9vw, 1.55rem);
  --fs-lead:    clamp(1.05rem, 1.55vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-eyebrow: .72rem;

  /* ---- Space & shape ------------------------------------ */
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --maxw:        1280px;
  --maxw-narrow: 760px;
  --section-y:   clamp(4rem, 9vw, 8.5rem);
  --radius-pill: 999px;
  --radius-sm:   4px;
  --radius-md:   10px;

  /* ---- Motion ------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .55s;

  /* ---- Header -------------------------------------------
     East Village uses its own stacked lockup (logo-light.png,
     574×311, 1.85:1), not the Giroux ring. --logo-size is the
     lockup's HEIGHT. --header-h stays derived, as in the template. */
  --logo-size:   60px;
  --logo-gap:    22px;
  --logo-x:      0px;
  --logo-y:      0px;   /* keep at 0 — see the template notes */
  --header-h: calc(var(--logo-size) + var(--logo-gap) * 2);

  --fam-logo-h:   92px;
  --fam-cap-h:   1.1rem;
  --fam-cap-gap: .85rem;

  --burger-box:  46px;
  --burger-w:    26px;
  --burger-t:   1.6px;
  --burger-gap:   6px;

  /* ---- The River (East Village's menu) — see css/property.css -- */
  --river-w:     2px;                          /* the river line */
  --bend-dot:    16px;                         /* one page's dot on the river */
  --meander:     clamp(16px, 3vw, 44px);       /* how far the furthest bend swings right (kept subtle) */
  --stop-h:      clamp(3.5rem, 9.6vh, 5.7rem); /* one row's height */
}

@media (max-width: 1080px) {
  :root {
    --logo-size: 52px; --logo-gap: 18px;
    --burger-box: 52px; --burger-w: 30px; --burger-t: 2px; --burger-gap: 7px;
  }
}
@media (max-width: 600px) {
  :root { --logo-size: 44px; --logo-gap: 16px; --stop-h: clamp(3.2rem, 8.8vh, 4.5rem); --bend-dot: 14px; --meander: clamp(10px, 4vw, 18px); }
}