/* Shopfloor AI design tokens: the design system's generated tokens.css (version 1790226393-b5ea),
   unchanged except that its @font-face block is left out. Those rules point at font files inside the
   design-system artifact (../_blob/...), which do not exist on this site; Manrope is loaded in each
   page's <head> instead. Do not edit by hand: replace this file when the system publishes a new one. */
/* Shopfloor AI — generated from tokens.json */
:root, [data-theme="light"] {
  --teal: #02534d; /* ShopFloor Teal, the primary brand colour. Logo, key brand elements, core communications. Carries about 25% of any layout. */
  --copper-orange: #e37434; /* Cooper Orange, the accent. Highlights, CTAs and key interactive elements; about 5% of a layout. Never used to recolour the logo. */
  --light-neutral: #efefef; /* Light Neutral. Backgrounds, sections and clean layouts; the dominant 60% of a layout. Also the ink of the reverse logo. */
  --black: #000000; /* Primary text and important information; about 8% of a layout. */
  --white: #ffffff; /* Clean backgrounds and high-contrast layouts; about 2% of a layout. */
  --teal-deepest: #023f3b; /* Darkest step of the ShopFloor Teal ramp. Dark-theme page ground and the deepest brand surface. */
  --teal-deep: #024842; /* Deep step of the teal ramp. Raised surfaces on dark, and pressed states of brand fills. */
  --teal-mid: #1c6760; /* Mid step of the teal ramp. Secondary text on light grounds and hover states of brand fills. */
  --teal-muted: #4d7771; /* Muted step of the teal ramp. Control borders on light, decorative separators on dark. */
  --teal-bright: #17aa98; /* Bright step of the teal ramp. Brand ink, focus rings and control borders on dark grounds. */
  --teal-pale: #dde5e3; /* Palest step of the teal ramp. Subtle brand surfaces, clear-space panels and decorative separators on light. */
  --surface: var(--white); /* The page ground. Body copy uses ink; secondary copy uses ink-muted. */
  --surface-muted: var(--light-neutral); /* Sections, cards and panels lifted off surface without a shadow. Body copy uses ink; secondary copy uses ink-muted. */
  --surface-subtle: var(--teal-pale); /* Tinted brand panels and the clear-space field around a logo. Body copy uses ink. */
  --surface-brand: var(--teal); /* Filled brand surfaces: primary buttons, brand bands, the reverse-logo field. Text on it is ink-on-brand. */
  --surface-accent: var(--copper-orange); /* Accent fills: the one highlight or CTA on a screen. Text on it is ink-on-accent. */
  --ink: var(--black); /* Primary text on surface, surface-muted and surface-subtle. */
  --ink-muted: var(--teal-mid); /* Secondary text, captions and metadata on surface, surface-muted and surface-subtle. */
  --ink-brand: var(--teal); /* Brand-coloured headings and links on surface, surface-muted and surface-subtle. */
  --ink-on-brand: var(--light-neutral); /* Text and icons on surface-brand. Matches the reverse logo's own ink. */
  --ink-on-accent: var(--black); /* Text and icons on surface-accent. White on Cooper Orange reaches only 3.1:1, so never use it for body copy. */
  --border: var(--teal-pale); /* Decorative separators and dividers on surface and surface-muted. Below 3:1 by design; never the only thing marking a control. */
  --border-strong: var(--teal-muted); /* Control boundaries that carry meaning: input, secondary button and card outlines on surface and surface-muted. */
  --focus-ring: var(--teal); /* Focus ring on surface, surface-muted and surface-subtle. Always solid, 2px, with a 2px offset. */
  --focus-ring-inverse: var(--light-neutral); /* Focus ring for controls sitting on surface-brand or surface-accent. */
  --status-success: #0f7a6c; /* Success text and icons on surface and surface-muted. Blue-green rather than a plain green, so it reads apart from status-danger without hue alone; always pair with a word or icon. */
  --status-danger: #b3261e; /* Error and destructive text and icons on surface and surface-muted. Always pair with a word or icon. */
  --status-warning: #a35216; /* Warning text and icons on surface and surface-muted. A darkened Cooper Orange, because the accent itself reaches only 3.1:1 on white. */
  --status-info: var(--teal); /* Informational text and icons on surface and surface-muted. */
}
[data-theme="dark"] {
  --surface: var(--teal-deepest);
  --surface-muted: var(--teal-deep);
  --surface-subtle: var(--teal-mid);
  --surface-brand: var(--teal);
  --surface-accent: var(--copper-orange);
  --ink: var(--light-neutral);
  --ink-muted: var(--teal-pale);
  --ink-brand: var(--teal-bright);
  --ink-on-brand: var(--light-neutral);
  --ink-on-accent: var(--black);
  --border: var(--teal-muted);
  --border-strong: var(--teal-bright);
  --focus-ring: var(--teal-bright);
  --focus-ring-inverse: var(--light-neutral);
  --status-success: var(--teal-bright);
  --status-danger: #ff8a80;
  --status-warning: #f0955e;
  --status-info: var(--teal-pale);
}
:root {
  --space-0: 0; /* Reset a default gap or padding to nothing. */
  --space-1: 4px; /* Gap between an icon and its label, and inside compact badges. */
  --space-2: 8px; /* Gap between tightly related controls; vertical padding of a small button. */
  --space-3: 12px; /* Vertical padding of default inputs and buttons. */
  --space-4: 16px; /* Default gap between stacked elements; horizontal padding of inputs and buttons. */
  --space-5: 20px; /* Padding inside a compact card. */
  --space-6: 24px; /* Padding inside a default card; gap between cards in a grid. */
  --space-8: 32px; /* Gap between a heading and the block it introduces. */
  --space-10: 40px; /* Padding inside a large panel; gutter at mobile page edges is space-4. */
  --space-12: 48px; /* Gap between subsections. */
  --space-16: 64px; /* Vertical rhythm between page sections on desktop. */
  --space-20: 80px; /* Vertical rhythm around a hero or full-bleed brand band. */
  --radius-sm: 4px; /* Badges, tags and small inline chips. */
  --radius-md: 8px; /* Inputs, selects and cards. */
  --radius-lg: 12px; /* Buttons and large panels. */
  --radius-xl: 20px; /* Hero panels and full-bleed brand bands. */
  --radius-pill: 999px; /* Pill buttons, status pills and anything echoing the wordmark's link forms. */
  --opacity-disabled: 0.4; /* Applied to a disabled control, which keeps its own colours rather than switching to grey. */
  --opacity-scrim: 0.6; /* A teal-deepest scrim behind a modal or over a photograph carrying the reverse logo. */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: 800 64px/1.05 var(--font-sans); /* Display text at the top of the desktop scale. Hero statements only. */
  --text-h1: 800 48px/1.08 var(--font-sans); /* Main heading, upper end of the desktop H1 range (32-48px). */
  --text-h1-sm: 800 32px/1.15 var(--font-sans); /* Main heading, lower end of the desktop H1 range. Also the largest mobile page title. */
  --text-h2: 700 32px/1.2 var(--font-sans); /* Section heading, upper end of the desktop H2 range (24-32px). */
  --text-h2-sm: 700 24px/1.25 var(--font-sans); /* Section heading, lower end of the desktop H2 range. Also the largest mobile section heading. */
  --text-h3: 600 24px/1.3 var(--font-sans); /* Subheading, upper end of the desktop H3 range (20-24px). */
  --text-h3-sm: 600 20px/1.35 var(--font-sans); /* Subheading, lower end of the desktop H3 range. Also the largest mobile subheading. */
  --text-body-lg: 400 18px/28px var(--font-sans); /* Lead paragraphs, upper end of the body range (16-18px). */
  --text-body: 400 16px/26px var(--font-sans); /* Default paragraph text on desktop and the upper end of the mobile body range. */
  --text-body-sm: 400 14px/22px var(--font-sans); /* Dense paragraph text and the lower end of the mobile body range. */
  --text-caption: 500 12px/18px var(--font-sans); /* Captions, metadata and fine print. Never set text below 12px. */
  --text-ui-lg: 500 16px/24px var(--font-sans); /* Large buttons, inputs and controls, upper end of the UI range (14-16px). */
  --text-ui: 500 14px/20px var(--font-sans); /* Default buttons, inputs, labels and controls. */
  --text-ui-sm: 600 12px/16px var(--font-sans); /* Badges, table headers and compact controls. */
  --text-overline: 700 12px/16px var(--font-sans); /* Eyebrow labels above a heading. Set in sentence case, not all caps, outside the logo. */
}
.display {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h1 {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h1-sm {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
.h2-sm {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}
.h3-sm {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.ui-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.ui {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.ui-sm {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.overline {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}