export type ColorScheme = "light" | "dark";
/** Semantic color tokens. The named surface/intent colors components paint with. */
export interface ColorTokens {
    background: string;
    foreground: string;
    card: string;
    "card-foreground": string;
    popover: string;
    "popover-foreground": string;
    primary: string;
    "primary-foreground": string;
    secondary: string;
    "secondary-foreground": string;
    muted: string;
    "muted-foreground": string;
    accent: string;
    "accent-foreground": string;
    destructive: string;
    "destructive-foreground": string;
    success: string;
    "success-foreground": string;
    warning: string;
    "warning-foreground": string;
    border: string;
    input: string;
    ring: string;
    "chart-1": string;
    "chart-2": string;
    "chart-3": string;
    "chart-4": string;
    "chart-5": string;
    "chart-6": string;
    "chart-7": string;
    "chart-8": string;
}
export declare const lightColors: ColorTokens;
export declare const darkColors: ColorTokens;
export declare const colorsByScheme: Record<ColorScheme, ColorTokens>;
/**
 * The glass MATERIAL's own tokens, per scheme. Glass follows Apple's Liquid Glass
 * model: it is a material for the FUNCTIONAL layer (bars, sidebars, sheets, and the
 * overlays that float above content), deliberately NOT applied to the content layer
 * (Apple: "don't use Liquid Glass in the content layer").
 *
 * The material carries its OWN fill, `glass-tint`, and that fill is the only thing
 * glass mode contributes. Glass does NOT reach into the semantic color set: `popover`
 * stays opaque in both schemes, exactly as the web hand-off ships it, so a menu, a
 * select list, or an alert dialog is an opaque card whatever the surface mode; `card`
 * stays opaque too, so content surfaces never turn to glass. Nothing that paints a
 * semantic surface token goes translucent because the theme went to glass. Only the
 * surfaces that render through the GlassSurface primitive (src/style/glass-surface)
 * take this tint, and they take it UNDER the real material: Apple's native Liquid
 * Glass via expo-glass-effect on iOS 26+, the SVG lens on Chromium web, an expo-blur
 * frost elsewhere. The tint is what keeps such a panel legible when the material is
 * near-clear (and the whole fill when no material module is available); the material
 * is what makes it glass.
 *
 * Keys are the CSS custom-property names verbatim (`glass-tint` is `--glass-tint` in
 * styles/tokens/colors.css, the WEB hand-off these values are read from, never
 * invented here); scripts/validate-tokens.ts fails the build when a key has no
 * matching `--name` in the shipped CSS or its value drifts from it. Values are rgba
 * so they compose over whatever sits behind the surface, on native and on
 * react-native-web.
 */
export interface GlassTokens {
    /** The translucent fill painted UNDER the glass material. */
    "glass-tint": string;
}
export declare const lightGlass: GlassTokens;
export declare const darkGlass: GlassTokens;
export declare const glassByScheme: Record<ColorScheme, GlassTokens>;
/**
 * Fixed brand constants. Unlike the semantic tokens these do NOT flip with the
 * scheme: the sign-in orbs and the avatar gradient are brand marks, and a mark
 * that changed hue between light and dark would stop being one mark. Keys are the
 * CSS custom-property names verbatim (`orb-indigo` is `--orb-indigo` in
 * styles/tokens/colors.css); scripts/validate-tokens.ts fails the build if a key
 * here has no matching `--name` in the shipped CSS.
 */
export interface BrandColors {
    "orb-indigo": string;
    "orb-violet": string;
    "orb-cyan": string;
}
export declare const brandColors: BrandColors;
/** Fixed, scheme-independent base colors. */
export declare const baseColors: Record<string, string>;
/**
 * The standard Tailwind v3 color-hue palette, scheme-independent. Color-coded
 * components that need hues beyond the semantic tokens read from here. Keyed
 * "<hue>-<step>" (e.g. "red-500"), values are the canonical Tailwind v3 hexes,
 * lowercase.
 */
export declare const palette: Record<string, string>;
/** Spacing scale in px (Tailwind rem * 16). Keys are the Tailwind step names. */
export declare const spacing: Record<string, number>;
/** Border radius scale in px. */
export declare const radius: Record<string, number>;
/** Font size and matching line height, in px. */
export declare const fontSize: Record<string, {
    fontSize: number;
    lineHeight: number;
}>;
/** Font weights (RN expects string values). */
export declare const fontWeight: Record<string, string>;
/** Letter spacing (tracking) in px. */
export declare const letterSpacing: Record<string, number>;
/** Line height (leading) in px. Relative leadings are approximated as absolute. */
export declare const lineHeight: Record<string, number>;
/** The breakpoint keys, in ascending pixel order. */
export type BreakpointKey = "sm" | "md" | "lg" | "xl" | "2xl";
/** Desktop-first breakpoints in px: a variant applies at this width and below. */
export declare const breakpoints: Record<BreakpointKey, number>;
/**
 * Standard field widths in px: the widths the input-like controls (Input,
 * Textarea, Select, Autocomplete, Field) render at, on every form factor. Every
 * field defaults to `base` so stacked fields share one edge; `narrow`/`wide`
 * are the other two modes of the width axis. A `maxWidth:"100%"` rides along
 * so fields shrink inside narrower parents (which is all a phone screen is);
 * `block` opts a field out entirely to fill its container.
 */
export declare const fieldWidths: Record<string, number>;
//# sourceMappingURL=tokens.d.ts.map