/* Quebius design tokens - generated from tokens.json. Do not edit by hand. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}
:root {
  --surface: #fbfcff; /* Page background for both portals (the website's tertiary-2 off-white). */
  --surface-raised: #ffffff; /* Cards, tables, sidebar (client), topbar, inputs, dialogs. */
  --surface-sunken: #f1f3f8; /* Table headers, hover rows, dropzones, secondary panels, card footers. */
  --line: #e1e5ee; /* Hairlines between rows and around cards. Decorative only: never the sole boundary of a control. */
  --line-strong: #7d8a9d; /* Input, toggle and dropzone borders; unchecked control fills. At least 3:1 on surface, surface-raised and surface-sunken. */
  --ink: #002642; /* Primary text and headings on every surface (the website's secondary navy in light). */
  --ink-muted: #4a5b70; /* Secondary text, hints, table headers and metadata on surface, surface-raised and surface-sunken. */
  --plum: #8f3985; /* Primary actions, current navigation item, focus ring, links, selected states. As text on surface, surface-raised or plum-soft. */
  --plum-strong: #6a1f61; /* Hover and pressed state of plum fills (the website's darker primary). */
  --plum-soft: #f5e9f3; /* Tinted background behind plum text: active nav item, selected option, plum badge. */
  --on-plum: #ffffff; /* Text and icons on a plum or plum-strong fill (primary button label). */
  --navy: #002642; /* Admin portal chrome, code blocks, the register brand panel. Brand secondary. */
  --navy-raised: #0a3558; /* Hover and current-item background inside navy chrome. */
  --on-navy: #ffffff; /* Text and icons on navy and navy-raised. */
  --on-navy-muted: #b8c4d4; /* Secondary text and icons on navy and navy-raised. */
  --navy-accent: #e3a9db; /* Current admin nav item and code tags, on navy or navy-raised only. */
  --raspberry: #da1c5c; /* The logomark's colour. Logomark, the admin environment strip and the ADMIN marker only. Never an action or error colour. */
  --red: #ea2b1f; /* Brand signal red from the website (its 'popular' badge). Illustration and marketing only; white text on it is 4.3:1, so never use it for small text or UI states. */
  --teal: #2c8c99; /* Brand tertiary teal. Illustration and charts; as text it fails 4.5:1, use success instead. */
  --success: #1f6e79; /* Success, locked domain, indexed, usage under 70 per cent. Teal rather than green so it never relies on red-green hue. As text on the surfaces or success-soft. */
  --success-soft: #e3f3f5; /* Background behind success text. */
  --warning: #a34a08; /* Pending, processing, usage 70 to 90 per cent. As text on the surfaces or warning-soft; always paired with an icon or word. */
  --warning-soft: #fdf1e1; /* Background behind warning text. */
  --danger: #c4201a; /* Errors, failed jobs, destructive actions, usage above 90 per cent. As text on the surfaces or danger-soft; always paired with an icon or word. */
  --danger-soft: #fdecea; /* Background behind danger text; destructive dialog icon. */
  --on-danger: #ffffff; /* Text on a danger fill (destructive button). */
  --code-string: #8fd6e0; /* String literals inside code blocks on navy. */
  --link: var(--plum); /* Inline links: an alias of plum, underlined. */
  --overlay: rgba(0, 38, 66, 0.55); /* Scrim behind dialogs. */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05); /* Cards, tables, auth card (the website's feature-card shadow). */
  --shadow-nav: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sticky topbar once scrolled (the website navbar). */
  --shadow-float: 0 12px 40px rgba(0, 38, 66, 0.18); /* Dialogs, menus, the chat panel and launcher. */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #8f3985; /* Keyboard focus on every control: a 2px surface gap then 2px solid plum (6.6:1 or better on every surface). */
  --admin-focus-ring: 0 0 0 2px var(--navy), 0 0 0 4px var(--navy-accent); /* Admin navy chrome controls. */
  --preview-focus-ring: 0 0 0 2px var(--navy), 0 0 0 4px var(--on-navy); /* Preview page bar on navy. */
  --space-1: 4px; /* Icon-to-text in badges, tight stacks. */
  --space-2: 8px; /* Label to input, icon to label in buttons. */
  --space-3: 12px; /* Table cell vertical padding, gaps in rows of controls. */
  --space-4: 16px; /* Grid gutters, table cell horizontal padding, stacked fields. */
  --space-5: 20px; /* Button horizontal padding, sidebar padding. */
  --space-6: 24px; /* Card padding, gaps between page sections. */
  --space-8: 32px; /* Page padding, auth card horizontal padding. */
  --space-10: 40px; /* Auth card vertical padding. */
  --space-12: 48px; /* Register brand panel padding. */
  --radius-sm: 6px; /* Buttons, inputs, nav items, code boxes. */
  --radius-md: 10px; /* Alerts, file rows, domain lists, code blocks, position picker frames. */
  --radius-lg: 16px; /* Cards, tables, dialogs, auth card, chat panel (the website's 1rem). */
  --radius-bubble: 18px; /* Chat message bubbles; the tail corner drops to 6px. */
  --radius-full: 9999px; /* Badges, toggles, chips, avatars, launcher. */
  --control-sm: 32px; /* Small buttons in tables and toolbars. */
  --control-md: 40px; /* Default button and input height. */
  --control-lg: 48px; /* Auth form inputs and submit buttons. */
  --sidebar-width: 256px; /* Sidebar in both portals. */
  --topbar-height: 64px; /* Topbar. */
  --content-max: 1600px; /* Maximum width of page content. */
  --dialog-max: 520px; /* Maximum width of a Dialog, including Dialogs that hold a short form. */
  --side-column: 380px; /* Fixed width of the side column on two-column pages. */
  --widget-width: 380px; /* Chat panel width on desktop. */
  --launcher-size: 60px; /* Chat launcher button (as the current widget). */
  --widget-panel-height: 600px; /* Open chat panel height on desktop. */
  --brand-preview-footprint-w: calc(var(--widget-width) + 32px); /* Embed inset plus panel width. */
  --brand-preview-footprint-h: calc(var(--widget-panel-height) + var(--launcher-size) + var(--space-3) + 32px); /* Panel, gap, launcher, inset. */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}