/*
 * Design tokens: ALL the colors, spacings, sizes and radii of the application, documented in
 * docs/design-system.md. To change the look, edit here first - components.css, forms.css and the
 * .razor.css files only use these variables; a new color is a token here before it is used. Syncfusion components follow the Fluent 2 theme
 * (_content/Syncfusion.Blazor.Themes/fluent2.css), whose accent color is aligned below.
 */
:root {
    /* Base colors */
    --erp-color-accent: #0f6cbd;
    --erp-color-accent-hover: #115ea3;
    --erp-color-accent-contrast: #ffffff;
    /* FluxAgri symbol and name. */
    --erp-color-brand: #22446a;
    --erp-color-danger: #c50f1f;
    --erp-color-warning: #bc4b09;
    --erp-color-success: #107c10;
    /* Light grounds of the semantic colors: badges, danger chip, the Blazor error bar. */
    --erp-color-success-tint: rgba(16, 124, 16, 0.12);
    --erp-color-warning-tint: rgba(188, 75, 9, 0.12);
    --erp-color-danger-tint: rgba(197, 15, 31, 0.12);
    --erp-color-warning-surface: #fff4ce;
    /* Off-stock document lines (financial, no goods): their own color in the line grids. */
    --erp-color-off-stock: #8764b8;
    /* Lists of documents: a return among the goods sent or received, and the state of a document. */
    --erp-color-return: #b4009e;
    --erp-color-row-pending: rgba(188, 75, 9, 0.12);
    /* A date passed or close: a contract expired with a remainder, a lot expired or near expiry. */
    --erp-color-row-expiring: rgba(234, 163, 0, 0.18);
    /* A lot close to its end: balance within its margin of the quantity entered. */
    --erp-color-row-near-end: rgba(0, 99, 177, 0.12);
    --erp-color-row-transit: rgba(0, 120, 120, 0.12);
    /* An accounting entry changed by hand after it was generated or imported. */
    --erp-color-row-changed: rgba(135, 100, 184, 0.14);

    /* Page ground; a site tints it (shell.css), so the neutral value has a name of its own. */
    --erp-color-background-neutral: #fafafa;
    --erp-color-background: var(--erp-color-background-neutral);
    --erp-color-surface: #ffffff;
    --erp-color-surface-alt: #f3f3f3;
    --erp-color-border: #e0e0e0;
    --erp-color-text: #242424;
    --erp-color-text-muted: #616161;
    --erp-color-hover: rgba(0, 0, 0, 0.05);
    --erp-color-selected: rgba(15, 108, 189, 0.10);
    --erp-color-overlay: rgba(0, 0, 0, 0.35);

    /* Dashboard buttons: the colors a user can give a tile, and what is drawn on them. */
    --erp-color-tile-blue: #0f6cbd;
    --erp-color-tile-teal: #03787c;
    --erp-color-tile-green: #107c10;
    --erp-color-tile-olive: #5c6e1a;
    --erp-color-tile-orange: #bc4b09;
    --erp-color-tile-red: #c50f1f;
    --erp-color-tile-purple: #7a3fa8;
    --erp-color-tile-gray: #616161;
    --erp-color-on-tile: #ffffff;
    --erp-color-on-tile-hover: rgba(255, 255, 255, 0.12);
    --erp-color-on-tile-tools: rgba(0, 0, 0, 0.2);

    /* Color of a site that has none (SiteColors.Fallback). */
    --erp-color-site-default: #3B3A39;

    /* Frosted layers over a background photo (desktop and web shells, their preview in Settings). */
    --erp-color-glass-bar: rgba(255, 255, 255, 0.72);
    --erp-color-glass-raised: rgba(255, 255, 255, 0.85);
    --erp-color-glass-panel: rgba(255, 255, 255, 0.9);
    --erp-color-glass-edge: rgba(255, 255, 255, 0.5);
    --erp-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.12);
    /* Text drawn straight on the photo: dashboard title, "powered by". */
    --erp-color-on-photo: #ffffff;
    --erp-text-shadow-on-photo: 0 2px 8px rgba(0, 0, 0, 0.4);
    --erp-text-shadow-on-photo-small: 0 1px 2px rgba(0, 0, 0, 0.5);

    /* Typography */
    --erp-font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --erp-font-size: 14px;
    --erp-font-size-small: 12px;
    --erp-font-size-title: 20px;
    --erp-font-size-display: 28px;

    /* Spacing */
    --erp-space-1: 4px;
    --erp-space-2: 8px;
    --erp-space-3: 12px;
    --erp-space-4: 16px;
    --erp-space-5: 24px;
    --erp-space-6: 32px;

    /* Shapes */
    --erp-radius: 4px;
    --erp-radius-large: 8px;
    --erp-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    /* Menus and pop-ups opened above the page. */
    --erp-shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Shell dimensions */
    --erp-topbar-height: 48px;
    --erp-sidebar-width: 240px;
    --erp-sidebar-width-closed: 48px;
    --erp-form-max-width: 640px;
}