/* =================================================================
   Horizline design tokens
   -----------------------------------------------------------------
   The only file where raw colors, sizes and durations are written.
   Every other Horizline stylesheet uses these properties; the static
   check in qa/horizline-design-unit.js fails on a literal anywhere
   else. Decisions and contrast ratios: docs/design/DESIGN.md.

   Loaded first on every Horizline page, before components.css.
   ================================================================= */

/* ---- Faces -------------------------------------------------------
   Two families: Archivo for headings, IBM Plex Sans for everything
   else. The self-hosted files are declared in fonts.css (loaded on
   every page whose policy allows fonts). Here are their metric-matched
   local fallbacks, so the swap does not move text: size-adjust matches
   the average letter width, the overrides match the ascent and
   descent. Customer pages whose policy allows no fonts set type in
   these alone (--hz-font-local). */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Neue Bold');
  font-weight: 600;
  size-adjust: 94.2%;
  ascent-override: 93.2%;
  descent-override: 22.29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica Neue');
  font-weight: 400;
  size-adjust: 101.25%;
  ascent-override: 101.23%;
  descent-override: 27.16%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica Neue');
  font-weight: 500;
  size-adjust: 103.45%;
  ascent-override: 99.08%;
  descent-override: 26.58%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Neue Bold');
  font-weight: 600;
  size-adjust: 96.89%;
  ascent-override: 105.79%;
  descent-override: 28.38%;
  line-gap-override: 0%;
}

