/* FireCAD portal design tokens. Layer 0: FireCAD brand tokens (from getfirecad.inspectpoint.com). Layer 1: design tokens
   (colour roles, spacing, type, radius, shadow, layers) after the InspectPoint QMB system (app/assets/stylesheets/qmb/_colors.scss,
   _type.scss and frontend/ui atoms). Components (portal.css) read colour roles only, never hex values. The staff theme is these
   default values; the FireCAD theme is token values on a .fc scope (brand.css). Plain CSS variables, no build step. */
/* ===== Layer 0: FireCAD brand tokens (taken from getfirecad.inspectpoint.com, 2026-10-30) =====
   Sources are the computed styles on the site:
   --fc-orange          primary buttons ("Talk to sales", "Request a quote")     rgb(233, 83, 44)
   --fc-orange-text     links and accent text ("Request a demo" text, icons)     rgb(235, 84, 44)
   --fc-orange-light    hero eyebrow "Welcome to FireCAD..." and gradient end    rgb(242, 111, 46)
   --fc-gradient        "Speak with an engineer" button and orange band          linear-gradient(#E9512C, #F26F2E)
   --fc-ink             headings (h2, h3)                                         rgb(38, 38, 38)
   --fc-text            body text                                                 rgb(55, 54, 54)
   --fc-muted           nav links and secondary text                              rgb(66, 66, 66)
   --fc-bg              page and header background                                rgb(247, 247, 247)
   --fc-dark            top bar (phone number, social icons)                      rgb(33, 33, 33)
   --fc-black           dark hero overlay and dark rows                           rgb(2, 2, 2)
   --fc-green           header "Request a demo" call to action (not used here)    rgb(10, 146, 0)
   Fonts (Google Fonts on the site: Source Sans Pro 400, Montserrat 700, Poppins 400):
   headings Montserrat 700, body Source Sans Pro, buttons Poppins uppercase.
   Radius: buttons 1px (square), header call to action 10px. */
