/* H3 Property Works design tokens and self-hosted fonts, shared by the website (site.css) and the dashboard (admin.css). */

/* ===== Fonts (self-hosted) ===== */
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ===== Tokens ===== */
:root {
    --h3-red: #E10600;
    --h3-red-dark: #B30500;
    --h3-red-tint: #FCE9E8;
    --h3-red-on-dark: #FF5A54;
    --h3-ink: #181818;
    --h3-black: #111111;
    --h3-grey-900: #2A2726;
    --h3-grey-700: #4F4A48;
    --h3-grey-500: #6E6866;
    --h3-grey-200: #E7E3E1;
    --h3-grey-100: #F4F2F1;
    --h3-paper: #FBFAF9;
    --h3-wa: #15803D;
    --h3-font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --h3-font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
    --h3-shadow-1: 0 2px 6px rgba(17, 17, 17, 0.06);
    --h3-shadow-2: 0 12px 28px rgba(17, 17, 17, 0.10);
    --h3-shadow-3: 0 22px 48px rgba(17, 17, 17, 0.16);
    --h3-ease: cubic-bezier(.22, .61, .36, 1);
    --h3-header-h: 132px;
}