/**
 * @diwacopilot/components/styles
 * =======================
 * JavaScript-accessible design-token utilities.
 * Import from '@diwacopilot/components/styles' in host apps.
 *
 * All values mirror the CSS custom properties in src/global/app.css.
 * Use these when you need token values in JS/TS (e.g. canvas rendering,
 * Framer Motion, styled-components, inline styles in tests).
 */
export declare const borderRadiusXs = "0px";
export declare const borderRadiusSm = "0px";
export declare const borderRadiusMd = "0px";
export declare const borderRadiusLg = "0px";
export declare const borderRadiusXl = "0px";
export declare const borderRadius2Xl = "0px";
export declare const borderRadiusFull = "9999px";
export declare const borderWidthThin = "1px";
export declare const borderWidthMedium = "1.5px";
export declare const borderWidthBase = "2px";
export declare const borderWidthThick = "4px";
export declare const focusRingWidth = "2px";
export declare const focusRingOffset = "1px";
export declare const touchTargetMinSize = "44px";
export declare const touchTargetMinSizeCompact = "32px";
export declare const touchTargetGapMin = "8px";
export declare const spacePx = "1px";
export declare const space0_5 = "2px";
export declare const space0_75 = "3px";
export declare const space1 = "4px";
export declare const space2 = "6px";
export declare const space3 = "8px";
export declare const space4 = "10px";
export declare const space5 = "12px";
export declare const space6 = "14px";
export declare const space7 = "16px";
export declare const space8 = "20px";
export declare const space9 = "24px";
export declare const space10 = "32px";
export declare const space11 = "48px";
export declare const space12 = "96px";
export declare const opacityDisabled = 0.4;
export declare const opacityLoading = 0.5;
export declare const opacityMuted = 0.7;
export declare const motionDurationShort = "0.15s";
export declare const motionDurationModerate = "0.25s";
export declare const motionDurationLong = "0.4s";
export declare const motionDurationVeryLong = "0.7s";
export declare const skeletonDuration = "1.5s";
export declare const motionEasingBase = "cubic-bezier(0.4, 0, 0.2, 1)";
export declare const motionEasingIn = "cubic-bezier(0.4, 0, 1, 1)";
export declare const motionEasingOut = "cubic-bezier(0, 0, 0.2, 1)";
export declare const dropShadowSmStyle = "0 1px 2px  rgba(0,0,0,0.4)";
export declare const dropShadowMdStyle = "0 4px 12px rgba(0,0,0,0.5)";
export declare const dropShadowLgStyle = "0 8px 24px rgba(0,0,0,0.6)";
export declare const dropShadowXlStyle = "0 16px 48px rgba(0,0,0,0.7)";
export declare const frostedGlassStyle: {
    readonly background: "var(--diwa-bg-frosted)";
    readonly backdropFilter: "blur(var(--diwa-blur-md))";
    readonly WebkitBackdropFilter: "blur(var(--diwa-blur-md))";
};
export declare const gradientAccent = "linear-gradient(135deg, var(--diwa-color-accent-400) 0%, var(--diwa-color-accent-600) 100%)";
export declare const gradientSurface = "linear-gradient(180deg, var(--diwa-bg-surface) 0%, var(--diwa-bg-base) 100%)";
export declare const gradientScrimBottom = "linear-gradient(to bottom, transparent 0%, var(--diwa-bg-base) 100%)";
export declare const gradientScrimTop = "linear-gradient(to top,    transparent 0%, var(--diwa-bg-base) 100%)";
export declare const gradientScrimRight = "linear-gradient(to right,  var(--diwa-bg-base) 0%, transparent 100%)";
export declare const gradientScrimLeft = "linear-gradient(to left,   var(--diwa-bg-base) 0%, transparent 100%)";
export declare function getFocusStyle(offset?: string): {
    readonly outline: "var(--diwa-focus-ring-width) solid var(--diwa-border-focus)";
    readonly outlineOffset: string;
};
export declare function getHoverStyle(): {
    readonly backgroundColor: "var(--diwa-state-hover)";
};
declare const breakpoints: {
    readonly xs: 480;
    readonly sm: 760;
    readonly md: 1000;
    readonly lg: 1300;
    readonly xl: 1760;
    readonly '2xl': 1920;
};
export type Breakpoint = keyof typeof breakpoints;
/** Returns a `min-width` media query string for the given breakpoint. */
export declare function getMediaQueryMin(bp: Breakpoint): string;
/** Returns a `max-width` media query string (exclusive — 1px below next bp). */
export declare function getMediaQueryMax(bp: Breakpoint): string;
/**
 * Returns an inline style object for a standard Diwa responsive grid.
 * Defaults: 12-column, 24px gap, auto rows.
 */
export declare function gridStyle(columns?: number, gap?: string): {
    readonly display: "grid";
    readonly gridTemplateColumns: `repeat(${number}, 1fr)`;
    readonly gap: string;
};
export declare const iconSizeSm = "14px";
export declare const iconSizeMd = "16px";
export declare const iconSizeLg = "20px";
export declare const iconSizeXl = "24px";
export declare const scrollbarWidth = "6px";
export declare const switchTrackWidth = "44px";
export declare const switchTrackHeight = "24px";
export declare const switchThumbSize = "16px";
export declare const selectDropdownMaxHeight = "240px";
export declare const selectOptionMinHeight = "44px";
export declare const popoverTriggerSize = "24px";
export declare const popoverPanelMinWidth = "200px";
export declare const popoverPanelMaxWidth = "320px";
export declare const toastMinWidth = "280px";
export declare const toastMaxWidth = "420px";
export declare const flyoutMinWidth = "320px";
export declare const modalHeaderMinHeight = "56px";
export declare const stepperStepSize = "28px";
export declare const paginationItemSize = "36px";
export declare const scrollerFadeWidth = "40px";
/**
 * Returns inline styles for a skeleton loading placeholder.
 * Apply `animation: diwa-skeleton-pulse var(--diwa-skeleton-duration) var(--diwa-motion-easing-base) infinite` in CSS.
 */
export declare function getSkeletonStyle(width?: string, height?: string): {
    readonly width: string;
    readonly height: string;
    readonly borderRadius: "var(--diwa-radius-md)";
    readonly background: "var(--diwa-bg-surface)";
    readonly animation: "diwa-skeleton-pulse var(--diwa-skeleton-duration) var(--diwa-motion-easing-base) infinite";
};
export {};
//# sourceMappingURL=index.d.ts.map