:root {
    --fc-orange: #e9532c;
    --fc-orange-text: #eb542c;
    --fc-orange-light: #f26f2e;
    --fc-orange-dark: #c9431f;
    --fc-gradient: linear-gradient(90deg, #e9512c 0%, #f26f2e 100%);
    --fc-ink: #262626;
    --fc-text: #373636;
    --fc-muted: #424242;
    --fc-line: #dddddd;
    --fc-bg: #f7f7f7;
    --fc-white: #ffffff;
    --fc-dark: #212121;
    --fc-black: #020202;
    --fc-green: #0a9200;
    --fc-font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --fc-font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --fc-font-button: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --fc-radius-button: 1px;
    --fc-radius-field: 1px;
    --fc-radius-card: 4px;
    --fc-radius-cta: 10px;
}

/* ===== 1. Design tokens =====
   Concepts follow the InspectPoint QMB system (app/assets/stylesheets/qmb/_colors.scss, _type.scss and
   frontend/ui atoms): primitive scales, then colour roles that components use, never raw hex in components.
   QMB has no spacing, radius or shadow variables (values are written inline in each component); the scales
   below are taken from the values those components use (4px grid, 2/4/12px radii, popup and modal shadows).
   rem here is 16px (QMB sets html to 62.5%, so its 1.6rem = our 1rem). */
:root {
    /* Primitive neutrals (portal slate, close to QMB gray-50..900) */
    --gray-0: #ffffff;
    --gray-50: #f5f7fa;
    --gray-100: #eef1f5;
    --gray-200: #d9e2ec;
    --gray-300: #cbd2d9;
    --gray-400: #9aa5b1;
    --gray-500: #616e7c;
    --gray-600: #52606d;
    --gray-700: #3e4c59;
    --gray-800: #323f4b;
    --gray-900: #1f2933;
    /* Status primitives (QMB red, green, blue scales; amber from InlineNotification warning) */
    --red-50: #fbe5e6;  --red-300: #e7727b;  --red-500: #db2b39;  --red-600: #a81d28;  --red-700: #70131a;
    --green-50: #e7f6ec; --green-300: #9ccc9f; --green-500: #2e7d32; --green-600: #1b5e20;
    --blue-50: #e9f1fc;  --blue-200: #b9d3f7;  --blue-500: #1967d2;  --blue-600: #1452a8;
    --amber-50: #fef3c7; --amber-300: #e6c46a; --amber-700: #8a5a00;
    --purple-50: #f3effa; --purple-300: #b39ddb; --purple-600: #5e35b1;
    --teal-50: #e0f2f1;  --teal-300: #80cbc4;  --teal-700: #00695c;

    /* Colour roles (components use only these) */
    --color-primary: var(--fc-orange);
    --color-primary-hover: var(--fc-orange-dark);
    --color-primary-active: #a8381a;
    --color-primary-subtle: #fff3ee;
    --color-on-primary: #ffffff;
    --color-danger: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-danger-subtle: var(--red-50);
    --color-danger-border: var(--red-300);
    --color-success: var(--green-500);
    --color-success-subtle: var(--green-50);
    --color-success-border: var(--green-300);
    --color-warning: var(--amber-700);
    --color-warning-subtle: var(--amber-50);
    --color-warning-border: var(--amber-300);
    --color-info: var(--blue-500);
    --color-info-subtle: var(--blue-50);
    --color-info-border: var(--blue-200);
    --color-neutral: var(--gray-600);
    --color-neutral-subtle: var(--gray-50);
    --color-neutral-border: var(--gray-200);
    --color-text: var(--gray-900);
    --color-text-muted: var(--gray-500);
    --color-text-disabled: var(--gray-400);
    --color-link: #1d4f91;
    --color-border: var(--gray-200);
    --color-border-strong: var(--gray-400);
    --color-surface: #ffffff;
    --color-surface-sunken: var(--gray-50);
    --color-bg: var(--gray-50);
    --color-focus: var(--blue-500);
    --color-focus-halo: var(--blue-200);
    --color-backdrop: rgba(31, 41, 51, 0.45);

    /* Spacing: 4px grid (QMB components use 0.4 / 0.8 / 1.2 / 1.6 / 2.4 / 3.2 / 4.8rem at 10px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* Type: QMB Text scale 12 / 14 / 16 / 20 / 24 / 28 / 32px */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-ui: var(--font-body);
    --font-heading: var(--font-body);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2rem;
    --leading: 1.5;

    /* Radius (QMB: field 2px, button 4px, notification 4px, tag pill, modal 12px) */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;
    --radius-button: var(--radius-md);
    --radius-field: var(--radius-sm);
    --radius-card: var(--radius-lg);
    --radius-dialog: var(--radius-xl);

    /* Shadow (QMB popup and modal) */
    --shadow-popup: 0 4px 16px rgba(0, 0, 0, 0.16);
    --shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.18);
    --focus-ring: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus), 0 0 0 5px var(--color-focus-halo);

    /* Layers (QMB: header 50, modal 10003/10004; native <dialog> uses the top layer) */
    --z-header: 50;
    --z-brushaway: 800;
    --z-toast: 900;
    --brushaway-width: 30rem;
    --z-ribbon: 1000;

    /* Button (QMB: min-height 32px, padding 4px 8px, weight 500) */
    --button-font: var(--font-ui);
    --button-weight: 600;
    --button-size: var(--text-sm);
    --button-transform: none;
    --button-tracking: normal;
    --button-height: 2.25rem;
    --button-padding-x: var(--space-4);

    /* Field (QMB TextInput: 48px floating, 2px radius, rgba(0,0,0,.2) border, tinted focus) */
    --field-border: rgba(0, 0, 0, 0.2);
    --field-height: 2.25rem;

    /* Legacy portal names, mapped onto roles so existing layout rules keep working */
    --portal-ink: var(--color-text);
    --portal-muted: var(--color-text-muted);
    --portal-line: var(--color-border);
    --portal-bg: var(--color-bg);
    --portal-accent: var(--color-primary);
}