/**
 * Configuración del componente `val-glass`.
 *
 * Capa glassmorphism (frosted glass) — backdrop blur + tint semi-translúcido +
 * border sutil + shadow. Diseñada para usarse SOBRE backgrounds decorativos
 * (patterns, gradients, hero images) para mejorar legibilidad del contenido
 * sin tapar la decoración.
 *
 * @example Pill sobre patrón (greeting hero):
 * ```html
 * <val-glass>
 *   <h1>Buenos días, Juan</h1>
 * </val-glass>
 * ```
 *
 * @example Card glass auto-tint según tema:
 * ```html
 * <val-glass [props]="{ tint: 'auto', radius: '20px', padding: '24px', display: 'block' }">
 *   <p>Contenido</p>
 * </val-glass>
 * ```
 *
 * @example Light glass sobre dark bg:
 * ```html
 * <val-glass [props]="{ tint: 'light', tintAlpha: 0.15, blur: 16 }">
 *   ...
 * </val-glass>
 * ```
 */
export interface GlassMetadata {
    /**
     * Tint del fondo. Built-in:
     * - `'dark'` (default) — `rgba(14, 4, 32, alpha)` — combina con palette Valtech purple
     * - `'light'` — `rgba(255, 255, 255, alpha)` — para usar sobre dark bg
     * - `'auto'` — switch por tema activo (`body.dark` → dark, sino light)
     *
     * También acepta una string CSS color custom (`rgba(...)`, `hsl(...)`, hex).
     * Si pasas custom, `tintAlpha` se ignora.
     */
    tint?: 'dark' | 'light' | 'auto' | string;
    /** Alpha del tint (0..1). Default `0.55`. Ignorado si `tint` es custom string. */
    tintAlpha?: number;
    /** Blur radius en px. Default `10`. Subir a 16-24 para más frosting. */
    blur?: number;
    /** Saturate filter % (acompañando blur). Default `140`. */
    saturate?: number;
    /** Border radius. Cualquier CSS length. Default `'14px'`. */
    radius?: string;
    /** Padding interno. CSS shorthand. Default `'10px 18px'`. */
    padding?: string;
    /** Mostrar border sutil (1px rgba blanco). Default `true`. */
    border?: boolean;
    /**
     * Elevación de shadow:
     * - `'none'` — sin shadow
     * - `'sm'` — `0 2px 8px rgba(0,0,0,0.15)`
     * - `'md'` (default) — `0 4px 24px rgba(0,0,0,0.25)`
     * - `'lg'` — `0 12px 40px rgba(0,0,0,0.35)`
     */
    elevation?: 'none' | 'sm' | 'md' | 'lg';
    /**
     * Display mode:
     * - `'inline-block'` (default) — fit-content, ideal para pills/badges
     * - `'block'` — fill parent width, ideal para cards
     * - `'flex'` — flex column, ideal para layouts internos
     */
    display?: 'inline-block' | 'block' | 'flex';
    /** Clase CSS extra. */
    cssClass?: string;
}