/* Husly design tokens. See DESIGN.md. Do not hard-code these values elsewhere. */

/* Public Sans, self-hosted (Latin subset from Fontsource 5.3.0; SIL OFL 1.1, see fonts/OFL.txt).
   Never loaded from a third party: the CSP allows only 'self', and a buyer's IP stays with us. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/public-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/public-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/public-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/public-sans-700.woff2") format("woff2");
}

:root {
  /* Surfaces & text */
  --c-bg: #F5F6F3;
  --c-surface: #FFFFFF;
  --c-surface-muted: #ECEEEB;
  --c-ink: #16211C;
  --c-ink-2: #3F4B45;
  --c-ink-3: #5A645F;
  --c-line: #DDE1DC;
  --c-line-soft: #ECEEEB;
  --c-line-strong: #C9CFC9;

  /* Accent */
  --c-accent: #1E5A47;
  --c-accent-hover: #123A2E;
  --c-accent-soft: #E4EEE9;

  /* Levels: background / text */
  --lvl-hog-bg: #F8E1DA;      --lvl-hog-fg: #8E2E19;
  --lvl-forhojd-bg: #FBEBD3;  --lvl-forhojd-fg: #7F4A00;
  --lvl-lag-bg: #E3EEF4;      --lvl-lag-fg: #1F5873;
  --lvl-notera-bg: #E3EEF4;   --lvl-notera-fg: #1F5873;
  --lvl-okant-bg: #ECEEEB;    --lvl-okant-fg: #3F4B45;  --lvl-okant-border: #8A938E;
  --lvl-bra-bg: #E1F0E6;      --lvl-bra-fg: #1E5A47;

  --c-danger: #8E2E19;
  --c-timeline-track: #F0F2EF;
  --c-timeline-urgent: #B86E00;
  --c-energy-cell: #E8EBE8;

  /* Type */
  --font: "Public Sans", system-ui, sans-serif;
  --fs-display: 36px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 17px;
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-meta: 12px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  /* The page's only drop shadow, on the landing page's example-report card (DESIGN.md §1). */
  --shadow-card: 0 1px 2px rgba(22, 33, 28, 0.06), 0 12px 32px rgba(22, 33, 28, 0.08);
  --r-pill: 999px;

  /* Layout */
  --gutter: 20px;
  --badge-w: 72px;
  --container: 1180px;
  --main-max: 840px;
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 52px;
    --fs-h1: 24px;
    --fs-h2: 28px;
    --fs-h3: 18px;
    --fs-lead: 18px;
    --gutter: 32px;
  }
}