/* Total Roof Renewal - brand tokens.
   Import this and use the custom properties. Do not hard-code hex values. */

@font-face { font-family: 'Archivo'; font-weight: 800; font-style: normal;
  font-display: swap; src: url('/fonts/archivo-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal;
  font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal;
  font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }

:root {
  /* colour */
  --trr-ink:        #11151C;
  --trr-orange:     #FF4D1C;
  --trr-off-white:  #F4F5F7;
  --trr-slate:      #6B7280;
  --trr-slate-dark: #8C96A3;

  /* type */
  --trr-font-name: 'Archivo', system-ui, sans-serif;
  --trr-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --trr-name-weight: 800;
  --trr-name-tracking: -0.025em;
  --trr-tagline-weight: 600;
  --trr-tagline-tracking: 0.407em;

  /* geometry */
  --trr-rule-height: 3px;
  --trr-radius: 16px;

  /* logo minimums */
  --trr-logo-h-min: 150px;
  --trr-logo-v-min: 110px;
  --trr-mark-min: 20px;
}

.trr-logo-horizontal {
  display: block; width: 100%; max-width: 320px;
  min-width: var(--trr-logo-h-min); height: auto;
}
.trr-logo-vertical {
  display: block; width: 100%; max-width: 240px;
  min-width: var(--trr-logo-v-min); height: auto;
}
.trr-mark { display: block; min-width: var(--trr-mark-min); height: auto; }

.trr-tagline {
  font-family: var(--trr-font-body);
  font-weight: var(--trr-tagline-weight);
  letter-spacing: var(--trr-tagline-tracking);
  text-transform: uppercase;
  color: var(--trr-slate);
}
.trr-name {
  font-family: var(--trr-font-name);
  font-weight: var(--trr-name-weight);
  letter-spacing: var(--trr-name-tracking);
  text-transform: uppercase;
  color: var(--trr-ink);
}
.trr-rule { height: var(--trr-rule-height); background: var(--trr-orange); }

.trr-section-dark {
  background: var(--trr-ink); color: var(--trr-off-white);
}
.trr-section-dark .trr-name { color: #FFFFFF; }
.trr-section-dark .trr-tagline { color: var(--trr-slate-dark); }