/* One face for the whole product: Instrument Sans (SIL OFL 1.1, licence in
   /static/fonts/OFL.txt), self-hosted so the CSP's default-src 'self' allows it
   and a phone opens the app without a third-party request. The system stack
   stays as the fallback while it loads (font-display: swap). */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Shared design tokens for the staff console, renter portal, onboarding and
   handover. One neutral scale, one accent (the runtime brand colour from
   /branding.css overrides --primary, so everything derived from it follows),
   one type scale, one radius scale. Each app keeps its own layout; the
   surfaces, controls and status colours read as one product. */
:root {
  /* The home-indicator space is additional to each control bar, never part
     of its fixed content height. Shared across all four app surfaces. */
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --staff-bottom-nav-height: calc(76px + var(--ui-safe-bottom));

  /* Neutrals */
  --ui-bg: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8f9fb;
  --ui-surface-3: #eef1f5;
  --ui-ink: #14181f;
  --ui-ink-2: #3b4452;
  --ui-muted: #5f6b7a;
  --ui-line: #e3e7ed;
  --ui-line-strong: #cfd6df;

  /* Accent. --primary is what /branding.css rewrites, so the accent family is
     always derived from it rather than restated. */
  --primary: #1d4f8f;
  --primary-dark: #173f73;
  --ui-accent: var(--primary);
  --ui-accent-dark: var(--primary-dark);
  --ui-accent-soft: #e9eff8;
  --ui-accent-line: #b6c7e0;
  --ui-on-accent: #ffffff;

  /* Status */
  --ui-good: #166534;
  --ui-good-soft: #e8f6ec;
  --ui-warn: #a15c00;
  --ui-warn-soft: #fff4e0;
  --ui-bad: #b42318;
  --ui-bad-soft: #fdecea;
  --ui-info: #1d4ed8;
  --ui-info-soft: #e8eefc;

  /* Shape and depth */
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  --ui-shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.05);
  --ui-shadow-pop: 0 12px 32px rgba(20, 24, 31, 0.14);
  --ui-focus: 0 0 0 3px rgba(29, 79, 143, 0.28);

  /* Type */
  --ui-font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --ui-fs-xs: 12px;
  --ui-fs-sm: 13px;
  --ui-fs: 14px;
  --ui-fs-md: 16px;
  --ui-fs-lg: 20px;
  --ui-fs-xl: 24px;
  --ui-fs-2xl: 30px;

  /* Controls */
  --ui-control: 40px;
  --ui-control-touch: 44px;
  --ui-control-radius: 10px;
}

/* Handsets in either orientation: every control is a thumb target. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 950px) and (max-height: 500px) {
  :root {
    --ui-control: 44px;
  }
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --ui-accent-soft: color-mix(in srgb, var(--primary) 10%, #ffffff);
    --ui-accent-line: color-mix(in srgb, var(--primary) 32%, #ffffff);
    --ui-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
  }
}