:root {
  /* ---- Color ----------------------------------------------------
     One accent. Night anchors the brand, mint is the mark's signal
     and is never text on a light surface. Status colors carry status
     meaning only, always beside a word or an icon. */
  --hz-night: #08121C;
  --hz-night-raised: #10202D;
  --hz-night-border: #22323F;
  --hz-on-night: #FFFFFF;
  --hz-on-night-muted: #A9B6BD;
  --hz-mint: #64D8B5;
  --hz-mint-hover: #8BE6CB;
  --hz-accent: #0B6F5A;
  --hz-accent-strong: #08594A;
  --hz-accent-tint: #E4F3EE;
  --hz-canvas: #F5F7F6;
  --hz-surface: #FFFFFF;
  --hz-sunken: #EDF1EF;
  --hz-border: #D5DCDA;
  --hz-border-strong: #7A8783;
  --hz-text: #0E1A22;
  --hz-text-muted: #4C5A60;
  --hz-success: #2D7A3A;
  --hz-success-tint: #E6F2E8;
  --hz-warning: #8A5A00;
  --hz-warning-tint: #FBF0DC;
  --hz-danger: #B42318;
  --hz-danger-strong: #8F1C13;
  --hz-danger-tint: #FBE9E7;
  /* Behind a modal or drawer: night at half strength. */
  --hz-scrim: rgb(8 18 28 / .48);
  /* "Sign in with Google", in Google's light theme (its branding
     guidelines): a white button, this outline and this label color. */
  --hz-google-border: #747775;
  --hz-google-text: #1F1F1F;
  /* Charts: one hue for one series; a second and third series step
     through night and the strong border, never a new hue. */
  --hz-chart-1: var(--hz-accent);
  --hz-chart-2: var(--hz-night);
  --hz-chart-3: var(--hz-border-strong);
  --hz-chart-track: var(--hz-sunken);

  /* ---- Type -----------------------------------------------------
     Size/line-height pairs, used in the font shorthand:
       font: 600 var(--hz-type-h2) var(--hz-font-display);
     and as sizes alone where only the size changes. */
  --hz-font-display: 'Archivo', 'Archivo Fallback', sans-serif;
  --hz-font-body: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
  --hz-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  /* The customer pages whose policies allow no web fonts (estimates,
     booking, intake forms) set type in the metric-matched local faces. */
  --hz-font-local: 'IBM Plex Sans Fallback', sans-serif;
  --hz-font-local-display: 'Archivo Fallback', 'IBM Plex Sans Fallback', sans-serif;

  --hz-size-display: 56px;
  --hz-size-h1: 40px;
  --hz-size-h2: 32px;
  --hz-size-h3: 24px;
  --hz-size-h4: 20px;
  --hz-size-lead: 18px;
  --hz-size-body: 16px;
  --hz-size-ui: 14px;
  --hz-size-caption: 12px;

  --hz-type-display: 56px/64px;
  --hz-type-h1: 40px/48px;
  --hz-type-h2: 32px/40px;
  --hz-type-h3: 24px/32px;
  --hz-type-h4: 20px/28px;
  --hz-type-lead: 18px/28px;
  --hz-type-body: 16px/24px;
  --hz-type-ui: 14px/20px;
  --hz-type-caption: 12px/16px;

  /* Archivo at 24px and above. */
  --hz-tracking-display: -0.02em;

  /* ---- Space: a 4px base ---------------------------------------- */
  --hz-space-1: 4px;
  --hz-space-2: 8px;
  --hz-space-3: 12px;
  --hz-space-4: 16px;
  --hz-space-5: 24px;
  --hz-space-6: 32px;
  --hz-space-7: 48px;
  --hz-space-8: 64px;
  --hz-space-9: 96px;
  --hz-space-10: 128px;
  /* Public section padding: 96 desktop, 64 tablet, 48 phone. */
  --hz-section: var(--hz-space-9);

  /* ---- Shape and depth ------------------------------------------ */
  --hz-radius: 6px;
  --hz-radius-round: 999px;
  --hz-shadow-overlay: 0 8px 24px rgb(8 18 28 / .12), 0 1px 2px rgb(8 18 28 / .08);
  --hz-focus-width: 2px;
  --hz-focus-offset: 2px;
  /* Links in text: a 1px underline set 3px below the baseline. */
  --hz-underline-offset: 3px;

  /* ---- Sizes ----------------------------------------------------- */
  --hz-control-sm: 32px;
  --hz-control: 40px;
  --hz-control-lg: 48px;
  --hz-touch: 44px;
  --hz-row: 44px;
  --hz-row-compact: 36px;
  --hz-badge: 20px;
  --hz-icon-sm: 16px;
  --hz-icon: 20px;
  --hz-icon-lg: 24px;
  --hz-avatar-sm: 24px;
  --hz-avatar: 32px;
  --hz-avatar-lg: 40px;

  /* ---- Layout ---------------------------------------------------- */
  --hz-container: 1200px;
  --hz-gutter: var(--hz-space-5);
  --hz-page-pad: var(--hz-space-5);
  --hz-header-h: 64px;
  --hz-mark-h: 32px;
  --hz-sidebar-w: 240px;
  /* The sidebar collapsed to a rail of icons on medium screens. */
  --hz-rail-w: 72px;
  --hz-topbar-h: 56px;
  --hz-app-max: 1440px;
  --hz-form-max: 720px;
  --hz-measure: 68ch;
  --hz-auth-w: 400px;
  --hz-auth-w-wide: 640px;
  --hz-modal-sm: 480px;
  --hz-modal: 640px;
  --hz-modal-lg: 800px;
  --hz-drawer: 480px;
  --hz-menu-min: 200px;
  --hz-toast-w: 400px;
  /* Minimum column widths for auto-filling grids, and fixed figure
     widths, so no stylesheet writes a width of its own. */
  --hz-col-xs: 120px;
  --hz-col-sm: 240px;
  --hz-col-md: 280px;
  --hz-col: 320px;
  --hz-col-lg: 340px;
  --hz-phone-figure: 320px;
  --hz-photo: 280px;
  --hz-thumb: calc(var(--hz-badge) - var(--hz-space-1));

  /* ---- Layers ---------------------------------------------------- */
  --hz-z-sticky: 30;
  --hz-z-header: 40;
  --hz-z-sheet: 60;
  --hz-z-overlay: 70;
  --hz-z-toast: 80;

  /* ---- Motion ----------------------------------------------------
     Hover and press change color only. Overlays fade and move at
     most 8px. Nothing runs longer than 200ms. */
  --hz-dur-fast: 120ms;
  --hz-dur-base: 200ms;
  --hz-dur-exit: 150ms;
  --hz-ease: cubic-bezier(.2, 0, 0, 1);
  --hz-shift: 8px;
}

/* Tablet: section padding steps down. */
@media (max-width: 1023px) {
  :root { --hz-section: var(--hz-space-8); }
}

/* Phone: the larger steps of the type ramp step down, the header is
   shorter, and the page gutter tightens below 480px. */
@media (max-width: 767px) {
  :root {
    --hz-size-display: 40px;
    --hz-size-h1: 32px;
    --hz-size-h2: 28px;
    --hz-size-h3: 20px;
    --hz-type-display: 40px/48px;
    --hz-type-h1: 32px/40px;
    --hz-type-h2: 28px/36px;
    --hz-type-h3: 20px/28px;
    --hz-section: var(--hz-space-7);
    --hz-gutter: var(--hz-space-4);
    --hz-header-h: 56px;
    --hz-mark-h: 28px;
  }
}
@media (max-width: 479px) {
  :root { --hz-page-pad: var(--hz-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hz-dur-fast: 0ms;
    --hz-dur-base: 0ms;
    --hz-dur-exit: 0ms;
    --hz-shift: 0px;
  }
}