/**
 * Breakpoint System - Content-First Responsive Design
 *
 * Breakpoints follow common device patterns but should be used sparingly.
 * Prefer fluid typography and spacing over breakpoint-dependent styles.
 *
 * "The details are not the details. They make the design." - Charles Eames
 *
 * @see /STANDARDS.md - Section 1.6 Responsive Design
 */
export declare const breakpoints: {
    readonly sm: "640px";
    readonly md: "768px";
    readonly lg: "1024px";
    readonly xl: "1280px";
    readonly '2xl': "1536px";
};
export type BreakpointKey = keyof typeof breakpoints;
/**
 * Container max-widths at each breakpoint
 */
export declare const containers: {
    readonly sm: "640px";
    readonly md: "768px";
    readonly lg: "1024px";
    readonly xl: "1280px";
    readonly '2xl': "1400px";
    readonly prose: "65ch";
};
/**
 * Media query helpers
 */
export declare const media: {
    readonly sm: "(min-width: 640px)";
    readonly md: "(min-width: 768px)";
    readonly lg: "(min-width: 1024px)";
    readonly xl: "(min-width: 1280px)";
    readonly '2xl': "(min-width: 1536px)";
    readonly 'max-sm': `(max-width: ${number}px)`;
    readonly 'max-md': `(max-width: ${number}px)`;
    readonly 'max-lg': `(max-width: ${number}px)`;
    readonly 'prefers-reduced-motion': "(prefers-reduced-motion: reduce)";
    readonly 'prefers-dark': "(prefers-color-scheme: dark)";
    readonly 'prefers-light': "(prefers-color-scheme: light)";
};
/**
 * CSS custom property names for breakpoints
 */
export declare const breakpointVars: {
    readonly '--breakpoint-sm': "640px";
    readonly '--breakpoint-md': "768px";
    readonly '--breakpoint-lg': "1024px";
    readonly '--breakpoint-xl': "1280px";
    readonly '--breakpoint-2xl': "1536px";
    readonly '--container-sm': "640px";
    readonly '--container-md': "768px";
    readonly '--container-lg': "1024px";
    readonly '--container-xl': "1280px";
    readonly '--container-2xl': "1400px";
    readonly '--container-prose': "65ch";
};
/**
 * Generate CSS custom properties string
 */
export declare function generateBreakpointsCSS(): string;
/**
 * Check if viewport matches breakpoint (client-side only)
 */
export declare function matchesBreakpoint(breakpoint: BreakpointKey): boolean;