import { LitElement } from "lit";
export interface ThemeConfig {
    light: ThemeModeConfig;
    dark: ThemeModeConfig;
}
export type ThemePreference = "light" | "dark" | "system";
export type PartialTheme = Partial<ThemeConfig>;
/** Extended ThemeModeConfig: added typography & spacing tokens */
export interface ThemeModeConfig {
    glass: {
        baseColor: string;
        /** Optional per-level base shades; if omitted, secondary/tertiary are derived by mixing baseColor with foreground */
        baseShades?: {
            primary?: string;
            secondary?: string;
            tertiary?: string;
        };
        opacities: Record<"primary" | "secondary" | "tertiary" | "solid", number>;
    };
    glassHover: {
        color: string;
        opacity: Record<"primary" | "secondary" | "tertiary" | "solid", number>;
    };
    overlay: {
        color: string;
        opacities: Record<"primary" | "secondary" | "tertiary" | "solid", number>;
    };
    fontFamily: string;
    /** Monospace font stack; used for --sky-font-mono and bounded mono presets */
    fontFamilyMono?: string;
    fontSize?: Record<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl", string>;
    fontWeight?: Record<"thin" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold", string>;
    lineHeight?: Record<"tight" | "snug" | "normal" | "relaxed" | "loose", string>;
    letterSpacing?: Record<"tighter" | "tight" | "normal" | "wide" | "wider", string>;
    glassSurface?: {
        top: number;
        bottom: number;
    };
    spacing?: Record<"0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64", string>;
    color: {
        background: string;
        foreground: string;
        active: string;
        success: string;
        warning: string;
        danger: string;
        info: string;
    };
    blur: Record<"primary" | "secondary" | "tertiary", string>;
    radius: Record<"primary" | "secondary" | "tertiary" | "full", string>;
    boxshadow: Record<"primary" | "secondary" | "tertiary" | "inset" | "hover", string>;
    brightness: Record<"primary" | "secondary" | "tertiary", string>;
    saturation: Record<"primary" | "secondary" | "tertiary", string>;
    border: Record<"primary" | "secondary" | "tertiary", string>;
    separator: string;
    /** Motion: duration and easing for consistent, themeable transitions */
    motion?: {
        duration?: Record<"instant" | "fast" | "normal" | "slow", string>;
        ease?: Record<"default" | "in" | "out" | "inOut" | "bounce", string>;
    };
    /** Z-index scale for predictable stacking (dropdown, modal, toast, etc.) */
    zIndex?: Record<"base" | "dropdown" | "sticky" | "fixed" | "modal" | "popover" | "toast" | "max", number>;
    /** Opacity tokens for disabled/muted states */
    opacity?: Record<"disabled" | "muted" | "subtle", number>;
    /** Optional native scrollbar color tints; sizing stays platform-native. */
    scrollbar?: {
        thumb?: string;
        thumbHover?: string;
        track?: string;
    };
}
export declare const defaultTheme: ThemeConfig;
export declare function getThemePreference(): ThemePreference;
export declare function resolveActualTheme(pref: ThemePreference): "light" | "dark";
/** Returns "light" | "dark" (prefers provider, falls back to system). SSR-safe: returns "light" when document is undefined. */
export declare function getCurrentTheme(): "light" | "dark";
/** Subscribe to theme changes. Returns an unsubscribe function. SSR-safe: returns no-op when window is undefined. */
export declare function onThemeChange(cb: (mode: "light" | "dark", preference?: ThemePreference) => void): () => void;
export declare function mergeTheme(userTheme: Partial<ThemeConfig>): ThemeConfig;
export interface ThemeContextValue {
    mode: "light" | "dark";
    preference: ThemePreference;
    theme: ThemeConfig;
    setPreference: (pref: ThemePreference) => void;
    togglePreference: () => ThemePreference;
}
export declare const themeContext: {
    __context__: ThemeContextValue;
};
type ThemeScope = "root" | "host" | "both";
export type SkyThemeProviderScope = ThemeScope;
export type SkyThemeProviderGlobalChangeDetail = {
    mode: "light" | "dark";
    preference: ThemePreference;
};
/**
 * @element sky-theme-provider
 *
 * @summary Theme provider for light, dark, and system preferences with CSS variable generation.
 *
 * @status stable
 * @since 1.0.0
 *
 * @documentation https://sky-ui.com/components/theme-provider
 *
 * @slot - Default slot for content that will receive theme context.
 *
 * @csspart container - The theme provider container element.
 *
 * @property {Partial<ThemeConfig>} userTheme - Custom theme overrides.
 * @property {SkyThemeProviderScope} scope - Where CSS variables are applied.
 * @property {"light"|"dark"|"system"} preference - Theme preference.
 * @property {boolean} persist - Persists preference in localStorage.
 * @property {boolean} broadcast - Broadcasts theme changes through events.
 *
 * @fires {CustomEvent<SkyThemeProviderGlobalChangeDetail>} theme-change-global - Fired when theme changes globally.
 * @fires {CustomEvent<SkyThemeProviderGlobalChangeDetail>} sky-theme - Fired on global theme updates.
 *
 * @Behavior
 * - Resolves light/dark mode from explicit or system preference.
 * - Emits CSS custom properties for color, typography, spacing, and motion tokens.
 * - Provides theme context for descendant components.
 *
 * @example
 * ```html
 * <sky-theme-provider preference="system" scope="both">
 *   <app-content></app-content>
 * </sky-theme-provider>
 * ```
 * ```vue
 * <template>
 *   <sky-theme-provider :user-theme="theme" preference="dark" scope="both">
 *     <app-content />
 *   </sky-theme-provider>
 * </template>
 * ```
 * ```jsx
 * export default function Demo() {
 *   return <sky-theme-provider userTheme={theme} preference="dark" scope="both"><app-content /></sky-theme-provider>;
 * }
 * ```
 */
export declare class SkyThemeProvider extends LitElement {
    /** User theme overrides. From HTML pass JSON, e.g. usertheme='{"primary":"#0af"}'. */
    userTheme?: PartialTheme;
    /** Where to apply CSS vars and global CSS. Default: "root". */
    scope: ThemeScope;
    preference: ThemePreference;
    private mode;
    private _ctx;
    persist: boolean;
    broadcast: boolean;
    private media;
    private globalStyleId;
    private hostScrollbarStyleId;
    private hostSheet;
    private hostStyleEl;
    private rootVarsStyleId;
    static styles: import("lit").CSSResult;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(): void;
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
    protected willUpdate(changed: Map<string, unknown>): void;
    private setRootThemeAttrs;
    private broadcastTheme;
    setPreference(pref: ThemePreference): void;
    togglePreference(): ThemePreference;
    private onSystemChange;
    private setupSystemWatcher;
    /** Ensure global body + dialog + native scrollbar rules when scope touches root. */
    private ensureGlobalStyle;
    private applyHostNativeScrollbars;
    private applyVariables;
    private pushContext;
    render(): import("lit-html").TemplateResult<1>;
}
export {};