/*
 * Jexion design tokens
 *
 * Product-wide visual decisions belong here. Feature and component styles
 * should consume these values instead of introducing raw spacing, color,
 * radius, or sizing values.
 */
:root {
    /* Typography */
    --jexion-font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    --jexion-font-size-caption: 0.75rem;
    --jexion-font-size-footer: 0.6875rem;
    --jexion-line-height-compact: 1.35;

    /* Spacing: intentionally aligned with MudBlazor's current 4px scale. */
    --jexion-space-0: 0;
    --jexion-space-1: 0.25rem;
    --jexion-space-2: 0.5rem;
    --jexion-space-3: 0.75rem;
    --jexion-space-4: 1rem;
    --jexion-space-6: 1.5rem;
    --jexion-space-8: 2rem;
    --jexion-space-10: 2.5rem;
    --jexion-space-16: 4rem;

    /* Shape and borders */
    --jexion-radius-control: var(--mud-default-borderradius, 4px);
    --jexion-border-width: 1px;
    --jexion-focus-width: 2px;
    --jexion-focus-offset: 2px;

    /* Semantic colors */
    --jexion-color-link: var(--mud-palette-primary, #006bb7);
    --jexion-color-focus: var(--mud-palette-primary, #258cfb);
    --jexion-color-valid: var(--mud-palette-success, #26b050);
    --jexion-color-invalid: var(--mud-palette-error, #e50000);
    --jexion-color-on-strong: #fff;
    --jexion-color-form-border: var(--mud-palette-divider, #d9dee8);
    --jexion-color-form-canvas: var(--mud-palette-background-gray, #f6f8fb);

    /* Shared state emphasis */
    --jexion-row-selected-background: rgba(var(--mud-palette-primary-rgb), 0.15);
    --jexion-row-overdue-background: rgba(var(--mud-palette-error-rgb), 0.10);
    --jexion-row-pending-add-background: rgba(var(--mud-palette-success-rgb), 0.18);
    --jexion-row-pending-delete-background: rgba(var(--mud-palette-error-rgb), 0.18);
    --jexion-row-pending-modified-background: rgba(var(--mud-palette-warning-rgb), 0.25);
    --jexion-row-insufficient-background: rgba(var(--mud-palette-warning-rgb), 0.10);

    /* Application shell */
    --jexion-app-min-width: 320px;
    --jexion-app-bar-offset: 112px;
    --jexion-mobile-app-bar-offset: 80px;
    --jexion-footer-height: 1rem;
    --jexion-footer-z-index: 1200;

    /* Reusable content constraints */
    --jexion-content-width-form: 32rem;
    --jexion-content-width-form-wide: 48rem;
    --jexion-content-width-message: 45rem;
    --jexion-dialog-scroll-height: 26.25rem;
    --jexion-page-scroll-height: 65vh;
    --jexion-data-grid-gap: var(--jexion-space-4);

    /* Motion */
    --jexion-transition-fast: 140ms ease;
}