/*
 * tokens.css — Mantle Realty Child Theme
 *
 * Purpose: shared design tokens only.
 * Contains: @font-face declarations, :root CSS custom properties.
 * Loaded globally via functions.php (no conditions).
 * Nothing here should be a layout rule, component style, or element selector.
 */

/* ==============================
   Self-Hosted Fonts (CLS Safe)
   font-display:swap prevents render-blocking; preload <link> tags in
   functions.php ensure the files are fetched as early as possible.
   ============================== */

@font-face{
  font-family:'Montserrat';
  src:url('https://mantlerealty.com/wp-content/uploads/2024/04/Montserrat-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Montserrat';
  src:url('https://mantlerealty.com/wp-content/uploads/2024/04/Montserrat-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Gotham Black';
  src:url('https://mantlerealty.com/wp-content/uploads/2022/12/gotham-black-webfont.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

/* ==============================
   Mantle Design Tokens
   ============================== */

:root{
  /* Brand colours */
  --mantle-orange:#f69320;
  --mantle-blue:#0a76b6;
  --mantle-light-blue:#40aee3;
  --mantle-gray:#768692;

  /* Dark-skin surface palette */
  --mantle-bg:#101010;
  --mantle-surface:#202020;
  --mantle-text:#f5f5f5;

  /* Border-radius scale */
  --mantle-radius-sm:6px;
  --mantle-radius-md:12px;
  --mantle-radius-lg:16px;

  /* Shadow */
  --mantle-shadow:0 4px 8px rgba(0,0,0,.5);

  /* UX tokens */
  --mantle-focus-ring:2px solid var(--mantle-light-blue);
  --mantle-focus-glow:0 0 0 3px rgba(64,174,227,.25);
  --mantle-tap-min:44px;

  /* Spacing scale */
  --mantle-space-1:.5rem;
  --mantle-space-2:1rem;
  --mantle-space-3:1.5rem;

  /* Nav height — used for sticky offsets and scroll-margin-top.
     This should match the rendered height of the site header/navigation.
     Check the Elementor header template height or .site-header in the
     parent theme. Update here if the navigation bar height changes.    */
  --mantle-nav-height:80px;

  /* FAQ accordion max-height ceiling.
     Generous value to allow panels of any realistic length to animate
     open. The exact px value does not matter — only that it is larger
     than any possible panel content height.                            */
  --mantle-accordion-max-height:3000px;

  /* Inline code highlight colour — used in article content only.      */
  --mantle-code-color:#c7254e;
}