/*
 * Origin production layout tokens
 *
 * Load order:
 *   1. Radzen theme CSS
 *   2. app.css
 *   3. origin-layout.css
 *   4. origin-motion.css
 *   5. origin-semantic-theme.css
 *   6. origin-effects.css
 *   7. origin-typography.css
 *
 * Unit model:
 *   - rem: shared spacing, radii, container widths and readable line lengths
 *   - em: documented screen-width and breakpoint scale
 *   - px: border thicknesses, which must remain visually crisp
 *
 * Load after app.css and before origin-semantic-theme.css.
 */

:root {
    /* Spacing */
    --space-0: 0;
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-2sm: 0.75rem;
    --space-md: 1rem;
    --space-2md: 1.25rem;
    --space-lg: 1.5rem;
    --space-2lg: 1.75rem;
    --space-xl: 2rem;
    --space-xl-1: 2.25rem;
    --space-xl-2: 2.5rem;
    --space-xl-3: 2.75rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-3xxl: 5rem;
    --space-4xl: 6rem;

    /* Radius */
    --radius-none: 0;
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.875rem;
    --radius-full: 9999rem;

    /* Border widths — kept in px intentionally */
    --border-width-hairline: 0.5px;
    --border-width-default: 1px;
    --border-width-strong: 1.5px;

    /* Screen-width scale — use the equivalent literal in @media conditions */
    --screen-width-xxs: 20em;
    --screen-width-xs: 24em;
    --screen-width-sm: 30em;
    --screen-width-md: 35em;
    --screen-width-lg: 40em;
    --screen-width-xl: 48em;
    --screen-width-2xl: 64em;
    --screen-width-3xl: 80em;
    --screen-width-4xl: 90em;
    --screen-width-5xl: 100em;
    --screen-width-6xl: 120em;

    /* Container and readable-content widths */
    --container-padding-mobile: 1rem;
    --container-padding-desktop: 2rem;
    --container-max-width-desktop: 80rem;
    --paragraph-max-width: 45rem;

    /* Existing app.css compatibility */
    --origin-body-gutter: var(--space-lg);
    --origin-body-margin: var(--space-xl);
    --origin-element-gap: var(--space-2sm);
    --origin-panel-gap: var(--space-md);
    --origin-tabnav-gap: var(--space-lg);
    --origin-menu-border-radius: var(--radius-lg);
    --origin-container-padding-mobile: var(--container-padding-mobile);
    --origin-container-padding-desktop: var(--container-padding-desktop);
    --origin-container-max-width: var(--container-max-width-desktop);
    --origin-paragraph-max-width: var(--paragraph-max-width);

    /* Radzen layout, radius and border bridge */
    --rz-layout-body-padding: var(--space-xl);
    --rz-card-border-radius: var(--radius-lg);
    --rz-dialog-border-radius: var(--radius-lg);
    --rz-grid-border-radius: var(--radius-lg);
    --rz-input-border-radius: var(--radius-sm);
    --rz-button-border-radius: var(--radius-full);
    --rz-badge-border-radius: var(--radius-full);
    --rz-menu-border-radius: var(--radius-lg);
    --rz-profile-menu-border-radius: var(--radius-lg);
    --rz-accordion-border-radius: var(--radius-lg);
    --rz-border-width: var(--border-width-default);
    --rz-border-disabled: var(--border-width-default) solid var(--border-disabled);
}

/*
 * Use literal em values for media queries because standard CSS custom
 * properties cannot be evaluated in @media conditions.
 *
 * Example desktop threshold:
 * @media (min-width: 48em) { ... }
 *
 * Component-specific spacing may use em when it should deliberately scale
 * with that component's own text, for example button padding. Keep those
 * values local to the component instead of adding a second global scale.
 */