:root {
    /* Font Sizes */
    --bricks-font-size-100: 0.75rem; /* 12px */
    --bricks-font-size-200: 0.875rem; /* 14px */
    --bricks-font-size-300: 1rem; /* 16px */
    --bricks-font-size-400: 1.125rem; /* 18px */
    --bricks-font-size-500: 1.25rem; /* 20px */
    --bricks-font-size-600: 1.5rem; /* 24px */
    --bricks-font-size-700: 1.75rem; /* 28px */
    --bricks-font-size-800: 2rem; /* 32px */
    --bricks-font-size-900: 2.5rem; /* 40px */
    --bricks-font-size-1000: 3rem; /* 48px */
    /* Font Family */
    --bricks-font-family-primary: 'Poppins', sans-serif;
    /* Spacing */
    --bricks-spacing-010: 0.1rem; /* 1.6px */
    --bricks-spacing-015: 0.15rem; /* 2.4px */
    --bricks-spacing-020: 0.2rem; /* 3.2px */
    --bricks-spacing-025: 0.25rem; /* 4px */
    --bricks-spacing-050: 0.5rem; /* 8px */
    --bricks-spacing-075: 0.75rem; /* 12px */
    --bricks-spacing-100: 1rem; /* 16px */
    --bricks-spacing-125: 1.25rem; /* 20px */
    --bricks-spacing-150: 1.5rem; /* 24px */
    --bricks-spacing-175: 1.75rem; /* 28px */
    --bricks-spacing-200: 2rem; /* 32px */
    --bricks-spacing-225: 2.25rem; /* 36px */
    --bricks-spacing-250: 2.5rem; /* 40px */
    --bricks-spacing-275: 2.75rem; /* 44px */
    --bricks-spacing-300: 3rem; /* 48px */
    /* Border Radius */
    --bricks-border-radius-025: 0.25rem; /* 4px */
    --bricks-border-radius-050: 0.5rem; /* 8px */
    --bricks-border-radius-100: 1rem; /* 16px */
    --bricks-border-radius-200: 2rem; /* 32px */
    --bricks-border-radius-500: 6.25rem; /* 100px */
    --bricks-border-radius-1000: 8rem; /* 128px */
    /* Colors - HEX */
    --bricks-colors-legacy-primary-500: #efa41f;
    --bricks-colors-primary-300: #ebf1f3;
    --bricks-colors-primary-350: #e4e5ea;
    --bricks-colors-primary-400: #d3eeff;
    --bricks-colors-primary-450: #c1e9fe;
    --bricks-colors-primary-500: #00507d;
    --bricks-colors-primary-550: #06456b;
    --bricks-colors-primary-600: #053d5f;
    --bricks-colors-primary-700: #003654;
    --bricks-colors-secondary-300: #f7ccbf;
    --bricks-colors-secondary-600: #fc5521;
    --bricks-colors-secondary-700: #dc4a1d;
    --bricks-colors-state-error-300: #f6dbd3;
    --bricks-colors-state-error-500: #e00000;
    --bricks-colors-state-error-600: #b30000;
    --bricks-colors-state-error-700: #9b0101;
    --bricks-colors-state-warning-500: #ffb84d;
    --bricks-colors-state-warning-600: #e0a143;
    --bricks-colors-state-warning-700: #d1963f;
    --bricks-colors-state-success-300: #d4eae2;
    --bricks-colors-state-success-500: #00aa6f;
    --bricks-colors-state-success-600: #008556;
    --bricks-colors-state-info-500: #00507d;
    --bricks-colors-state-error-500-contrast: #ffffff;
    --bricks-colors-state-warning-500-contrast: #000000;
    --bricks-colors-state-success-500-contrast: #ffffff;
    --bricks-colors-state-info-500-contrast: #ffffff;
    --bricks-colors-grayscale-100: #ffffff;
    --bricks-colors-grayscale-200: #fafafa;
    --bricks-colors-grayscale-300: #f2f3f5;
    --bricks-colors-grayscale-400: #f0f0f0;
    --bricks-colors-grayscale-500: #dddddd;
    --bricks-colors-grayscale-600: #c1c1c1;
    --bricks-colors-grayscale-650: #9d9d9d;
    --bricks-colors-grayscale-700: #8c8c8c;
    --bricks-colors-grayscale-800: #676767;
    --bricks-colors-grayscale-900: #4b5257;
    --bricks-colors-grayscale-1000: #262626;
    --bricks-colors-grayscale-1100: #1f1f1f;
    --bricks-colors-grayscale-1200: #141414;
    --bricks-colors-grayscale-1300: #000000;
    --bricks-colors-highlight-500: #f6dbd3;
    /* Colors - RGB */
    --bricks-colors-legacy-primary-500-rgb: 239, 164, 31;
    --bricks-colors-primary-300-rgb: 235, 241, 243;
    --bricks-colors-primary-600-rgb: 5, 61, 95;
    --bricks-colors-primary-700-rgb: 0, 54, 84;
    --bricks-colors-state-error-500-rgb: 224, 0, 0;
    --bricks-colors-secondary-700-rgb: 252, 85, 33;
    --bricks-colors-state-error-500-rgb: 236, 58, 88;
    --bricks-colors-state-warning-500-rgb: 255, 184, 77;
    --bricks-colors-state-success-300-rgb: 212, 234, 226;
    --bricks-colors-state-success-500-rgb: 6, 198, 48;
    --bricks-colors-state-success-600-rgb: 0, 133, 86;
    --bricks-colors-state-info-500-rgb: 0, 80, 125;
    --bricks-colors-state-error-500-contrast-rgb: 255, 255, 255;
    --bricks-colors-state-warning-500-contrast-rgb: 0, 0, 0;
    --bricks-colors-state-success-500-contrast-rgb: 255, 255, 255;
    --bricks-colors-state-info-500-contrast-rgb: 255, 255, 255;
    --bricks-colors-grayscale-100-rgb: 255, 255, 255;
    --bricks-colors-grayscale-200-rgb: 250, 250, 250;
    --bricks-colors-grayscale-300-rgb: 245, 245, 245;
    --bricks-colors-grayscale-400-rgb: 240, 240, 240;
    --bricks-colors-grayscale-500-rgb: 217, 217, 217;
    --bricks-colors-grayscale-600-rgb: 191, 191, 191;
    --bricks-colors-grayscale-700-rgb: 140, 140, 140;
    --bricks-colors-grayscale-800-rgb: 89, 89, 89;
    --bricks-colors-grayscale-900-rgb: 67, 67, 67;
    --bricks-colors-grayscale-1000-rgb: 38, 38, 38;
    --bricks-colors-grayscale-1100-rgb: 31, 31, 31;
    --bricks-colors-grayscale-1200-rgb: 20, 20, 20;
    --bricks-colors-grayscale-1300-rgb: 0, 0, 0;

    /* ───────────────────────────── */
    /* Fire design system (hh2)      */
    /* ───────────────────────────── */

    /* Brand & neutrals — synced to HH2 Design System (production screens are canonical) */
    --bricks-fire-color-primary: #063653; /* Brand navy — sidebar, headings, primary CTA, numerics */
    --bricks-fire-color-primary-700: #053048; /* Pressed navy */
    --bricks-fire-color-primary-600: #1d4f70; /* Hover on navy CTA (navy-soft) */
    --bricks-fire-color-primary-500: #2a5a82;
    --bricks-fire-color-primary-ink: #042942; /* Selected nav rail (navy-deep) */
    --bricks-fire-color-primary-bg: rgba(6, 54, 83, 0.08); /* Pending pill / heads-up alert tint */
    --bricks-fire-color-row-hover: rgba(6, 54, 83, 0.04); /* Table / list row hover tint */
    --bricks-fire-color-row-selected: #e8f1f8; /* Selected/active row (--hh2-bg-row-hi) */

    /* Table (AG Grid) — "Standard Note Setup" MatrixTable design */
    --bricks-fire-color-table-header: #0f3d5c; /* Navy grid header */
    --bricks-fire-color-table-header-border: rgba(255, 255, 255, 0.12); /* Header cell divider */
    --bricks-fire-color-table-row-alt: #eef1f4; /* Zebra (odd) row */

    --bricks-fire-color-canvas: #ededed; /* Warm gray app background (--hh2-bg-page) */
    --bricks-fire-color-surface: #ffffff;
    --bricks-fire-color-surface-alt: #f4f4f4; /* Top bar / light chip (--hh2-bg-toolbar) */
    --bricks-fire-color-surface-sunk: #e5e5e5; /* Inactive cells, disabled fields (--hh2-bg-sunken) */

    --bricks-fire-color-border: #dcdcdc; /* Default 1px divider */
    --bricks-fire-color-border-strong: #b8bec4;
    --bricks-fire-color-border-row: #e8e8e8;

    /* Foreground / text */
    --bricks-fire-color-fg-1: #1f2a37;
    --bricks-fire-color-fg-2: #4b5563;
    --bricks-fire-color-fg-3: #6b7280; /* Muted labels (--hh2-text-muted) */
    --bricks-fire-color-fg-muted: #9ca3af; /* Faint (--hh2-text-faint) */
    --bricks-fire-color-fg-on-dark: #ffffff;
    --bricks-fire-color-fg-on-dark-2: #cbd5e1;
    --bricks-fire-color-sidebar-inactive: #8ca3ba;
    --bricks-fire-color-sidebar-active-bg: rgba(255, 255, 255, 0.1);
    --bricks-fire-color-sidebar-active-border: rgba(255, 255, 255, 0.35);
    --bricks-fire-color-sidebar-hover-bg: rgba(255, 255, 255, 0.08);

    /* Semantic accents — green = Approve, orange = active/secondary, amber = Reclaim */
    --bricks-fire-color-success: #22b573; /* Approve, clocked-in dot (--hh2-green) */
    --bricks-fire-color-success-hover: #1a9460; /* (--hh2-green-deep) */
    --bricks-fire-color-success-bg: #e8f6ef;
    --bricks-fire-color-success-border: #8fd5ae;
    --bricks-fire-color-success-text: #1a9460; /* Solid text on success tint */

    --bricks-fire-color-danger: #e74c3c; /* Destructive (--hh2-red) */
    --bricks-fire-color-danger-hover: #cf3a2b;
    --bricks-fire-color-danger-bg: #fdecec;
    --bricks-fire-color-danger-text: #a63224; /* Solid text on danger tint */

    --bricks-fire-color-warning: #c49a3f; /* Reclaim — gold (--hh2-amber) */
    --bricks-fire-color-warning-hover: #ad8531;
    --bricks-fire-color-warning-bg: #f7efdd;
    --bricks-fire-color-warning-text: #7a5c1f; /* Solid text on warning tint */

    --bricks-fire-color-promote: #fc5521; /* Brand orange — secondary CTA, active timer (--hh2-orange) */
    --bricks-fire-color-promote-hover: #e14310; /* (--hh2-orange-deep) */
    --bricks-fire-color-promote-bg: #ffe6dc; /* Highlight ring around selected day (--hh2-orange-soft) */
    --bricks-fire-color-promote-text: #c03a0e; /* Solid text on orange tint */

    --bricks-fire-color-info: #2d6a9f; /* (--hh2-blue-info) */
    --bricks-fire-color-info-bg: #e8f1f8;
    --bricks-fire-color-link: #063653;
    --bricks-fire-color-focus-ring: #fc5521; /* 2px orange :focus-visible ring (WCAG 2.1 AA) */

    /* Chart legend */
    --bricks-fire-color-chart-reg: #3a76c4;
    --bricks-fire-color-chart-ot: #e8569c;
    --bricks-fire-color-chart-2x: #f26b35;
    --bricks-fire-color-star: #f4b922;

    /* Ant Design form field palette */
    --bricks-fire-color-antd-border: #d9d9d9; /* Disabled-field border (muted grey) */
    --bricks-fire-color-antd-border-hover: #1d4f70; /* navy-600 — field hover (matches primary CTA hover) */
    --bricks-fire-color-antd-primary: #063653; /* Brand navy — field border/focus accent (matches the primary button) */
    --bricks-fire-color-antd-primary-shadow: rgba(6, 54, 83, 0.12); /* Navy focus glow */
    --bricks-fire-color-antd-error: #ff4d4f;
    --bricks-fire-color-antd-error-shadow: rgba(255, 38, 5, 0.06);
    --bricks-fire-color-antd-warning-shadow: rgba(201, 144, 53, 0.25);
    --bricks-fire-color-antd-disabled-bg: #f5f5f5;
    --bricks-fire-color-antd-text: rgba(0, 0, 0, 0.88);
    --bricks-fire-color-antd-placeholder: rgba(0, 0, 0, 0.25);
    --bricks-fire-color-antd-option-hover-bg: rgba(0, 0, 0, 0.04);
    --bricks-fire-color-antd-option-selected-bg: rgba(5, 145, 255, 0.08);

    /* Font family — Inter for body/labels, Poppins for display/headings/numerics */
    --bricks-fire-font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --bricks-fire-font-family-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bricks-fire-font-family-numeric: 'Poppins', sans-serif;
    --bricks-fire-font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Font sizes not already in the bricks scale */
    --bricks-fire-font-size-display: 3.25rem; /* 52px */
    --bricks-fire-font-size-kpi: 1.375rem; /* 22px */
    --bricks-fire-font-size-h3: 0.9375rem; /* 15px */
    --bricks-fire-font-size-sm: 0.8125rem; /* 13px */
    --bricks-fire-font-size-label: 0.6875rem; /* 11px */

    /* Line heights */
    --bricks-fire-line-height-tight: 1.15;
    --bricks-fire-line-height-body: 1.5;

    /* Border radii — 8px buttons/inputs, 12px cards, 16px drawers (design scale) */
    --bricks-fire-border-radius-sm: 0.375rem; /* 6px */
    --bricks-fire-border-radius-input: 0.5rem; /* 8px — buttons, inputs, segmented toggles */
    --bricks-fire-border-radius-lg: 0.75rem; /* 12px — cards (production default) */
    --bricks-fire-border-radius-xl: 1rem; /* 16px — large cards / drawers */
    --bricks-fire-border-radius-full: 999px;

    /* Shadows / overlay — one soft card shadow on the warm gray page */
    --bricks-fire-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(15, 30, 45, 0.06);
    --bricks-fire-shadow-drawer: 0 8px 24px rgba(15, 30, 45, 0.12), 0 2px 6px rgba(15, 30, 45, 0.06);
    --bricks-fire-shadow-pop: 0 8px 24px rgba(15, 30, 45, 0.12);
    --bricks-fire-overlay: rgba(0, 0, 0, 0.35); /* Flat drawer scrim — no backdrop-filter */

    /* Layout constants */
    --bricks-fire-sidebar-width: 56px; /* Navy rail (--hh2-sidebar-width) */
    --bricks-fire-topbar-height: 60px; /* (--hh2-topbar-height) */
    --bricks-fire-drawer-width: 560px;
}