/* Design tokens: Console, graphite colourway, with the brand gold. Declared here once; no colour or face is written anywhere else. */

/* Faces, self-hosted, Latin only. Host Grotesk reads, Atkinson Hyperlegible Mono carries what was measured, the wordmark is one static cut of the 8 letters of "PumpVero". */
@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/host-grotesk.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;
}
/* the rupee sign, a 1 KB cut, so the mono and the grotesk both fall through to it */
@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/host-grotesk-rupee.woff2") format("woff2");
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-mono.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: "PumpVero Wordmark"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/archivo-wordmark.woff2") format("woff2");
}
/* local fallbacks sized to the real faces (advance widths and vertical metrics measured from the font files), so the swap does not move the page */
@font-face {
  font-family: "Host Grotesk Fallback"; src: local("Arial"), local("Helvetica");
  size-adjust: 105.2%; ascent-override: 96.5%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono Fallback"; src: local("Courier New"), local("Courier");
  size-adjust: 105.3%; ascent-override: 93.4%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "PumpVero Wordmark Fallback"; src: local("Arial Bold"), local("Arial"); font-weight: 800;
  size-adjust: 123.1%; ascent-override: 71.3%; descent-override: 17.1%; line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(72% 0.15 27); --color-success: oklch(76% 0.13 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(17% 0.008 250); --color-paper-2: oklch(21% 0.009 250); --color-paper-3: oklch(13.5% 0.007 250);
  --color-ink: oklch(95% 0.005 250); --color-ink-2: oklch(83% 0.008 250); --color-muted: oklch(71% 0.01 250);
  --color-rule: oklch(31% 0.01 250); --color-rule-2: oklch(42% 0.012 250);
  /* The brand gold, exactly. Dark ink on it is 8.1:1. */
  --color-accent: #D2A24C; --color-accent-ink: oklch(18% 0.04 75); --color-accent-soft: oklch(29% 0.05 80); --color-focus: #D2A24C;
  --color-cool: oklch(77% 0.12 245); --color-cool-soft: oklch(29% 0.05 245);
  /* the app's own light ground and its faintest edge, as its screenshots show them: a tour screen whose picture is late shows these, so it reads as "loading" and never as "off" */
  --color-app-ground: #F3F4F1; --color-app-edge: #E6E8E3;
  --color-ok: oklch(76% 0.15 150); --color-ok-soft: oklch(24.5% 0.03 150); --color-bad: oklch(70% 0.17 25); --color-bad-soft: oklch(24.5% 0.035 25);
  --font-display: "Host Grotesk", "Host Grotesk Fallback", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
  /* the mono has no rupee sign, so that glyph falls through to Host Grotesk */
  --font-outlier: "Atkinson Hyperlegible Mono", "Atkinson Hyperlegible Mono Fallback", "Host Grotesk", ui-monospace, monospace;
  --font-wordmark: "PumpVero Wordmark", "PumpVero Wordmark Fallback", "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 10px; --radius-pill: 6px; --rule-hair: 1px;
  --shadow-card: none;
  --tracking-display: -0.03em; --display-weight: 500;
  --bar-h: 80px; /* the phone bar's height, kept clear at the foot of the page */
  --chrome-h: 98px; /* the nav pill above the hero (the draft strip is gone), with a little to spare, so the hero ends just above the fold */
}

/* The app's own picture (css/overview.css): the colours and spacing of the owner dashboard, on invented values. Scoped to .ovb. */
.ovb {
  --ovb-ink: #111719; --ovb-ground: #F3F4F1; --ovb-white: #FFFFFF; --ovb-side-on: #222C30;
  --ovb-mute: #5F676B; --ovb-faint: #A3AAAD; --ovb-grey: #7C8589;
  --ovb-edge: #DADDD7; --ovb-edge-2: #C9CEC7; --ovb-edge-3: #E6E8E3; --ovb-track: #ECEEEA;
  --ovb-teal: #0E5A66; --ovb-teal-soft: #D3E5E8;
  --ovb-amber: #C27C1C; --ovb-amber-soft: #FBEBD3; --ovb-amber-ink: #8A4200;
  --ovb-red: #A8251B; --ovb-red-soft: #F9E1DE; --ovb-red-ink: #9B1F16;
  --ovb-s2: 2px; --ovb-s3: 3px; --ovb-s4: 4px; --ovb-s6: 6px; --ovb-s8: 8px; --ovb-s10: 10px; --ovb-s12: 12px; --ovb-s14: 14px; --ovb-s16: 16px;
  --ovb-s18: 18px; --ovb-s20: 20px; --ovb-s24: 24px; --ovb-s28: 28px; --ovb-s32: 32px; --ovb-s36: 36px; --ovb-s44: 44px; --ovb-s48: 48px;
}