/* ============================================================
   SVN | Hanna Solutions Commercial Real Estate
   DESIGN SYSTEM — 01 · TOKENS
   Source of truth: SVN_BRAND_SKILL.md + "Beyond Ordinary" v2 concept.
   Do not hard-code a colour, size, or duration anywhere else.
   ============================================================ */

:root{

  /* ---- Brand colour (from the brand guide) ---------------- */
  --orange:        #F47C00;   /* PMS 1505 - accent only, never a flood */
  --orange-hover:  #D86D00;
  /* PMS 1505 on white is 2.72:1 — it fails WCAG AA for text (needs 4.5:1) and
     even the 3.0:1 large-text threshold. So: --orange stays the brand accent
     for fills, rules, borders, bullets, and any orange on a dark surface
     (7.1:1 there, comfortably passing). --orange-text is the darkened tint
     used ONLY where orange has to be read as words on a light surface.
     5.11:1 on white, 4.64:1 on the mist panel. */
  --orange-text:   #AD5600;
  --ink:           #181816;   /* Neutral Black C - type + dark base    */
  --paper:         #FFFFFF;
  --grey:          #555759;   /* PMS 425 - secondary text              */
  --line-brand:    #C3C6C8;   /* PMS 428 - rules + muted               */
  --navy:          #002868;   /* PMS 2758 - secondary brand            */

  /* ---- Support tones -------------------------------------- */
  --ink-deep:      #0e0e0d;   /* cinematic near-black: hero + footer   */
  --mist:          #F4F4F2;   /* off-white panel                       */
  --line:          #DEDEDA;   /* hairline border                       */
  --dim:           #767670;   /* was #9A9A93 — 2.83:1 on white failed AA */
  --grey-soft:     #6f6f6a;   /* body copy on light panels             */

  /* ---- Reverse (type on dark) ----------------------------- */
  --on-dark-1:     rgba(255,255,255,1);
  --on-dark-2:     rgba(255,255,255,.76);
  --on-dark-3:     rgba(255,255,255,.58);
  --on-dark-4:     rgba(255,255,255,.40);   /* decorative only — 3.79:1, fails for text */
  --on-dark-label: rgba(255,255,255,.62);   /* the tier to use for small label TEXT on dark: 7.6:1 */
  --hair-dark:     rgba(255,255,255,.12);

  /* ---- Status colours (listing tags) ---------------------- */
  --status-sale:   #F47C00;
  --status-lease:  #F47C00;
  --status-closed: #177A42;   /* was #1F8A4C — white on it was 4.38:1, just under AA */
  --status-pre:    #002868;

  /* ---- Typography ----------------------------------------- */
  /* Gotham is the licensed body face. Montserrat is the approved
     fallback and is what ships here, because Gotham cannot be served
     from a public CDN. Add Gotham in front of Montserrat once the web
     licence is in place - nothing else in the system changes.        */
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Gotham', 'Montserrat', system-ui, -apple-system, sans-serif;

  --fs-display:   clamp(2.9rem, 8.4vw, 7rem);
  --fs-h1:        clamp(2.4rem, 6vw, 4.2rem);
  --fs-h2:        clamp(2rem, 5.2vw, 3.7rem);
  --fs-h3:        1.02rem;
  --fs-lead:      1.02rem;
  --fs-body:      .92rem;
  --fs-small:     .82rem;
  --fs-eyebrow:   .8rem;
  --fs-label:     .6rem;

  --lh-display:   .96;
  --lh-heading:   1.05;
  --lh-body:      1.75;

  --ls-display:   -.01em;
  --ls-label:     .2em;
  --ls-eyebrow:   .16em;

  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semi:600;  --fw-bold:700;    --fw-black:900;

  /* ---- Space scale (8pt base) ----------------------------- */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px;  --s-7:48px; --s-8:64px;
  --s-9:88px; --s-10:130px;

  --pad-section:    130px;
  --pad-section-sm: 88px;
  --wrap:           1240px;
  --wrap-narrow:    780px;
  --gutter:         32px;
  --gutter-sm:      22px;
  --nav-h:          88px;
  --nav-h-solid:    70px;

  /* ---- Border + elevation --------------------------------- */
  --radius:       0px;          /* the brand is square - no rounding */
  --radius-pill:  999px;
  --shadow-card:  0 30px 66px rgba(0,0,0,.17);
  --shadow-float: 0 16px 44px rgba(0,0,0,.10);
  --shadow-deep:  -34px -34px 70px rgba(0,0,0,.55);

  /* ---- Motion --------------------------------------------- */
  --e:  cubic-bezier(.16,1,.3,1);    /* the house ease-out         */
  --e2: cubic-bezier(.76,0,.24,1);   /* doors and heavy transforms */
  --t-fast:.35s; --t-base:.55s; --t-slow:.95s; --t-reveal:1s;

  /* ---- Layering ------------------------------------------- */
  --z-rail:880; --z-nav:900; --z-grain:9980; --z-cursor:9990; --z-loader:9999;
}

@media (prefers-reduced-motion: reduce){
  :root{ --t-fast:.01ms; --t-base:.01ms; --t-slow:.01ms; --t-reveal:.01ms; }
}