/* ============================================================
   BRAND TOKENS — The HAT at 7th Avenue
   ------------------------------------------------------------
   Cloned from the HAT template (hatgiroux.com). 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.

   7th Avenue is a downtown tower on the CTrain line, so the
   palette is concrete and carbon with one loud accent: the
   yellow of the hat in the 7th Avenue logo.
   ============================================================ */

:root {
  /* ---- Official palette ------------------------------------
     Contrast is measured, not guessed. It decides what each
     colour may be used for.
                         vs white   vs cream   vs ink           */
  --carbon:     #202226;  /* 15.9 ✓    13.2 ✓              PRIMARY ground   */
  --graphite:   #3D434A;  /* 10.0 ✓     8.3 ✓              Secondary ground, buttons, eyebrows on light */
  --concrete:   #8F9499;  /*  3.1 ✗     2.5 ✗     5.5      Decorative only  */
  --steel:      #73787D;  /*  4.5 ~     3.7 ✗     3.8 ✗    Decorative only — hairlines, numerals */
  --hat-yellow: #FEF273;  /*  1.1 ✗     1.1 ✗    14.6 ✓    ACCENT. Only ever with ink/carbon on or around it */

  /* ---- 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:  #16171A;    /* footer, sticky header. 17.9:1 ✓ */
  --smoke-deep: #2E3338;    /* button hover. 12.8:1 ✓ */
  --cream:      #ECEAE3;    /* light section ground, motif fill */
  --cream-warm: #F6F5F0;    /* lightest ground */
  --ink:        #1C1D20;    /* body copy on light grounds */
  --white:      #FFFFFF;
  --plan-ground: #F1F3F2;   /* the exact ground of the supplied floorplan drawings */

  /* ---- The accent ---------------------------------------
     Hat Yellow cannot carry white text and cannot BE text on a
     light ground (1.1:1). It is allowed in exactly three ways:
       1. as a fill with --ink text on it (14.6:1) — the tour pill
       2. as text or linework on --carbon / --graphite (≥ 8.6:1)
       3. as pure decoration (the transit line, stop dots)       */
  --accent:         var(--hat-yellow);
  --accent-ink:     var(--ink);
  --accent-hover:   var(--white);

  /* ---- Semantic roles ------------------------------------ */
  --bg-page:       var(--cream-warm);
  --bg-inverse:    var(--sage);
  --text-body:     var(--ink);
  --text-muted:    #575B60;                  /* 6.3:1 on cream-warm ✓ */
  --text-inverse:  var(--white);
  --text-on-sage-muted: rgba(255,255,255,.72);
  --rule:          rgba(115,120,125,.30);
  --rule-inverse:  rgba(255,255,255,.16);

  /* Scrim over photography (hero, page heroes) — carbon, not green */
  --scrim-rgb: 22, 23, 26;

  /* ---- 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 -------------------------------------------
     7th uses its own stacked lockup (logo-light.png, 1.89:1),
     not the Giroux ring. --logo-size is the lockup's HEIGHT.
     --header-h stays derived, exactly as in the template. */
  --logo-size:   62px;
  --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 Line (7th's menu) — see css/property.css ------- */
  --line-w:      3px;                          /* rail thickness */
  --stop-dot:    18px;                         /* station dot */
  --stop-h:      clamp(3.4rem, 9.5vh, 5.6rem); /* one stop's row height */
}

@media (max-width: 1080px) {
  :root {
    --logo-size: 54px; --logo-gap: 18px;
    --burger-box: 52px; --burger-w: 30px; --burger-t: 2px; --burger-gap: 7px;
  }
}
@media (max-width: 600px) {
  :root { --logo-size: 46px; --logo-gap: 16px; --stop-h: clamp(3.1rem, 8.6vh, 4.4rem); }
}