@trinityui/design-system 1.0.2 → 1.0.4

package/dist/tokens.d.ts

@@ -0,0 +1,4760 @@
+/**
+ * Trinity Design System Token Types
+ * These interfaces describe the structure of the design tokens for type safety and DX.
+ */
+export interface TrinityColorShades {
+    [key: string]: string;
+}
+export interface TrinityBaseColors {
+    navy: TrinityColorShades;
+    purple: TrinityColorShades;
+    indigo: TrinityColorShades;
+    coral: TrinityColorShades;
+    azure: TrinityColorShades;
+    gray: TrinityColorShades;
+}
+export interface TrinitySpacing {
+    0: number;
+    0.5: number;
+    1: number;
+    1.5: number;
+    2: number;
+    2.5: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    7: number;
+    8: number;
+    9: number;
+    10: number;
+    12: number;
+    14: number;
+    16: number;
+    20: number;
+    24: number;
+    32: number;
+}
+export interface TrinityFontSize {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+}
+export interface TrinityFontWeight {
+    light: number;
+    regular: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+}
+export interface TrinityLineHeight {
+    none: number;
+    tight: number;
+    snug: number;
+    normal: number;
+    relaxed: number;
+    loose: number;
+}
+export interface TrinityLetterSpacing {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+}
+/**
+ * Border Radius Token System
+ *
+ * Based on size-based grouping with nesting formula:
+ * Outer radius = Inner radius + Padding
+ *
+ * Size groups (by shortest side):
+ * - xs: 16-24px elements (small chips, badges)
+ * - sm: 24-32px elements (buttons, inputs, small cards)
+ * - md: 32-48px elements (cards, list items)
+ * - lg: 48-64px elements (larger cards, dialogs)
+ * - xl: 64px+ elements (modals, large containers)
+ */
+export interface TrinityBorderRadius {
+    /** No radius - 0px */
+    none: number;
+    /** Extra small - 4px - For 16-24px elements (badges, small chips, icons) */
+    xs: number;
+    /** Small - 6px - For 24-32px elements (buttons, tags, inputs) */
+    sm: number;
+    /** Medium - 8px - For 32-48px elements (cards, list items, small containers) */
+    md: number;
+    /** Large - 12px - For 48-64px elements (larger cards, dialogs, panels) */
+    lg: number;
+    /** Extra large - 16px - For 64px+ elements (modals, popovers, large containers) */
+    xl: number;
+    /** 2X large - 20px - For very large containers with nested lg elements */
+    '2xl': number;
+    /** 3X large - 24px - For maximum container nesting scenarios */
+    '3xl': number;
+    /** Full/Max - 9999px - For pill shapes (buttons, badges, avatars) */
+    full: number;
+}
+export interface TrinityBorderWidth {
+    0: number;
+    1: number;
+    2: number;
+    4: number;
+    8: number;
+}
+export interface TrinityShadows {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+}
+export interface TrinityZIndex {
+    auto: string | number;
+    0: number;
+    10: number;
+    20: number;
+    30: number;
+    40: number;
+    50: number;
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modalBackdrop: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+}
+export interface TrinityDuration {
+    fastest: string;
+    faster: string;
+    fast: string;
+    normal: string;
+    slow: string;
+    slower: string;
+    slowest: string;
+}
+export interface TrinityEasing {
+    linear: string;
+    in: string;
+    out: string;
+    inOut: string;
+    smooth: string;
+    bounce: string;
+    elastic: string;
+}
+export interface TrinityOpacity {
+    0: number;
+    5: number;
+    10: number;
+    20: number;
+    25: number;
+    30: number;
+    40: number;
+    50: number;
+    60: number;
+    70: number;
+    75: number;
+    80: number;
+    90: number;
+    95: number;
+    100: number;
+}
+export interface TrinityBreakpoints {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+}
+export interface TrinityBaseTokens {
+    colors: TrinityBaseColors;
+    spacing: TrinitySpacing;
+    fontSize: TrinityFontSize;
+    fontWeight: TrinityFontWeight;
+    lineHeight: TrinityLineHeight;
+    letterSpacing: TrinityLetterSpacing;
+    borderRadius: TrinityBorderRadius;
+    borderWidth: TrinityBorderWidth;
+    shadows: TrinityShadows;
+    zIndex: TrinityZIndex;
+    duration: TrinityDuration;
+    easing: TrinityEasing;
+    opacity: TrinityOpacity;
+    breakpoints: TrinityBreakpoints;
+}
+export interface TrinityBrandColors {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    accent: string;
+}
+export interface TrinityTextColors {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    disabled: string;
+    inverse: string;
+    brand: string;
+    link: string;
+    linkHover: string;
+    error: string;
+    success: string;
+    warning: string;
+}
+export interface TrinityBackgroundColors {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    inverse: string;
+    brand: string;
+    brandSubtle: string;
+    accent: string;
+    accentSubtle: string;
+}
+export interface TrinitySurfaceColors {
+    elevated: string;
+    sunken: string;
+    overlay: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+}
+export interface TrinityBorderColors {
+    default: string;
+    subtle: string;
+    strong: string;
+    focus: string;
+    error: string;
+    success: string;
+}
+export interface TrinityInteractiveColors {
+    default: string;
+    hover: string;
+    active: string;
+    disabled: string;
+    focus: string;
+}
+export interface TrinityStatusColors {
+    text: string;
+    background: string;
+    border: string;
+}
+export interface TrinityStatusSet {
+    error: TrinityStatusColors;
+    warning: TrinityStatusColors;
+    success: TrinityStatusColors;
+    info: TrinityStatusColors;
+}
+export interface TrinitySemanticColors {
+    brand: TrinityBrandColors;
+    text: TrinityTextColors;
+    background: TrinityBackgroundColors;
+    border: TrinityBorderColors;
+    interactive: TrinityInteractiveColors;
+    status: TrinityStatusSet;
+}
+export interface TrinityTypographyStyle {
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+    letterSpacing?: string;
+}
+export interface TrinityTypographyScale {
+    large: TrinityTypographyStyle;
+    medium: TrinityTypographyStyle;
+    small: TrinityTypographyStyle;
+}
+export interface TrinityHeadingScale {
+    h1: TrinityTypographyStyle;
+    h2: TrinityTypographyStyle;
+    h3: TrinityTypographyStyle;
+    h4: TrinityTypographyStyle;
+    h5: TrinityTypographyStyle;
+    h6: TrinityTypographyStyle;
+}
+/** Dense typography for compact UI elements */
+export interface TrinityDenseTypography {
+    /** Badge counts, status dots - 10px */
+    badge: string;
+    /** Metadata, timestamps, dense tables - 12px */
+    text: string;
+}
+export interface TrinitySemanticTypography {
+    display: TrinityTypographyScale;
+    heading: TrinityHeadingScale;
+    body: TrinityTypographyScale;
+    label: TrinityTypographyScale;
+    /** Dense typography for compact UI */
+    dense: TrinityDenseTypography;
+}
+export interface TrinityComponentSpacing {
+    paddingXs: number;
+    paddingSm: number;
+    paddingMd: number;
+    paddingLg: number;
+    paddingXl: number;
+    gapXs: number;
+    gapSm: number;
+    gapMd: number;
+    gapLg: number;
+}
+export interface TrinityLayoutSpacing {
+    pagePadding: number;
+    sectionGap: number;
+    containerMaxWidth: number;
+    /** AppLayout header height (64px) */
+    headerHeight: number;
+    /** Sidebar width when expanded (200px) */
+    sidebarWidthExpanded: number;
+    /** Sidebar width when collapsed (56px) */
+    sidebarWidthCollapsed: number;
+    /** AI panel default width (420px) */
+    aiPanelWidth: number;
+    /** Standard gutter/offset spacing (24px) */
+    gutter: number;
+    /** Content area padding (64px) */
+    contentPadding: number;
+}
+export interface TrinitySemanticSpacing {
+    component: TrinityComponentSpacing;
+    layout: TrinityLayoutSpacing;
+}
+export interface TrinitySemanticRadius {
+    button: number;
+    input: number;
+    card: number;
+    modal: number;
+    badge: number;
+    avatar: number;
+}
+export interface TrinitySemanticBorderWidth {
+    default: number;
+    focus: number;
+    thick: number;
+}
+export interface TrinitySemanticBorders {
+    radius: TrinitySemanticRadius;
+    width: TrinitySemanticBorderWidth;
+}
+export interface TrinitySemanticShadows {
+    card: string;
+    dropdown: string;
+    modal: string;
+    button: string;
+    input: string;
+    inputFocus: string;
+}
+export interface TrinitySemanticMotionDuration {
+    instant: string;
+    fast: string;
+    normal: string;
+    slow: string;
+}
+export interface TrinitySemanticMotionEasing {
+    default: string;
+    enter: string;
+    exit: string;
+}
+export interface TrinitySemanticMotion {
+    duration: TrinitySemanticMotionDuration;
+    easing: TrinitySemanticMotionEasing;
+}
+/** Overlay effects for interaction states and backdrops */
+export interface TrinityOverlayEffects {
+    /** Modal/drawer backdrop dimming */
+    scrim: string;
+    /** Standard interactive hover */
+    hover: string;
+    /** Subtle hover for dense UI (charts, tables) */
+    hoverSubtle: string;
+    /** Pressed/active state */
+    pressed: string;
+    /** Persistent selection background */
+    selected: string;
+    /** Disabled/inactive state overlay */
+    disabled: string;
+}
+/** Text/icon colors for placement on dark backgrounds */
+export interface TrinityOnDarkEffects {
+    /** Maximum contrast white text (0.87 opacity) */
+    primary: string;
+    /** Reduced emphasis white text (0.7 opacity) */
+    secondary: string;
+    /** De-emphasized white text (0.5 opacity) */
+    tertiary: string;
+    /** Decorative/divider elements (0.12 opacity) */
+    subtle: string;
+    /** Background overlays on dark surfaces (0.1 opacity) */
+    tint: string;
+    /** Visible dividers on dark backgrounds (0.24 opacity) */
+    divider: string;
+    /** High-visibility text/icons on dark (0.8 opacity) */
+    emphasis: string;
+    /** Maximum contrast - avoids pure white (0.95 opacity) */
+    contrast: string;
+}
+/** Shadow effects for elevation hierarchy */
+export interface TrinityShadowEffects {
+    /** Resting card/surface elevation */
+    surface: string;
+    /** Hovered/focused elevation increase */
+    raised: string;
+    /** Dropdown/popover floating */
+    floating: string;
+    /** Modal-level prominence */
+    dialog: string;
+    /** Recessed/pressed appearance */
+    inset: string;
+}
+/** Focus ring effects for keyboard accessibility */
+export interface TrinityFocusEffects {
+    /** Standard keyboard focus ring */
+    ring: string;
+    /** Focus ring on dark backgrounds */
+    ringOnDark: string;
+    /** Emphasized focus for primary actions */
+    glow: string;
+}
+/** State indicator effects (subtle backgrounds and emphasis borders) */
+export interface TrinityStateEffects {
+    /** Error subtle background */
+    errorSubtle: string;
+    /** Error border/ring emphasis */
+    errorEmphasis: string;
+    /** Warning subtle background */
+    warningSubtle: string;
+    /** Warning border emphasis */
+    warningEmphasis: string;
+    /** Success subtle background */
+    successSubtle: string;
+    /** Success border emphasis */
+    successEmphasis: string;
+    /** Info subtle background */
+    infoSubtle: string;
+    /** Info border emphasis */
+    infoEmphasis: string;
+}
+/** Complete semantic effects layer */
+export interface TrinitySemanticEffects {
+    overlay: TrinityOverlayEffects;
+    onDark: TrinityOnDarkEffects;
+    shadow: TrinityShadowEffects;
+    focus: TrinityFocusEffects;
+    state: TrinityStateEffects;
+}
+/** Intent-based icon sizing scale */
+export interface TrinityIconSize {
+    /** Within text flow - 14px */
+    inline: number;
+    /** Standard controls - 16px */
+    control: number;
+    /** Navigation clarity - 20px */
+    navigation: number;
+    /** Visual anchor - 24px */
+    prominent: number;
+    /** Large impact - 28px */
+    hero: number;
+    /** Maximum impact - 36px */
+    display: number;
+}
+/** Micro-typography for dense UI (charts, badges, metadata) */
+export interface TrinityMicroTypography {
+    /** Smallest legible - 10px */
+    xs: TrinityTypographyStyle;
+    /** Dense but scannable - 11px */
+    sm: TrinityTypographyStyle;
+}
+/** Data-optimized typography */
+export interface TrinityDataTypography {
+    /** Optimized for numbers - tabular nums */
+    numeric: TrinityTypographyStyle;
+    /** Monospace for technical content */
+    code: TrinityTypographyStyle;
+}
+/** Intent-based inline (horizontal) spacing */
+export interface TrinityInlineSpacing {
+    /** Minimum internal space - 4px */
+    tight: number;
+    /** Dense but readable - 8px */
+    compact: number;
+    /** Balanced density - 12px (replaces compact + 4) */
+    snug: number;
+    /** Standard breathing room - 16px */
+    comfortable: number;
+    /** Generous without excess - 20px (replaces comfortable + 4) */
+    relaxed: number;
+    /** Maximum breathing room - 24px */
+    spacious: number;
+}
+/** Intent-based stack (vertical) spacing */
+export interface TrinityStackSpacing {
+    /** Minimum vertical space - 4px */
+    tight: number;
+    /** Dense but readable - 8px */
+    compact: number;
+    /** Balanced density - 12px (replaces compact + 4) */
+    snug: number;
+    /** Standard vertical space - 16px */
+    comfortable: number;
+    /** Generous without excess - 20px (replaces comfortable + 4) */
+    relaxed: number;
+    /** Maximum vertical space - 24px */
+    spacious: number;
+    /** @deprecated Use tight instead */
+    related: number;
+    /** @deprecated Use compact instead */
+    grouped: number;
+    /** @deprecated Use comfortable instead */
+    separated: number;
+    /** @deprecated Use spacious instead - note: was 32px, now 24px */
+    distinct: number;
+}
+/** Density context for data-heavy UIs */
+export interface TrinityDensityContext {
+    rowHeight: number;
+    cellPadding: number;
+    gap: number;
+}
+/** Density scale for adaptive layouts */
+export interface TrinityDensity {
+    /** Maximum info density */
+    compact: TrinityDensityContext;
+    /** Balanced readability */
+    standard: TrinityDensityContext;
+    /** Prioritize readability */
+    comfortable: TrinityDensityContext;
+}
+/** Extended semantic radius with intent-based tokens */
+export interface TrinitySemanticRadiusExtended {
+    button: number;
+    input: number;
+    card: number;
+    modal: number;
+    badge: number;
+    avatar: number;
+    /** Sharp edges - 0px */
+    none: number;
+    /** Minimal softening - 4px */
+    subtle: number;
+    /** Noticeable curves - 6px */
+    soft: number;
+    /** Prominent curves - 8px */
+    rounded: number;
+    /** Maximum curvature - 9999px */
+    pill: number;
+    /** Perfect circle - 50% */
+    circle: string;
+    /** Chips/tags - 6px */
+    chip: number;
+    /** Menu items - 6px */
+    menuItem: number;
+    /** Dropdown/popover menus - 12px */
+    menu: number;
+    /** Tooltips - 8px */
+    tooltip: number;
+    /** Small icon containers - 4px */
+    iconContainer: number;
+    /** Skeleton loaders - 4px */
+    skeleton: number;
+    /** Table cells - 0px */
+    tableCell: number;
+}
+/** Token domain classification for governance */
+export type TokenDomain = 'ui' | 'status' | 'data-viz' | 'ai-feature' | 'illustration';
+/** Metadata for domain token governance */
+export interface DomainTokenMeta {
+    domain: TokenDomain;
+    governance: 'strict' | 'moderate' | 'flexible';
+    a11yRequired: boolean;
+}
+export interface TrinitySemanticTokens {
+    colors: TrinitySemanticColors;
+    typography: TrinitySemanticTypography;
+    spacing: TrinitySemanticSpacing;
+    borders: TrinitySemanticBorders;
+    shadows: TrinitySemanticShadows;
+    motion: TrinitySemanticMotion;
+    /** Phase A: Semantic effects for overlays, shadows, and states */
+    effects: TrinitySemanticEffects;
+    /** Phase A: Intent-based icon sizing scale */
+    iconSize: TrinityIconSize;
+    /** Phase A: Inline spacing (horizontal relationships) */
+    inline: TrinityInlineSpacing;
+    /** Phase A: Stack spacing (vertical relationships) */
+    stack: TrinityStackSpacing;
+    /** Phase A: Density contexts for data-dense UIs */
+    density: TrinityDensity;
+}
+export interface TrinityComponentSize<T> {
+    small: T;
+    medium: T;
+    large: T;
+}
+export interface TrinityPadding {
+    x: number;
+    y: number;
+}
+export interface TrinityButtonColors {
+    background: string;
+    backgroundHover: string;
+    text: string;
+    border?: string;
+    textHover?: string;
+}
+export interface TrinityButtonTokens {
+    height: TrinityComponentSize<number>;
+    padding: TrinityComponentSize<TrinityPadding>;
+    fontSize: TrinityComponentSize<string>;
+    borderRadius: number;
+    primary: TrinityButtonColors;
+    secondary: TrinityButtonColors;
+    outlined: TrinityButtonColors;
+}
+export interface TrinityInputBorderColors {
+    default: string;
+    hover: string;
+    focus: string;
+    error: string;
+}
+export interface TrinityInputBackgroundColors {
+    default: string;
+    disabled: string;
+}
+export interface TrinityInputTokens {
+    height: TrinityComponentSize<number>;
+    padding: TrinityComponentSize<TrinityPadding>;
+    fontSize: TrinityComponentSize<string>;
+    borderRadius: number;
+    borderColor: TrinityInputBorderColors;
+    background: TrinityInputBackgroundColors;
+}
+export interface TrinityCardTokens {
+    padding: TrinityComponentSize<number>;
+    borderRadius: number;
+    shadow: string;
+    background: string;
+    border: string;
+}
+export interface TrinityAvatarSize {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+}
+export interface TrinityAvatarFontSize {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+export interface TrinityAvatarTokens {
+    size: TrinityAvatarSize;
+    borderRadius: number;
+    fontSize: TrinityAvatarFontSize;
+}
+export interface TrinityBadgeTokens {
+    padding: TrinityPadding;
+    borderRadius: number;
+    fontSize: string;
+    fontWeight: number;
+}
+export interface TrinityChipSize {
+    small: number;
+    medium: number;
+}
+export interface TrinityChipFontSize {
+    small: string;
+    medium: string;
+}
+export interface TrinityChipTokens {
+    height: TrinityChipSize;
+    padding: {
+        small: TrinityPadding;
+        medium: TrinityPadding;
+    };
+    borderRadius: number;
+    fontSize: TrinityChipFontSize;
+}
+export interface TrinityTooltipTokens {
+    padding: TrinityPadding;
+    borderRadius: number;
+    fontSize: string;
+    background: string;
+    text: string;
+}
+export interface TrinityModalWidth {
+    small: number;
+    medium: number;
+    large: number;
+    fullWidth: string;
+}
+export interface TrinityModalTokens {
+    padding: number;
+    borderRadius: number;
+    shadow: string;
+    backdropOpacity: number;
+    width: TrinityModalWidth;
+}
+export interface TrinitySwitchSize {
+    small: number;
+    medium: number;
+}
+export interface TrinitySwitchTrack {
+    off: string;
+    on: string;
+}
+export interface TrinitySwitchTokens {
+    width: TrinitySwitchSize;
+    height: TrinitySwitchSize;
+    thumb: TrinitySwitchSize;
+    track: TrinitySwitchTrack;
+}
+export interface TrinityNavigationHeader {
+    height: number;
+    background: string;
+    text: string;
+}
+export interface TrinityNavigationSidebar {
+    width: number;
+    collapsedWidth: number;
+    background: string;
+}
+export interface TrinityNavigationItem {
+    height: number;
+    padding: TrinityPadding;
+    borderRadius: number;
+}
+export interface TrinityNavigationTokens {
+    header: TrinityNavigationHeader;
+    sidebar: TrinityNavigationSidebar;
+    item: TrinityNavigationItem;
+}
+export interface TrinityComponentTokens {
+    button: TrinityButtonTokens;
+    input: TrinityInputTokens;
+    card: TrinityCardTokens;
+    avatar: TrinityAvatarTokens;
+    badge: TrinityBadgeTokens;
+    chip: TrinityChipTokens;
+    tooltip: TrinityTooltipTokens;
+    modal: TrinityModalTokens;
+    switch: TrinitySwitchTokens;
+    navigation: TrinityNavigationTokens;
+}
+export interface TrinityDarkModeTextColors {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    disabled: string;
+}
+export interface TrinityDarkModeBackgroundColors {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+}
+export interface TrinityDarkModeBorderColors {
+    default: string;
+    subtle: string;
+    strong: string;
+}
+export interface TrinityDarkModeColors {
+    text: TrinityDarkModeTextColors;
+    background: TrinityDarkModeBackgroundColors;
+    border: TrinityDarkModeBorderColors;
+    interactive?: {
+        default: string;
+        hover: string;
+        active: string;
+        disabled: string;
+        focus: string;
+    };
+    status?: {
+        error: TrinityStatusColors;
+        warning: TrinityStatusColors;
+        success: TrinityStatusColors;
+        info: TrinityStatusColors;
+    };
+}
+export interface TrinityDarkModeTokens {
+    colors: TrinityDarkModeColors;
+}
+export interface TrinityTokens {
+    base: TrinityBaseTokens;
+    semantic: TrinitySemanticTokens;
+    component: TrinityComponentTokens;
+    darkMode: TrinityDarkModeTokens;
+}
+export declare const baseTokens: {
+    colors: {
+        navy: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        purple: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        indigo: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            electric: string;
+        };
+        coral: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        azure: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        gray: {
+            0: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    spacing: {
+        0: number;
+        0.5: number;
+        1: number;
+        1.5: number;
+        2: number;
+        2.5: number;
+        3: number;
+        4: number;
+        5: number;
+        6: number;
+        7: number;
+        8: number;
+        9: number;
+        10: number;
+        12: number;
+        14: number;
+        16: number;
+        20: number;
+        24: number;
+        32: number;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    fontWeight: {
+        light: number;
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+    };
+    lineHeight: {
+        none: number;
+        tight: number;
+        snug: number;
+        normal: number;
+        relaxed: number;
+        loose: number;
+    };
+    letterSpacing: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    /**
+     * Border Radius Scale
+     *
+     * Designed for consistent nesting using: Outer = Inner + Padding
+     *
+     * Common nesting patterns:
+     * - Button (sm:6px) inside Card (md:8px) with 8px padding: 6 + 8 = 12 (use lg for container)
+     * - Card (md:8px) inside Modal (lg:12px) with 16px padding: 8 + 16 = 24 (use 3xl for modal)
+     * - Input (sm:6px) inside Panel (md:8px) with 8px padding: 6 + 8 = 12 (use lg for panel)
+     *
+     * Usage by element type:
+     * - xs (4px): Small badges, icon containers, status dots with corners
+     * - sm (6px): Buttons, inputs, chips, tags, small interactive elements
+     * - md (8px): Cards, list items, small panels, menu items
+     * - lg (12px): Large cards, dialogs, dropdown menus, panels
+     * - xl (16px): Modals, popovers, large containers
+     * - 2xl (20px): Very large modals with nested content
+     * - 3xl (24px): Maximum nesting scenarios
+     * - full (9999px): Pills, avatars, fully rounded elements
+     */
+    borderRadius: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+        '3xl': number;
+        full: number;
+    };
+    borderWidth: {
+        0: number;
+        1: number;
+        2: number;
+        4: number;
+        8: number;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        inner: string;
+    };
+    zIndex: {
+        auto: string;
+        0: number;
+        10: number;
+        20: number;
+        30: number;
+        40: number;
+        50: number;
+        dropdown: number;
+        sticky: number;
+        fixed: number;
+        modalBackdrop: number;
+        modal: number;
+        popover: number;
+        tooltip: number;
+    };
+    duration: {
+        fastest: string;
+        faster: string;
+        fast: string;
+        normal: string;
+        slow: string;
+        slower: string;
+        slowest: string;
+    };
+    easing: {
+        linear: string;
+        in: string;
+        out: string;
+        inOut: string;
+        smooth: string;
+        bounce: string;
+        elastic: string;
+    };
+    opacity: {
+        0: number;
+        5: number;
+        10: number;
+        20: number;
+        25: number;
+        30: number;
+        40: number;
+        50: number;
+        60: number;
+        70: number;
+        75: number;
+        80: number;
+        90: number;
+        95: number;
+        100: number;
+    };
+    breakpoints: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+};
+export declare const semanticTokens: {
+    colors: {
+        brand: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            accent: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            disabled: string;
+            inverse: string;
+            brand: string;
+            link: string;
+            linkHover: string;
+            error: string;
+            success: string;
+            warning: string;
+        };
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            inverse: string;
+            brand: string;
+            brandSubtle: string;
+            accent: string;
+            accentSubtle: string;
+        };
+        surface: {
+            elevated: string;
+            sunken: string;
+            overlay: string;
+            success: string;
+            error: string;
+            warning: string;
+            info: string;
+        };
+        border: {
+            default: string;
+            subtle: string;
+            strong: string;
+            focus: string;
+            error: string;
+            success: string;
+        };
+        interactive: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+            focus: string;
+        };
+        focus: {
+            ring: string;
+            ringOffset: string;
+        };
+        selection: {
+            background: string;
+            text: string;
+        };
+        status: {
+            error: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            warning: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            success: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            info: {
+                text: string;
+                background: string;
+                border: string;
+            };
+        };
+        /**
+         * Status Indicator Colors
+         * Semantic colors for StatusIndicator components (dots, badges, chips)
+         * These are intentionally distinct from status.* which are for alerts/toasts
+         * @intentional-color - Status indicators require specific colors for visual distinction
+         */
+        indicator: {
+            error: {
+                fg: string;
+                bg: string;
+            };
+            critical: {
+                fg: string;
+                bg: string;
+            };
+            failed: {
+                fg: string;
+                bg: string;
+            };
+            rejected: {
+                fg: string;
+                bg: string;
+            };
+            warning: {
+                fg: string;
+                bg: string;
+                outline: string;
+            };
+            caution: {
+                fg: string;
+                bg: string;
+                outline: string;
+            };
+            pending: {
+                fg: string;
+                bg: string;
+                outline: string;
+            };
+            inProgress: {
+                fg: string;
+                bg: string;
+            };
+            running: {
+                fg: string;
+                bg: string;
+            };
+            success: {
+                fg: string;
+                bg: string;
+            };
+            complete: {
+                fg: string;
+                bg: string;
+            };
+            approved: {
+                fg: string;
+                bg: string;
+            };
+            active: {
+                fg: string;
+                bg: string;
+            };
+            enabled: {
+                fg: string;
+                bg: string;
+            };
+            info: {
+                fg: string;
+                bg: string;
+            };
+            new: {
+                fg: string;
+                bg: string;
+            };
+            updated: {
+                fg: string;
+                bg: string;
+            };
+            neutral: {
+                fg: string;
+                bg: string;
+            };
+            draft: {
+                fg: string;
+                bg: string;
+            };
+            inactive: {
+                fg: string;
+                bg: string;
+            };
+            disabled: {
+                fg: string;
+                bg: string;
+            };
+            cancelled: {
+                fg: string;
+                bg: string;
+            };
+            unknown: {
+                fg: string;
+                bg: string;
+            };
+            beta: {
+                fg: string;
+                bg: string;
+            };
+            experimental: {
+                fg: string;
+                bg: string;
+            };
+        };
+        avatar: {
+            backgrounds: string[];
+            online: string;
+            offline: string;
+            busy: string;
+            away: string;
+        };
+        gradients: {
+            primary: string;
+            secondary: string;
+            accent: string;
+            avatarPrimary: string;
+            avatarWarm: string;
+            avatarCool: string;
+            darkOverlay: string;
+        };
+    };
+    typography: {
+        display: {
+            large: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+            medium: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+            small: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+        };
+        heading: {
+            h1: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h2: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h3: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h4: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h5: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h6: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+        body: {
+            large: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            medium: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            small: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+        label: {
+            large: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            medium: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            small: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+        micro: {
+            /** 10px - Absolute minimum for brief status text */
+            xs: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+            /** 11px - Primary micro size for badges, counters */
+            sm: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+        };
+        dense: {
+            /** Badge counts, status dots - 10px */
+            badge: string;
+            /** Metadata, timestamps, dense tables - 12px */
+            text: string;
+        };
+        data: {
+            /** Monospace styling for numeric values in tables */
+            numeric: {
+                fontFamily: string;
+                fontWeight: number;
+                fontFeatureSettings: string;
+            };
+            /** Code/technical content styling */
+            code: {
+                fontFamily: string;
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+    };
+    spacing: {
+        component: {
+            paddingXs: number;
+            paddingSm: number;
+            paddingMd: number;
+            paddingLg: number;
+            paddingXl: number;
+            gapXs: number;
+            gapSm: number;
+            gapMd: number;
+            gapLg: number;
+        };
+        layout: {
+            pagePadding: number;
+            sectionGap: number;
+            containerMaxWidth: number;
+            headerHeight: number;
+            sidebarWidthExpanded: number;
+            sidebarWidthCollapsed: number;
+            aiPanelWidth: number;
+            gutter: number;
+            contentPadding: number;
+        };
+    };
+    borders: {
+        /**
+         * Semantic border radius assignments
+         * Based on component size and nesting requirements:
+         * - Outer radius = Inner radius + Padding
+         */
+        radius: {
+            /** Buttons use full pill shape */
+            button: number;
+            /** Inputs use sm (6px) for 32-40px height elements */
+            input: number;
+            /** Cards use md (8px) for subtle rounding */
+            card: number;
+            /** Modals use lg (12px) - allows nested cards with md */
+            modal: number;
+            /** Large modals use xl (16px) for complex nested content */
+            modalLarge: number;
+            /** Badges use sm (6px) for subtle pill */
+            badge: number;
+            /** Avatars use full for circular shape */
+            avatar: number;
+            /** Chips/tags use sm (6px) */
+            chip: number;
+            /** Menu items use sm (6px) */
+            menuItem: number;
+            /** Dropdown/popover menus use lg (12px) - corrected to match actual usage */
+            menu: number;
+            /** Tooltips use md (8px) */
+            tooltip: number;
+            /** Small icon containers use xs (4px) */
+            iconContainer: number;
+            /** Sharp edges - 0px */
+            none: number;
+            /** Minimal softening - 4px */
+            subtle: number;
+            /** Noticeable curves - 6px */
+            soft: number;
+            /** Prominent curves - 8px */
+            rounded: number;
+            /** Maximum curvature - 9999px */
+            pill: number;
+            /** Perfect circle - 50% */
+            circle: string;
+            /** Skeleton loaders - 4px */
+            skeleton: number;
+            /** Table cells - 0px for data density */
+            tableCell: number;
+        };
+        /**
+         * Pre-formatted px strings for MUI sx prop
+         * Use these when MUI would interpret numbers as spacing multipliers
+         */
+        radiusPx: {
+            none: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            full: string;
+        };
+        width: {
+            default: number;
+            focus: number;
+            thick: number;
+        };
+    };
+    shadows: {
+        card: string;
+        dropdown: string;
+        modal: string;
+        button: string;
+        input: string;
+        inputFocus: string;
+    };
+    motion: {
+        duration: {
+            instant: string;
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+        easing: {
+            default: string;
+            enter: string;
+            exit: string;
+        };
+    };
+    effects: {
+        /**
+         * Overlay effects for interaction states and backdrops
+         */
+        overlay: {
+            /** Modal/drawer backdrop - 50% black */
+            scrim: string;
+            /** Standard hover - 8% black */
+            hover: string;
+            /** Subtle hover for dense UI - 4% black */
+            hoverSubtle: string;
+            /** Pressed/active - 12% black */
+            pressed: string;
+            /** Selected row/item - 8% black */
+            selected: string;
+            /** Disabled overlay - 38% black */
+            disabled: string;
+        };
+        /**
+         * White text/icon opacity for dark backgrounds
+         * Based on Material Design text emphasis levels
+         */
+        onDark: {
+            /** High emphasis - 87% white */
+            primary: string;
+            /** Medium emphasis - 70% white */
+            secondary: string;
+            /** Low emphasis - 50% white */
+            tertiary: string;
+            /** Borders/dividers - 12% white */
+            subtle: string;
+            /** Background overlays on dark surfaces - 10% white */
+            tint: string;
+            /** Visible dividers on dark backgrounds - 24% white */
+            divider: string;
+            /** High-visibility text/icons on dark - 80% white */
+            emphasis: string;
+            /** Maximum contrast - avoids pure white - 95% white */
+            contrast: string;
+        };
+        /**
+         * Shadow effects for elevation hierarchy
+         * Replaces hardcoded rgba shadows
+         */
+        shadow: {
+            /** Resting card elevation */
+            surface: string;
+            /** Hovered/focused elevation */
+            raised: string;
+            /** Dropdown/popover/nav menus */
+            floating: string;
+            /** Modal dialogs */
+            dialog: string;
+            /** Pressed/inset appearance */
+            inset: string;
+        };
+        /**
+         * Focus ring effects for accessibility
+         */
+        focus: {
+            /** Standard focus ring - purple brand */
+            ring: string;
+            /** Focus on dark backgrounds */
+            ringOnDark: string;
+            /** Emphasized focus for primary actions */
+            glow: string;
+        };
+        /**
+         * State indicator effects (subtle fills and emphasis borders)
+         */
+        state: {
+            /** Error background - 5% red */
+            errorSubtle: string;
+            /** Error border - 30% red */
+            errorEmphasis: string;
+            /** Warning background - 10% yellow */
+            warningSubtle: string;
+            /** Warning border - 40% yellow */
+            warningEmphasis: string;
+            /** Success background - 5% green */
+            successSubtle: string;
+            /** Success border - 30% green */
+            successEmphasis: string;
+            /** Info background - 5% blue */
+            infoSubtle: string;
+            /** Info border - 30% blue */
+            infoEmphasis: string;
+        };
+    };
+    iconSize: {
+        /** Within text flow - 14px */
+        inline: number;
+        /** Standard controls (buttons, inputs) - 16px */
+        control: number;
+        /** Navigation and toolbar - 20px */
+        navigation: number;
+        /** Visual anchor (empty states) - 24px */
+        prominent: number;
+        /** Hero sections - 28px */
+        hero: number;
+        /** Maximum impact - 36px */
+        display: number;
+    };
+    inline: {
+        /** Minimum internal space - 4px */
+        tight: number;
+        /** Dense but readable - 8px */
+        compact: number;
+        /** Balanced density - 12px */
+        snug: number;
+        /** Standard breathing room - 16px */
+        comfortable: number;
+        /** Generous without excess - 20px */
+        relaxed: number;
+        /** Maximum breathing room - 24px */
+        spacious: number;
+    };
+    stack: {
+        /** Minimum vertical space - 4px */
+        tight: number;
+        /** Dense but readable - 8px */
+        compact: number;
+        /** Balanced density - 12px */
+        snug: number;
+        /** Standard vertical space - 16px */
+        comfortable: number;
+        /** Generous without excess - 20px */
+        relaxed: number;
+        /** Maximum vertical space - 24px */
+        spacious: number;
+        /** @deprecated Use tight instead */
+        related: number;
+        /** @deprecated Use compact instead */
+        grouped: number;
+        /** @deprecated Use comfortable instead */
+        separated: number;
+        /** @deprecated Use spacious instead */
+        distinct: number;
+    };
+    density: {
+        /** Maximum info density */
+        compact: {
+            rowHeight: number;
+            cellPadding: number;
+            gap: number;
+        };
+        /** Balanced readability/density */
+        standard: {
+            rowHeight: number;
+            cellPadding: number;
+            gap: number;
+        };
+        /** Prioritize readability */
+        comfortable: {
+            rowHeight: number;
+            cellPadding: number;
+            gap: number;
+        };
+    };
+};
+/**
+ * Canonical brand colors derived from baseTokens.
+ *
+ * This provides API compatibility with the legacy `brandColors` export from theme.ts.
+ * Components should migrate from `import { brandColors } from '../theme'`
+ * to `import { brandColors } from '../tokens'`.
+ *
+ * MAPPING TABLE:
+ * ┌─────────────────────────┬───────────┬──────────────────────────────┐
+ * │ brandColors path        │ Hex Value │ baseTokens path              │
+ * ├─────────────────────────┼───────────┼──────────────────────────────┤
+ * │ primary.main            │ #050742   │ colors.navy[900]             │
+ * │ primary.light           │ #7841C9   │ colors.purple[700]           │
+ * │ primary.dark            │ #3816A0   │ colors.indigo[900]           │
+ * │ secondary.main          │ #FF6150   │ colors.coral[800]            │
+ * │ secondary.light         │ #27AAE1   │ colors.azure[500]            │
+ * │ secondary.dark          │ #6B12ED   │ colors.indigo.electric       │
+ * │ neutral.white           │ #FFFFFF   │ colors.gray[0]               │
+ * │ neutral.lightGray       │ #FAFAFA   │ colors.gray[50]              │
+ * │ neutral.gray100         │ #E5E7EB   │ colors.gray[200]             │
+ * │ neutral.gray400         │ #9CA3AF   │ colors.gray[400]             │
+ * │ neutral.gray500         │ #6B7280   │ colors.gray[500]             │
+ * │ neutral.gray600         │ #374151   │ colors.gray[600]             │
+ * │ neutral.darkBg          │ #18181B   │ colors.gray[800]             │
+ * │ neutral.darkPaper       │ #27272A   │ colors.gray[700]             │
+ * └─────────────────────────┴───────────┴──────────────────────────────┘
+ *
+ * NOTE: neutral.gray100 naming is misleading - it's actually gray[200] (#E5E7EB).
+ * This is preserved for backwards compatibility with theme.ts.
+ */
+export declare const brandColors: {
+    readonly primary: {
+        readonly main: string;
+        readonly light: string;
+        readonly dark: string;
+    };
+    readonly secondary: {
+        readonly main: string;
+        readonly light: string;
+        readonly dark: string;
+    };
+    readonly neutral: {
+        readonly white: string;
+        readonly lightGray: string;
+        readonly gray50: string;
+        readonly gray100: string;
+        readonly gray200: string;
+        readonly gray300: string;
+        readonly gray400: string;
+        readonly gray500: string;
+        readonly gray600: string;
+        readonly gray700: string;
+        readonly gray800: string;
+        readonly gray900: string;
+        readonly darkBg: string;
+        readonly darkPaper: string;
+    };
+};
+/**
+ * Type for brandColors structure
+ */
+export type TrinityBrandColorsLegacy = typeof brandColors;
+export declare const componentTokens: {
+    button: {
+        height: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        padding: {
+            small: {
+                x: number;
+                y: number;
+            };
+            medium: {
+                x: number;
+                y: number;
+            };
+            large: {
+                x: number;
+                y: number;
+            };
+        };
+        fontSize: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        borderRadius: number;
+        primary: {
+            background: string;
+            backgroundHover: string;
+            text: string;
+        };
+        secondary: {
+            background: string;
+            backgroundHover: string;
+            text: string;
+        };
+        outlined: {
+            background: string;
+            backgroundHover: string;
+            border: string;
+            text: string;
+            textHover: string;
+        };
+    };
+    input: {
+        height: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        padding: {
+            small: {
+                x: number;
+                y: number;
+            };
+            medium: {
+                x: number;
+                y: number;
+            };
+            large: {
+                x: number;
+                y: number;
+            };
+        };
+        fontSize: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        borderRadius: number;
+        borderColor: {
+            default: string;
+            hover: string;
+            focus: string;
+            error: string;
+        };
+        background: {
+            default: string;
+            disabled: string;
+        };
+    };
+    card: {
+        padding: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        borderRadius: number;
+        shadow: string;
+        background: string;
+        border: string;
+    };
+    avatar: {
+        size: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+        };
+        borderRadius: number;
+        fontSize: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    badge: {
+        padding: {
+            x: number;
+            y: number;
+        };
+        borderRadius: number;
+        fontSize: string;
+        fontWeight: number;
+    };
+    chip: {
+        height: {
+            small: number;
+            medium: number;
+        };
+        padding: {
+            small: {
+                x: number;
+                y: number;
+            };
+            medium: {
+                x: number;
+                y: number;
+            };
+        };
+        borderRadius: number;
+        fontSize: {
+            small: string;
+            medium: string;
+        };
+    };
+    tooltip: {
+        padding: {
+            x: number;
+            y: number;
+        };
+        borderRadius: number;
+        fontSize: string;
+        background: string;
+        text: string;
+    };
+    modal: {
+        padding: number;
+        borderRadius: number;
+        shadow: string;
+        backdropOpacity: number;
+        width: {
+            small: number;
+            medium: number;
+            large: number;
+            fullWidth: string;
+        };
+    };
+    switch: {
+        width: {
+            small: number;
+            medium: number;
+        };
+        height: {
+            small: number;
+            medium: number;
+        };
+        thumb: {
+            small: number;
+            medium: number;
+        };
+        track: {
+            off: string;
+            on: string;
+        };
+    };
+    navigation: {
+        header: {
+            height: number;
+            background: string;
+            text: string;
+        };
+        sidebar: {
+            width: number;
+            collapsedWidth: number;
+            background: string;
+        };
+        item: {
+            height: number;
+            padding: {
+                x: number;
+                y: number;
+            };
+            borderRadius: number;
+        };
+    };
+};
+/**
+ * DESIGN SYSTEM ARCHITECTURE HIERARCHY
+ *
+ * 1. FOUNDATIONS (Base Layer)
+ *    └── Color palettes, typography, spacing scales, iconography
+ *    └── These are the raw, primitive values
+ *
+ * 2. DESIGN TOKENS (Semantic Layer)
+ *    └── Smallest units mapping foundations to semantic roles
+ *    └── E.g., color-primary-600, spacing-md, font-heading
+ *
+ * 3. CORE COMPONENTS (Component Layer)
+ *    └── Reusable UI building blocks (buttons, inputs, cards)
+ *    └── Agnostic of specific product logic
+ *
+ * 4. PATTERNS & RECIPES (Composition Layer)
+ *    └── Composed groups solving specific user tasks
+ *    └── E.g., Contact Form, Navigation Header, Data Table
+ *
+ * 5. PRODUCT ECOSYSTEM (Application Layer)
+ *    └── Final implementations in actual products
+ *    └── Product-specific customizations and overrides
+ */
+export type HierarchyLevel = 'foundation' | 'token' | 'component' | 'pattern' | 'product';
+export interface HierarchyMeta {
+    level: HierarchyLevel;
+    layer: number;
+    description: string;
+}
+/**
+ * ATTENTION HIERARCHY
+ * Controls signal-to-noise ratio across the interface
+ * Primary > Secondary > Tertiary > Muted > Disabled
+ */
+export interface AttentionLevel {
+    /** Prominence score 1-5 (5 being most prominent) */
+    prominence: number;
+    /** Typical use cases */
+    usage: string[];
+    /** Recommended contrast ratio */
+    minContrast: number;
+}
+export declare const attentionHierarchy: {
+    /** Most important actions/content - demands immediate attention */
+    readonly primary: {
+        readonly prominence: 5;
+        readonly usage: readonly ["Primary CTAs", "Critical alerts", "Page titles", "Current navigation"];
+        readonly minContrast: 7;
+    };
+    /** Important but not critical - strong visual presence */
+    readonly secondary: {
+        readonly prominence: 4;
+        readonly usage: readonly ["Secondary buttons", "Section headings", "Key information", "Active states"];
+        readonly minContrast: 4.5;
+    };
+    /** Supportive content - visible but not competing */
+    readonly tertiary: {
+        readonly prominence: 3;
+        readonly usage: readonly ["Body text", "Form labels", "Navigation items", "Card content"];
+        readonly minContrast: 4.5;
+    };
+    /** Background/supporting information */
+    readonly muted: {
+        readonly prominence: 2;
+        readonly usage: readonly ["Helper text", "Timestamps", "Metadata", "Placeholders"];
+        readonly minContrast: 3;
+    };
+    /** Non-interactive or unavailable */
+    readonly disabled: {
+        readonly prominence: 1;
+        readonly usage: readonly ["Disabled controls", "Inactive states", "Read-only fields"];
+        readonly minContrast: 2.5;
+    };
+};
+/**
+ * TYPOGRAPHIC HIERARCHY
+ * Distinct font treatments to differentiate content types
+ */
+export declare const typographicHierarchy: {
+    readonly display: {
+        readonly level: 1;
+        readonly scale: {
+            readonly large: {
+                readonly size: "3rem";
+                readonly weight: 700;
+                readonly lineHeight: 1.1;
+                readonly tracking: "-0.02em";
+            };
+            readonly medium: {
+                readonly size: "2.25rem";
+                readonly weight: 700;
+                readonly lineHeight: 1.15;
+                readonly tracking: "-0.01em";
+            };
+            readonly small: {
+                readonly size: "1.875rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.2;
+                readonly tracking: "0";
+            };
+        };
+    };
+    readonly heading: {
+        readonly level: 2;
+        readonly scale: {
+            readonly h1: {
+                readonly size: "1.875rem";
+                readonly weight: 700;
+                readonly lineHeight: 1.25;
+            };
+            readonly h2: {
+                readonly size: "1.5rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.3;
+            };
+            readonly h3: {
+                readonly size: "1.25rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.35;
+            };
+            readonly h4: {
+                readonly size: "1.125rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.4;
+            };
+            readonly h5: {
+                readonly size: "1rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.45;
+            };
+            readonly h6: {
+                readonly size: "0.875rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.5;
+            };
+        };
+    };
+    readonly body: {
+        readonly level: 3;
+        readonly scale: {
+            readonly large: {
+                readonly size: "1.125rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.6;
+            };
+            readonly medium: {
+                readonly size: "1rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.5;
+            };
+            readonly small: {
+                readonly size: "0.875rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.5;
+            };
+        };
+    };
+    readonly label: {
+        readonly level: 4;
+        readonly scale: {
+            readonly large: {
+                readonly size: "1rem";
+                readonly weight: 500;
+                readonly lineHeight: 1.25;
+            };
+            readonly medium: {
+                readonly size: "0.875rem";
+                readonly weight: 500;
+                readonly lineHeight: 1.25;
+            };
+            readonly small: {
+                readonly size: "0.75rem";
+                readonly weight: 500;
+                readonly lineHeight: 1.25;
+            };
+        };
+    };
+    readonly caption: {
+        readonly level: 5;
+        readonly scale: {
+            readonly default: {
+                readonly size: "0.75rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.4;
+            };
+            readonly emphasis: {
+                readonly size: "0.75rem";
+                readonly weight: 500;
+                readonly lineHeight: 1.4;
+            };
+        };
+    };
+    readonly overline: {
+        readonly level: 6;
+        readonly scale: {
+            readonly default: {
+                readonly size: "0.625rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.5;
+                readonly tracking: "0.1em";
+                readonly transform: "uppercase";
+            };
+        };
+    };
+};
+/**
+ * ELEVATION HIERARCHY (Z-Axis)
+ * Creates depth through shadows and layering
+ * Higher elevation = more prominent, closer to user
+ */
+export declare const elevationHierarchy: {
+    /** Ground level - page background, sunken areas */
+    readonly ground: {
+        readonly level: 0;
+        readonly zIndex: 0;
+        readonly shadow: "none";
+        readonly description: "Page backgrounds, wells, sunken inputs";
+    };
+    /** Resting - default content surfaces */
+    readonly resting: {
+        readonly level: 1;
+        readonly zIndex: 1;
+        readonly shadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly description: "Cards, panels at rest";
+    };
+    /** Raised - interactive/hover states */
+    readonly raised: {
+        readonly level: 2;
+        readonly zIndex: 10;
+        readonly shadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly description: "Hovered cards, active buttons";
+    };
+    /** Floating - dropdowns, menus */
+    readonly floating: {
+        readonly level: 3;
+        readonly zIndex: 1000;
+        readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly description: "Dropdown menus, popovers";
+    };
+    /** Sticky - headers, navigation */
+    readonly sticky: {
+        readonly level: 4;
+        readonly zIndex: 1020;
+        readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly description: "Sticky headers, fixed navigation";
+    };
+    /** Overlay - backdrop for modals */
+    readonly overlay: {
+        readonly level: 5;
+        readonly zIndex: 1040;
+        readonly shadow: "none";
+        readonly description: "Modal/dialog backdrops";
+    };
+    /** Dialog - modals, alerts */
+    readonly dialog: {
+        readonly level: 6;
+        readonly zIndex: 1050;
+        readonly shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+        readonly description: "Modal dialogs, alerts";
+    };
+    /** Popover - tooltips, notifications */
+    readonly popover: {
+        readonly level: 7;
+        readonly zIndex: 1060;
+        readonly shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        readonly description: "Popovers, floating panels";
+    };
+    /** Tooltip - highest priority overlays */
+    readonly tooltip: {
+        readonly level: 8;
+        readonly zIndex: 1070;
+        readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly description: "Tooltips, critical notifications";
+    };
+};
+/**
+ * SCALE HIERARCHY
+ * Size-based importance through consistent ratios
+ */
+export declare const scaleHierarchy: {
+    /** Scale ratio for size progression */
+    readonly ratio: 1.25;
+    /** Size scale multipliers */
+    readonly sizes: {
+        readonly '3xs': 0.512;
+        readonly '2xs': 0.64;
+        readonly xs: 0.8;
+        readonly sm: 1;
+        readonly md: 1.25;
+        readonly lg: 1.563;
+        readonly xl: 1.953;
+        readonly '2xl': 2.441;
+        readonly '3xl': 3.052;
+    };
+    /** Icon sizes following the scale */
+    readonly icons: {
+        readonly xs: 12;
+        readonly sm: 16;
+        readonly md: 20;
+        readonly lg: 24;
+        readonly xl: 32;
+        readonly '2xl': 40;
+    };
+    /** Touch target minimums (accessibility) */
+    readonly touchTargets: {
+        readonly minimum: 44;
+        readonly comfortable: 48;
+        readonly spacious: 56;
+    };
+};
+/**
+ * CONTRAST HIERARCHY
+ * Color contrast for attention management
+ */
+export declare const contrastHierarchy: {
+    /** High contrast - primary actions, critical info */
+    readonly high: {
+        readonly foreground: string;
+        readonly background: string;
+        readonly ratio: 12.5;
+    };
+    /** Medium contrast - body content */
+    readonly medium: {
+        readonly foreground: string;
+        readonly background: string;
+        readonly ratio: 7.5;
+    };
+    /** Low contrast - secondary/muted content */
+    readonly low: {
+        readonly foreground: string;
+        readonly background: string;
+        readonly ratio: 4.5;
+    };
+    /** Subtle - disabled/decorative */
+    readonly subtle: {
+        readonly foreground: string;
+        readonly background: string;
+        readonly ratio: 3;
+    };
+};
+/**
+ * INTERACTIVE HIERARCHY
+ * Visual states for user feedback
+ */
+export declare const interactiveHierarchy: {
+    /** Default resting state */
+    readonly default: {
+        readonly opacity: 1;
+        readonly transform: "none";
+        readonly transition: "all 150ms ease-out";
+    };
+    /** Mouse hovering over element */
+    readonly hover: {
+        readonly opacity: 1;
+        readonly transform: "translateY(-1px)";
+        readonly transition: "all 150ms ease-out";
+    };
+    /** Element being pressed */
+    readonly active: {
+        readonly opacity: 0.9;
+        readonly transform: "translateY(0) scale(0.98)";
+        readonly transition: "all 50ms ease-out";
+    };
+    /** Keyboard focused */
+    readonly focus: {
+        readonly outline: `2px solid ${string}`;
+        readonly outlineOffset: "2px";
+        readonly transition: "outline-offset 100ms ease-out";
+    };
+    /** Element is disabled */
+    readonly disabled: {
+        readonly opacity: 0.5;
+        readonly cursor: "not-allowed";
+        readonly pointerEvents: "none";
+    };
+};
+/**
+ * SPACING HIERARCHY
+ * Consistent spacing scale for layout rhythm
+ */
+export declare const spacingHierarchy: {
+    /** Micro spacing - between related elements */
+    readonly micro: {
+        readonly 1: 4;
+        readonly 2: 8;
+    };
+    /** Component spacing - within components */
+    readonly component: {
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 5: 20;
+    };
+    /** Section spacing - between sections */
+    readonly section: {
+        readonly 6: 24;
+        readonly 8: 32;
+        readonly 10: 40;
+    };
+    /** Layout spacing - page-level */
+    readonly layout: {
+        readonly 12: 48;
+        readonly 16: 64;
+        readonly 24: 96;
+        readonly 32: 128;
+    };
+};
+/**
+ * HIERARCHY UTILITIES
+ * Helper functions for applying hierarchy
+ */
+/** Get elevation styles for a given level */
+export declare function getElevation(level: keyof typeof elevationHierarchy): {
+    zIndex: 0 | 10 | 1 | 1000 | 1020 | 1040 | 1050 | 1060 | 1070;
+    boxShadow: "none" | "0 1px 2px 0 rgb(0 0 0 / 0.05)" | "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" | "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" | "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" | "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+};
+/** Get typography styles for a given hierarchy */
+export declare function getTypography(category: keyof typeof typographicHierarchy, variant: string): {} | null;
+/** Get attention-based color treatment */
+export declare function getAttentionColor(level: keyof typeof attentionHierarchy, mode?: 'light' | 'dark'): string;
+/** Calculate spacing from hierarchy */
+export declare function getHierarchySpacing(category: 'micro' | 'component' | 'section' | 'layout', size: number): number;
+export declare const darkModeTokens: TrinityDarkModeTokens;
+export declare const darkModeShadows: {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    glow: {
+        primary: string;
+        accent: string;
+        info: string;
+    };
+};
+export interface BrandVariant {
+    name: string;
+    primary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrast: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrast: string;
+    };
+    accent: string;
+}
+/**
+ * Brand Variants - Pre-configured color schemes
+ * Each variant provides a complete color palette that can be swapped at runtime
+ */
+export declare const brandVariants: Record<string, BrandVariant>;
+/**
+ * Get semantic tokens for a specific brand variant
+ * @param variant - The brand variant name
+ * @returns Modified semantic tokens with the brand colors applied
+ */
+export declare function getBrandSemanticTokens(variant: keyof typeof brandVariants): {
+    colors: {
+        brand: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            accent: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            disabled: string;
+            inverse: string;
+            brand: string;
+            link: string;
+            linkHover: string;
+            error: string;
+            success: string;
+            warning: string;
+        };
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            inverse: string;
+            brand: string;
+            brandSubtle: string;
+            accent: string;
+            accentSubtle: string;
+        };
+        surface: {
+            elevated: string;
+            sunken: string;
+            overlay: string;
+            success: string;
+            error: string;
+            warning: string;
+            info: string;
+        };
+        border: {
+            default: string;
+            subtle: string;
+            strong: string;
+            focus: string;
+            error: string;
+            success: string;
+        };
+        interactive: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+            focus: string;
+        };
+        focus: {
+            ring: string;
+            ringOffset: string;
+        };
+        selection: {
+            background: string;
+            text: string;
+        };
+        status: {
+            error: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            warning: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            success: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            info: {
+                text: string;
+                background: string;
+                border: string;
+            };
+        };
+        /**
+         * Status Indicator Colors
+         * Semantic colors for StatusIndicator components (dots, badges, chips)
+         * These are intentionally distinct from status.* which are for alerts/toasts
+         * @intentional-color - Status indicators require specific colors for visual distinction
+         */
+        indicator: {
+            error: {
+                fg: string;
+                bg: string;
+            };
+            critical: {
+                fg: string;
+                bg: string;
+            };
+            failed: {
+                fg: string;
+                bg: string;
+            };
+            rejected: {
+                fg: string;
+                bg: string;
+            };
+            warning: {
+                fg: string;
+                bg: string;
+                outline: string;
+            };
+            caution: {
+                fg: string;
+                bg: string;
+                outline: string;
+            };
+            pending: {
+                fg: string;
+                bg: string;
+                outline: string;
+            };
+            inProgress: {
+                fg: string;
+                bg: string;
+            };
+            running: {
+                fg: string;
+                bg: string;
+            };
+            success: {
+                fg: string;
+                bg: string;
+            };
+            complete: {
+                fg: string;
+                bg: string;
+            };
+            approved: {
+                fg: string;
+                bg: string;
+            };
+            active: {
+                fg: string;
+                bg: string;
+            };
+            enabled: {
+                fg: string;
+                bg: string;
+            };
+            info: {
+                fg: string;
+                bg: string;
+            };
+            new: {
+                fg: string;
+                bg: string;
+            };
+            updated: {
+                fg: string;
+                bg: string;
+            };
+            neutral: {
+                fg: string;
+                bg: string;
+            };
+            draft: {
+                fg: string;
+                bg: string;
+            };
+            inactive: {
+                fg: string;
+                bg: string;
+            };
+            disabled: {
+                fg: string;
+                bg: string;
+            };
+            cancelled: {
+                fg: string;
+                bg: string;
+            };
+            unknown: {
+                fg: string;
+                bg: string;
+            };
+            beta: {
+                fg: string;
+                bg: string;
+            };
+            experimental: {
+                fg: string;
+                bg: string;
+            };
+        };
+        avatar: {
+            backgrounds: string[];
+            online: string;
+            offline: string;
+            busy: string;
+            away: string;
+        };
+        gradients: {
+            primary: string;
+            secondary: string;
+            accent: string;
+            avatarPrimary: string;
+            avatarWarm: string;
+            avatarCool: string;
+            darkOverlay: string;
+        };
+    };
+    typography: {
+        display: {
+            large: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+            medium: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+            small: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+        };
+        heading: {
+            h1: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h2: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h3: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h4: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h5: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            h6: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+        body: {
+            large: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            medium: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            small: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+        label: {
+            large: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            medium: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+            small: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+        micro: {
+            /** 10px - Absolute minimum for brief status text */
+            xs: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+            /** 11px - Primary micro size for badges, counters */
+            sm: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                letterSpacing: string;
+            };
+        };
+        dense: {
+            /** Badge counts, status dots - 10px */
+            badge: string;
+            /** Metadata, timestamps, dense tables - 12px */
+            text: string;
+        };
+        data: {
+            /** Monospace styling for numeric values in tables */
+            numeric: {
+                fontFamily: string;
+                fontWeight: number;
+                fontFeatureSettings: string;
+            };
+            /** Code/technical content styling */
+            code: {
+                fontFamily: string;
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+            };
+        };
+    };
+    spacing: {
+        component: {
+            paddingXs: number;
+            paddingSm: number;
+            paddingMd: number;
+            paddingLg: number;
+            paddingXl: number;
+            gapXs: number;
+            gapSm: number;
+            gapMd: number;
+            gapLg: number;
+        };
+        layout: {
+            pagePadding: number;
+            sectionGap: number;
+            containerMaxWidth: number;
+            headerHeight: number;
+            sidebarWidthExpanded: number;
+            sidebarWidthCollapsed: number;
+            aiPanelWidth: number;
+            gutter: number;
+            contentPadding: number;
+        };
+    };
+    borders: {
+        /**
+         * Semantic border radius assignments
+         * Based on component size and nesting requirements:
+         * - Outer radius = Inner radius + Padding
+         */
+        radius: {
+            /** Buttons use full pill shape */
+            button: number;
+            /** Inputs use sm (6px) for 32-40px height elements */
+            input: number;
+            /** Cards use md (8px) for subtle rounding */
+            card: number;
+            /** Modals use lg (12px) - allows nested cards with md */
+            modal: number;
+            /** Large modals use xl (16px) for complex nested content */
+            modalLarge: number;
+            /** Badges use sm (6px) for subtle pill */
+            badge: number;
+            /** Avatars use full for circular shape */
+            avatar: number;
+            /** Chips/tags use sm (6px) */
+            chip: number;
+            /** Menu items use sm (6px) */
+            menuItem: number;
+            /** Dropdown/popover menus use lg (12px) - corrected to match actual usage */
+            menu: number;
+            /** Tooltips use md (8px) */
+            tooltip: number;
+            /** Small icon containers use xs (4px) */
+            iconContainer: number;
+            /** Sharp edges - 0px */
+            none: number;
+            /** Minimal softening - 4px */
+            subtle: number;
+            /** Noticeable curves - 6px */
+            soft: number;
+            /** Prominent curves - 8px */
+            rounded: number;
+            /** Maximum curvature - 9999px */
+            pill: number;
+            /** Perfect circle - 50% */
+            circle: string;
+            /** Skeleton loaders - 4px */
+            skeleton: number;
+            /** Table cells - 0px for data density */
+            tableCell: number;
+        };
+        /**
+         * Pre-formatted px strings for MUI sx prop
+         * Use these when MUI would interpret numbers as spacing multipliers
+         */
+        radiusPx: {
+            none: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            full: string;
+        };
+        width: {
+            default: number;
+            focus: number;
+            thick: number;
+        };
+    };
+    shadows: {
+        card: string;
+        dropdown: string;
+        modal: string;
+        button: string;
+        input: string;
+        inputFocus: string;
+    };
+    motion: {
+        duration: {
+            instant: string;
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+        easing: {
+            default: string;
+            enter: string;
+            exit: string;
+        };
+    };
+    effects: {
+        /**
+         * Overlay effects for interaction states and backdrops
+         */
+        overlay: {
+            /** Modal/drawer backdrop - 50% black */
+            scrim: string;
+            /** Standard hover - 8% black */
+            hover: string;
+            /** Subtle hover for dense UI - 4% black */
+            hoverSubtle: string;
+            /** Pressed/active - 12% black */
+            pressed: string;
+            /** Selected row/item - 8% black */
+            selected: string;
+            /** Disabled overlay - 38% black */
+            disabled: string;
+        };
+        /**
+         * White text/icon opacity for dark backgrounds
+         * Based on Material Design text emphasis levels
+         */
+        onDark: {
+            /** High emphasis - 87% white */
+            primary: string;
+            /** Medium emphasis - 70% white */
+            secondary: string;
+            /** Low emphasis - 50% white */
+            tertiary: string;
+            /** Borders/dividers - 12% white */
+            subtle: string;
+            /** Background overlays on dark surfaces - 10% white */
+            tint: string;
+            /** Visible dividers on dark backgrounds - 24% white */
+            divider: string;
+            /** High-visibility text/icons on dark - 80% white */
+            emphasis: string;
+            /** Maximum contrast - avoids pure white - 95% white */
+            contrast: string;
+        };
+        /**
+         * Shadow effects for elevation hierarchy
+         * Replaces hardcoded rgba shadows
+         */
+        shadow: {
+            /** Resting card elevation */
+            surface: string;
+            /** Hovered/focused elevation */
+            raised: string;
+            /** Dropdown/popover/nav menus */
+            floating: string;
+            /** Modal dialogs */
+            dialog: string;
+            /** Pressed/inset appearance */
+            inset: string;
+        };
+        /**
+         * Focus ring effects for accessibility
+         */
+        focus: {
+            /** Standard focus ring - purple brand */
+            ring: string;
+            /** Focus on dark backgrounds */
+            ringOnDark: string;
+            /** Emphasized focus for primary actions */
+            glow: string;
+        };
+        /**
+         * State indicator effects (subtle fills and emphasis borders)
+         */
+        state: {
+            /** Error background - 5% red */
+            errorSubtle: string;
+            /** Error border - 30% red */
+            errorEmphasis: string;
+            /** Warning background - 10% yellow */
+            warningSubtle: string;
+            /** Warning border - 40% yellow */
+            warningEmphasis: string;
+            /** Success background - 5% green */
+            successSubtle: string;
+            /** Success border - 30% green */
+            successEmphasis: string;
+            /** Info background - 5% blue */
+            infoSubtle: string;
+            /** Info border - 30% blue */
+            infoEmphasis: string;
+        };
+    };
+    iconSize: {
+        /** Within text flow - 14px */
+        inline: number;
+        /** Standard controls (buttons, inputs) - 16px */
+        control: number;
+        /** Navigation and toolbar - 20px */
+        navigation: number;
+        /** Visual anchor (empty states) - 24px */
+        prominent: number;
+        /** Hero sections - 28px */
+        hero: number;
+        /** Maximum impact - 36px */
+        display: number;
+    };
+    inline: {
+        /** Minimum internal space - 4px */
+        tight: number;
+        /** Dense but readable - 8px */
+        compact: number;
+        /** Balanced density - 12px */
+        snug: number;
+        /** Standard breathing room - 16px */
+        comfortable: number;
+        /** Generous without excess - 20px */
+        relaxed: number;
+        /** Maximum breathing room - 24px */
+        spacious: number;
+    };
+    stack: {
+        /** Minimum vertical space - 4px */
+        tight: number;
+        /** Dense but readable - 8px */
+        compact: number;
+        /** Balanced density - 12px */
+        snug: number;
+        /** Standard vertical space - 16px */
+        comfortable: number;
+        /** Generous without excess - 20px */
+        relaxed: number;
+        /** Maximum vertical space - 24px */
+        spacious: number;
+        /** @deprecated Use tight instead */
+        related: number;
+        /** @deprecated Use compact instead */
+        grouped: number;
+        /** @deprecated Use comfortable instead */
+        separated: number;
+        /** @deprecated Use spacious instead */
+        distinct: number;
+    };
+    density: {
+        /** Maximum info density */
+        compact: {
+            rowHeight: number;
+            cellPadding: number;
+            gap: number;
+        };
+        /** Balanced readability/density */
+        standard: {
+            rowHeight: number;
+            cellPadding: number;
+            gap: number;
+        };
+        /** Prioritize readability */
+        comfortable: {
+            rowHeight: number;
+            cellPadding: number;
+            gap: number;
+        };
+    };
+};
+/**
+ * Complete hierarchy system combining all hierarchy aspects
+ * Use this as the single source of truth for design hierarchy
+ */
+export declare const hierarchy: {
+    /** Attention/importance levels */
+    readonly attention: {
+        /** Most important actions/content - demands immediate attention */
+        readonly primary: {
+            readonly prominence: 5;
+            readonly usage: readonly ["Primary CTAs", "Critical alerts", "Page titles", "Current navigation"];
+            readonly minContrast: 7;
+        };
+        /** Important but not critical - strong visual presence */
+        readonly secondary: {
+            readonly prominence: 4;
+            readonly usage: readonly ["Secondary buttons", "Section headings", "Key information", "Active states"];
+            readonly minContrast: 4.5;
+        };
+        /** Supportive content - visible but not competing */
+        readonly tertiary: {
+            readonly prominence: 3;
+            readonly usage: readonly ["Body text", "Form labels", "Navigation items", "Card content"];
+            readonly minContrast: 4.5;
+        };
+        /** Background/supporting information */
+        readonly muted: {
+            readonly prominence: 2;
+            readonly usage: readonly ["Helper text", "Timestamps", "Metadata", "Placeholders"];
+            readonly minContrast: 3;
+        };
+        /** Non-interactive or unavailable */
+        readonly disabled: {
+            readonly prominence: 1;
+            readonly usage: readonly ["Disabled controls", "Inactive states", "Read-only fields"];
+            readonly minContrast: 2.5;
+        };
+    };
+    /** Typography scale and weights */
+    readonly typography: {
+        readonly display: {
+            readonly level: 1;
+            readonly scale: {
+                readonly large: {
+                    readonly size: "3rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.1;
+                    readonly tracking: "-0.02em";
+                };
+                readonly medium: {
+                    readonly size: "2.25rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.15;
+                    readonly tracking: "-0.01em";
+                };
+                readonly small: {
+                    readonly size: "1.875rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.2;
+                    readonly tracking: "0";
+                };
+            };
+        };
+        readonly heading: {
+            readonly level: 2;
+            readonly scale: {
+                readonly h1: {
+                    readonly size: "1.875rem";
+                    readonly weight: 700;
+                    readonly lineHeight: 1.25;
+                };
+                readonly h2: {
+                    readonly size: "1.5rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.3;
+                };
+                readonly h3: {
+                    readonly size: "1.25rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.35;
+                };
+                readonly h4: {
+                    readonly size: "1.125rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.4;
+                };
+                readonly h5: {
+                    readonly size: "1rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.45;
+                };
+                readonly h6: {
+                    readonly size: "0.875rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.5;
+                };
+            };
+        };
+        readonly body: {
+            readonly level: 3;
+            readonly scale: {
+                readonly large: {
+                    readonly size: "1.125rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.6;
+                };
+                readonly medium: {
+                    readonly size: "1rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+                readonly small: {
+                    readonly size: "0.875rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.5;
+                };
+            };
+        };
+        readonly label: {
+            readonly level: 4;
+            readonly scale: {
+                readonly large: {
+                    readonly size: "1rem";
+                    readonly weight: 500;
+                    readonly lineHeight: 1.25;
+                };
+                readonly medium: {
+                    readonly size: "0.875rem";
+                    readonly weight: 500;
+                    readonly lineHeight: 1.25;
+                };
+                readonly small: {
+                    readonly size: "0.75rem";
+                    readonly weight: 500;
+                    readonly lineHeight: 1.25;
+                };
+            };
+        };
+        readonly caption: {
+            readonly level: 5;
+            readonly scale: {
+                readonly default: {
+                    readonly size: "0.75rem";
+                    readonly weight: 400;
+                    readonly lineHeight: 1.4;
+                };
+                readonly emphasis: {
+                    readonly size: "0.75rem";
+                    readonly weight: 500;
+                    readonly lineHeight: 1.4;
+                };
+            };
+        };
+        readonly overline: {
+            readonly level: 6;
+            readonly scale: {
+                readonly default: {
+                    readonly size: "0.625rem";
+                    readonly weight: 600;
+                    readonly lineHeight: 1.5;
+                    readonly tracking: "0.1em";
+                    readonly transform: "uppercase";
+                };
+            };
+        };
+    };
+    /** Z-axis elevation system */
+    readonly elevation: {
+        /** Ground level - page background, sunken areas */
+        readonly ground: {
+            readonly level: 0;
+            readonly zIndex: 0;
+            readonly shadow: "none";
+            readonly description: "Page backgrounds, wells, sunken inputs";
+        };
+        /** Resting - default content surfaces */
+        readonly resting: {
+            readonly level: 1;
+            readonly zIndex: 1;
+            readonly shadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+            readonly description: "Cards, panels at rest";
+        };
+        /** Raised - interactive/hover states */
+        readonly raised: {
+            readonly level: 2;
+            readonly zIndex: 10;
+            readonly shadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+            readonly description: "Hovered cards, active buttons";
+        };
+        /** Floating - dropdowns, menus */
+        readonly floating: {
+            readonly level: 3;
+            readonly zIndex: 1000;
+            readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+            readonly description: "Dropdown menus, popovers";
+        };
+        /** Sticky - headers, navigation */
+        readonly sticky: {
+            readonly level: 4;
+            readonly zIndex: 1020;
+            readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+            readonly description: "Sticky headers, fixed navigation";
+        };
+        /** Overlay - backdrop for modals */
+        readonly overlay: {
+            readonly level: 5;
+            readonly zIndex: 1040;
+            readonly shadow: "none";
+            readonly description: "Modal/dialog backdrops";
+        };
+        /** Dialog - modals, alerts */
+        readonly dialog: {
+            readonly level: 6;
+            readonly zIndex: 1050;
+            readonly shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+            readonly description: "Modal dialogs, alerts";
+        };
+        /** Popover - tooltips, notifications */
+        readonly popover: {
+            readonly level: 7;
+            readonly zIndex: 1060;
+            readonly shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+            readonly description: "Popovers, floating panels";
+        };
+        /** Tooltip - highest priority overlays */
+        readonly tooltip: {
+            readonly level: 8;
+            readonly zIndex: 1070;
+            readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+            readonly description: "Tooltips, critical notifications";
+        };
+    };
+    /** Size scaling system */
+    readonly scale: {
+        /** Scale ratio for size progression */
+        readonly ratio: 1.25;
+        /** Size scale multipliers */
+        readonly sizes: {
+            readonly '3xs': 0.512;
+            readonly '2xs': 0.64;
+            readonly xs: 0.8;
+            readonly sm: 1;
+            readonly md: 1.25;
+            readonly lg: 1.563;
+            readonly xl: 1.953;
+            readonly '2xl': 2.441;
+            readonly '3xl': 3.052;
+        };
+        /** Icon sizes following the scale */
+        readonly icons: {
+            readonly xs: 12;
+            readonly sm: 16;
+            readonly md: 20;
+            readonly lg: 24;
+            readonly xl: 32;
+            readonly '2xl': 40;
+        };
+        /** Touch target minimums (accessibility) */
+        readonly touchTargets: {
+            readonly minimum: 44;
+            readonly comfortable: 48;
+            readonly spacious: 56;
+        };
+    };
+    /** Contrast levels */
+    readonly contrast: {
+        /** High contrast - primary actions, critical info */
+        readonly high: {
+            readonly foreground: string;
+            readonly background: string;
+            readonly ratio: 12.5;
+        };
+        /** Medium contrast - body content */
+        readonly medium: {
+            readonly foreground: string;
+            readonly background: string;
+            readonly ratio: 7.5;
+        };
+        /** Low contrast - secondary/muted content */
+        readonly low: {
+            readonly foreground: string;
+            readonly background: string;
+            readonly ratio: 4.5;
+        };
+        /** Subtle - disabled/decorative */
+        readonly subtle: {
+            readonly foreground: string;
+            readonly background: string;
+            readonly ratio: 3;
+        };
+    };
+    /** Interactive states */
+    readonly interactive: {
+        /** Default resting state */
+        readonly default: {
+            readonly opacity: 1;
+            readonly transform: "none";
+            readonly transition: "all 150ms ease-out";
+        };
+        /** Mouse hovering over element */
+        readonly hover: {
+            readonly opacity: 1;
+            readonly transform: "translateY(-1px)";
+            readonly transition: "all 150ms ease-out";
+        };
+        /** Element being pressed */
+        readonly active: {
+            readonly opacity: 0.9;
+            readonly transform: "translateY(0) scale(0.98)";
+            readonly transition: "all 50ms ease-out";
+        };
+        /** Keyboard focused */
+        readonly focus: {
+            readonly outline: `2px solid ${string}`;
+            readonly outlineOffset: "2px";
+            readonly transition: "outline-offset 100ms ease-out";
+        };
+        /** Element is disabled */
+        readonly disabled: {
+            readonly opacity: 0.5;
+            readonly cursor: "not-allowed";
+            readonly pointerEvents: "none";
+        };
+    };
+    /** Spacing rhythm */
+    readonly spacing: {
+        /** Micro spacing - between related elements */
+        readonly micro: {
+            readonly 1: 4;
+            readonly 2: 8;
+        };
+        /** Component spacing - within components */
+        readonly component: {
+            readonly 3: 12;
+            readonly 4: 16;
+            readonly 5: 20;
+        };
+        /** Section spacing - between sections */
+        readonly section: {
+            readonly 6: 24;
+            readonly 8: 32;
+            readonly 10: 40;
+        };
+        /** Layout spacing - page-level */
+        readonly layout: {
+            readonly 12: 48;
+            readonly 16: 64;
+            readonly 24: 96;
+            readonly 32: 128;
+        };
+    };
+};
+export type TrinityHierarchy = typeof hierarchy;
+export declare const tokens: {
+    base: {
+        colors: {
+            navy: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            purple: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            indigo: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                electric: string;
+            };
+            coral: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            azure: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            gray: {
+                0: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        spacing: {
+            0: number;
+            0.5: number;
+            1: number;
+            1.5: number;
+            2: number;
+            2.5: number;
+            3: number;
+            4: number;
+            5: number;
+            6: number;
+            7: number;
+            8: number;
+            9: number;
+            10: number;
+            12: number;
+            14: number;
+            16: number;
+            20: number;
+            24: number;
+            32: number;
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+            '6xl': string;
+        };
+        fontWeight: {
+            light: number;
+            regular: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+            extrabold: number;
+        };
+        lineHeight: {
+            none: number;
+            tight: number;
+            snug: number;
+            normal: number;
+            relaxed: number;
+            loose: number;
+        };
+        letterSpacing: {
+            tighter: string;
+            tight: string;
+            normal: string;
+            wide: string;
+            wider: string;
+            widest: string;
+        };
+        /**
+         * Border Radius Scale
+         *
+         * Designed for consistent nesting using: Outer = Inner + Padding
+         *
+         * Common nesting patterns:
+         * - Button (sm:6px) inside Card (md:8px) with 8px padding: 6 + 8 = 12 (use lg for container)
+         * - Card (md:8px) inside Modal (lg:12px) with 16px padding: 8 + 16 = 24 (use 3xl for modal)
+         * - Input (sm:6px) inside Panel (md:8px) with 8px padding: 6 + 8 = 12 (use lg for panel)
+         *
+         * Usage by element type:
+         * - xs (4px): Small badges, icon containers, status dots with corners
+         * - sm (6px): Buttons, inputs, chips, tags, small interactive elements
+         * - md (8px): Cards, list items, small panels, menu items
+         * - lg (12px): Large cards, dialogs, dropdown menus, panels
+         * - xl (16px): Modals, popovers, large containers
+         * - 2xl (20px): Very large modals with nested content
+         * - 3xl (24px): Maximum nesting scenarios
+         * - full (9999px): Pills, avatars, fully rounded elements
+         */
+        borderRadius: {
+            none: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+            '3xl': number;
+            full: number;
+        };
+        borderWidth: {
+            0: number;
+            1: number;
+            2: number;
+            4: number;
+            8: number;
+        };
+        shadows: {
+            none: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            inner: string;
+        };
+        zIndex: {
+            auto: string;
+            0: number;
+            10: number;
+            20: number;
+            30: number;
+            40: number;
+            50: number;
+            dropdown: number;
+            sticky: number;
+            fixed: number;
+            modalBackdrop: number;
+            modal: number;
+            popover: number;
+            tooltip: number;
+        };
+        duration: {
+            fastest: string;
+            faster: string;
+            fast: string;
+            normal: string;
+            slow: string;
+            slower: string;
+            slowest: string;
+        };
+        easing: {
+            linear: string;
+            in: string;
+            out: string;
+            inOut: string;
+            smooth: string;
+            bounce: string;
+            elastic: string;
+        };
+        opacity: {
+            0: number;
+            5: number;
+            10: number;
+            20: number;
+            25: number;
+            30: number;
+            40: number;
+            50: number;
+            60: number;
+            70: number;
+            75: number;
+            80: number;
+            90: number;
+            95: number;
+            100: number;
+        };
+        breakpoints: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+    };
+    semantic: {
+        colors: {
+            brand: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                accent: string;
+            };
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                disabled: string;
+                inverse: string;
+                brand: string;
+                link: string;
+                linkHover: string;
+                error: string;
+                success: string;
+                warning: string;
+            };
+            background: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                inverse: string;
+                brand: string;
+                brandSubtle: string;
+                accent: string;
+                accentSubtle: string;
+            };
+            surface: {
+                elevated: string;
+                sunken: string;
+                overlay: string;
+                success: string;
+                error: string;
+                warning: string;
+                info: string;
+            };
+            border: {
+                default: string;
+                subtle: string;
+                strong: string;
+                focus: string;
+                error: string;
+                success: string;
+            };
+            interactive: {
+                default: string;
+                hover: string;
+                active: string;
+                disabled: string;
+                focus: string;
+            };
+            focus: {
+                ring: string;
+                ringOffset: string;
+            };
+            selection: {
+                background: string;
+                text: string;
+            };
+            status: {
+                error: {
+                    text: string;
+                    background: string;
+                    border: string;
+                };
+                warning: {
+                    text: string;
+                    background: string;
+                    border: string;
+                };
+                success: {
+                    text: string;
+                    background: string;
+                    border: string;
+                };
+                info: {
+                    text: string;
+                    background: string;
+                    border: string;
+                };
+            };
+            /**
+             * Status Indicator Colors
+             * Semantic colors for StatusIndicator components (dots, badges, chips)
+             * These are intentionally distinct from status.* which are for alerts/toasts
+             * @intentional-color - Status indicators require specific colors for visual distinction
+             */
+            indicator: {
+                error: {
+                    fg: string;
+                    bg: string;
+                };
+                critical: {
+                    fg: string;
+                    bg: string;
+                };
+                failed: {
+                    fg: string;
+                    bg: string;
+                };
+                rejected: {
+                    fg: string;
+                    bg: string;
+                };
+                warning: {
+                    fg: string;
+                    bg: string;
+                    outline: string;
+                };
+                caution: {
+                    fg: string;
+                    bg: string;
+                    outline: string;
+                };
+                pending: {
+                    fg: string;
+                    bg: string;
+                    outline: string;
+                };
+                inProgress: {
+                    fg: string;
+                    bg: string;
+                };
+                running: {
+                    fg: string;
+                    bg: string;
+                };
+                success: {
+                    fg: string;
+                    bg: string;
+                };
+                complete: {
+                    fg: string;
+                    bg: string;
+                };
+                approved: {
+                    fg: string;
+                    bg: string;
+                };
+                active: {
+                    fg: string;
+                    bg: string;
+                };
+                enabled: {
+                    fg: string;
+                    bg: string;
+                };
+                info: {
+                    fg: string;
+                    bg: string;
+                };
+                new: {
+                    fg: string;
+                    bg: string;
+                };
+                updated: {
+                    fg: string;
+                    bg: string;
+                };
+                neutral: {
+                    fg: string;
+                    bg: string;
+                };
+                draft: {
+                    fg: string;
+                    bg: string;
+                };
+                inactive: {
+                    fg: string;
+                    bg: string;
+                };
+                disabled: {
+                    fg: string;
+                    bg: string;
+                };
+                cancelled: {
+                    fg: string;
+                    bg: string;
+                };
+                unknown: {
+                    fg: string;
+                    bg: string;
+                };
+                beta: {
+                    fg: string;
+                    bg: string;
+                };
+                experimental: {
+                    fg: string;
+                    bg: string;
+                };
+            };
+            avatar: {
+                backgrounds: string[];
+                online: string;
+                offline: string;
+                busy: string;
+                away: string;
+            };
+            gradients: {
+                primary: string;
+                secondary: string;
+                accent: string;
+                avatarPrimary: string;
+                avatarWarm: string;
+                avatarCool: string;
+                darkOverlay: string;
+            };
+        };
+        typography: {
+            display: {
+                large: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                    letterSpacing: string;
+                };
+            };
+            heading: {
+                h1: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                h2: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                h3: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                h4: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                h5: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                h6: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+            };
+            body: {
+                large: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                medium: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                small: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+            };
+            label: {
+                large: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                medium: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+                small: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+            };
+            micro: {
+                /** 10px - Absolute minimum for brief status text */
+                xs: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                    letterSpacing: string;
+                };
+                /** 11px - Primary micro size for badges, counters */
+                sm: {
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                    letterSpacing: string;
+                };
+            };
+            dense: {
+                /** Badge counts, status dots - 10px */
+                badge: string;
+                /** Metadata, timestamps, dense tables - 12px */
+                text: string;
+            };
+            data: {
+                /** Monospace styling for numeric values in tables */
+                numeric: {
+                    fontFamily: string;
+                    fontWeight: number;
+                    fontFeatureSettings: string;
+                };
+                /** Code/technical content styling */
+                code: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: number;
+                };
+            };
+        };
+        spacing: {
+            component: {
+                paddingXs: number;
+                paddingSm: number;
+                paddingMd: number;
+                paddingLg: number;
+                paddingXl: number;
+                gapXs: number;
+                gapSm: number;
+                gapMd: number;
+                gapLg: number;
+            };
+            layout: {
+                pagePadding: number;
+                sectionGap: number;
+                containerMaxWidth: number;
+                headerHeight: number;
+                sidebarWidthExpanded: number;
+                sidebarWidthCollapsed: number;
+                aiPanelWidth: number;
+                gutter: number;
+                contentPadding: number;
+            };
+        };
+        borders: {
+            /**
+             * Semantic border radius assignments
+             * Based on component size and nesting requirements:
+             * - Outer radius = Inner radius + Padding
+             */
+            radius: {
+                /** Buttons use full pill shape */
+                button: number;
+                /** Inputs use sm (6px) for 32-40px height elements */
+                input: number;
+                /** Cards use md (8px) for subtle rounding */
+                card: number;
+                /** Modals use lg (12px) - allows nested cards with md */
+                modal: number;
+                /** Large modals use xl (16px) for complex nested content */
+                modalLarge: number;
+                /** Badges use sm (6px) for subtle pill */
+                badge: number;
+                /** Avatars use full for circular shape */
+                avatar: number;
+                /** Chips/tags use sm (6px) */
+                chip: number;
+                /** Menu items use sm (6px) */
+                menuItem: number;
+                /** Dropdown/popover menus use lg (12px) - corrected to match actual usage */
+                menu: number;
+                /** Tooltips use md (8px) */
+                tooltip: number;
+                /** Small icon containers use xs (4px) */
+                iconContainer: number;
+                /** Sharp edges - 0px */
+                none: number;
+                /** Minimal softening - 4px */
+                subtle: number;
+                /** Noticeable curves - 6px */
+                soft: number;
+                /** Prominent curves - 8px */
+                rounded: number;
+                /** Maximum curvature - 9999px */
+                pill: number;
+                /** Perfect circle - 50% */
+                circle: string;
+                /** Skeleton loaders - 4px */
+                skeleton: number;
+                /** Table cells - 0px for data density */
+                tableCell: number;
+            };
+            /**
+             * Pre-formatted px strings for MUI sx prop
+             * Use these when MUI would interpret numbers as spacing multipliers
+             */
+            radiusPx: {
+                none: string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                '2xl': string;
+                '3xl': string;
+                full: string;
+            };
+            width: {
+                default: number;
+                focus: number;
+                thick: number;
+            };
+        };
+        shadows: {
+            card: string;
+            dropdown: string;
+            modal: string;
+            button: string;
+            input: string;
+            inputFocus: string;
+        };
+        motion: {
+            duration: {
+                instant: string;
+                fast: string;
+                normal: string;
+                slow: string;
+            };
+            easing: {
+                default: string;
+                enter: string;
+                exit: string;
+            };
+        };
+        effects: {
+            /**
+             * Overlay effects for interaction states and backdrops
+             */
+            overlay: {
+                /** Modal/drawer backdrop - 50% black */
+                scrim: string;
+                /** Standard hover - 8% black */
+                hover: string;
+                /** Subtle hover for dense UI - 4% black */
+                hoverSubtle: string;
+                /** Pressed/active - 12% black */
+                pressed: string;
+                /** Selected row/item - 8% black */
+                selected: string;
+                /** Disabled overlay - 38% black */
+                disabled: string;
+            };
+            /**
+             * White text/icon opacity for dark backgrounds
+             * Based on Material Design text emphasis levels
+             */
+            onDark: {
+                /** High emphasis - 87% white */
+                primary: string;
+                /** Medium emphasis - 70% white */
+                secondary: string;
+                /** Low emphasis - 50% white */
+                tertiary: string;
+                /** Borders/dividers - 12% white */
+                subtle: string;
+                /** Background overlays on dark surfaces - 10% white */
+                tint: string;
+                /** Visible dividers on dark backgrounds - 24% white */
+                divider: string;
+                /** High-visibility text/icons on dark - 80% white */
+                emphasis: string;
+                /** Maximum contrast - avoids pure white - 95% white */
+                contrast: string;
+            };
+            /**
+             * Shadow effects for elevation hierarchy
+             * Replaces hardcoded rgba shadows
+             */
+            shadow: {
+                /** Resting card elevation */
+                surface: string;
+                /** Hovered/focused elevation */
+                raised: string;
+                /** Dropdown/popover/nav menus */
+                floating: string;
+                /** Modal dialogs */
+                dialog: string;
+                /** Pressed/inset appearance */
+                inset: string;
+            };
+            /**
+             * Focus ring effects for accessibility
+             */
+            focus: {
+                /** Standard focus ring - purple brand */
+                ring: string;
+                /** Focus on dark backgrounds */
+                ringOnDark: string;
+                /** Emphasized focus for primary actions */
+                glow: string;
+            };
+            /**
+             * State indicator effects (subtle fills and emphasis borders)
+             */
+            state: {
+                /** Error background - 5% red */
+                errorSubtle: string;
+                /** Error border - 30% red */
+                errorEmphasis: string;
+                /** Warning background - 10% yellow */
+                warningSubtle: string;
+                /** Warning border - 40% yellow */
+                warningEmphasis: string;
+                /** Success background - 5% green */
+                successSubtle: string;
+                /** Success border - 30% green */
+                successEmphasis: string;
+                /** Info background - 5% blue */
+                infoSubtle: string;
+                /** Info border - 30% blue */
+                infoEmphasis: string;
+            };
+        };
+        iconSize: {
+            /** Within text flow - 14px */
+            inline: number;
+            /** Standard controls (buttons, inputs) - 16px */
+            control: number;
+            /** Navigation and toolbar - 20px */
+            navigation: number;
+            /** Visual anchor (empty states) - 24px */
+            prominent: number;
+            /** Hero sections - 28px */
+            hero: number;
+            /** Maximum impact - 36px */
+            display: number;
+        };
+        inline: {
+            /** Minimum internal space - 4px */
+            tight: number;
+            /** Dense but readable - 8px */
+            compact: number;
+            /** Balanced density - 12px */
+            snug: number;
+            /** Standard breathing room - 16px */
+            comfortable: number;
+            /** Generous without excess - 20px */
+            relaxed: number;
+            /** Maximum breathing room - 24px */
+            spacious: number;
+        };
+        stack: {
+            /** Minimum vertical space - 4px */
+            tight: number;
+            /** Dense but readable - 8px */
+            compact: number;
+            /** Balanced density - 12px */
+            snug: number;
+            /** Standard vertical space - 16px */
+            comfortable: number;
+            /** Generous without excess - 20px */
+            relaxed: number;
+            /** Maximum vertical space - 24px */
+            spacious: number;
+            /** @deprecated Use tight instead */
+            related: number;
+            /** @deprecated Use compact instead */
+            grouped: number;
+            /** @deprecated Use comfortable instead */
+            separated: number;
+            /** @deprecated Use spacious instead */
+            distinct: number;
+        };
+        density: {
+            /** Maximum info density */
+            compact: {
+                rowHeight: number;
+                cellPadding: number;
+                gap: number;
+            };
+            /** Balanced readability/density */
+            standard: {
+                rowHeight: number;
+                cellPadding: number;
+                gap: number;
+            };
+            /** Prioritize readability */
+            comfortable: {
+                rowHeight: number;
+                cellPadding: number;
+                gap: number;
+            };
+        };
+    };
+    component: {
+        button: {
+            height: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+            padding: {
+                small: {
+                    x: number;
+                    y: number;
+                };
+                medium: {
+                    x: number;
+                    y: number;
+                };
+                large: {
+                    x: number;
+                    y: number;
+                };
+            };
+            fontSize: {
+                small: string;
+                medium: string;
+                large: string;
+            };
+            borderRadius: number;
+            primary: {
+                background: string;
+                backgroundHover: string;
+                text: string;
+            };
+            secondary: {
+                background: string;
+                backgroundHover: string;
+                text: string;
+            };
+            outlined: {
+                background: string;
+                backgroundHover: string;
+                border: string;
+                text: string;
+                textHover: string;
+            };
+        };
+        input: {
+            height: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+            padding: {
+                small: {
+                    x: number;
+                    y: number;
+                };
+                medium: {
+                    x: number;
+                    y: number;
+                };
+                large: {
+                    x: number;
+                    y: number;
+                };
+            };
+            fontSize: {
+                small: string;
+                medium: string;
+                large: string;
+            };
+            borderRadius: number;
+            borderColor: {
+                default: string;
+                hover: string;
+                focus: string;
+                error: string;
+            };
+            background: {
+                default: string;
+                disabled: string;
+            };
+        };
+        card: {
+            padding: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+            borderRadius: number;
+            shadow: string;
+            background: string;
+            border: string;
+        };
+        avatar: {
+            size: {
+                xs: number;
+                sm: number;
+                md: number;
+                lg: number;
+                xl: number;
+                '2xl': number;
+            };
+            borderRadius: number;
+            fontSize: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                '2xl': string;
+            };
+        };
+        badge: {
+            padding: {
+                x: number;
+                y: number;
+            };
+            borderRadius: number;
+            fontSize: string;
+            fontWeight: number;
+        };
+        chip: {
+            height: {
+                small: number;
+                medium: number;
+            };
+            padding: {
+                small: {
+                    x: number;
+                    y: number;
+                };
+                medium: {
+                    x: number;
+                    y: number;
+                };
+            };
+            borderRadius: number;
+            fontSize: {
+                small: string;
+                medium: string;
+            };
+        };
+        tooltip: {
+            padding: {
+                x: number;
+                y: number;
+            };
+            borderRadius: number;
+            fontSize: string;
+            background: string;
+            text: string;
+        };
+        modal: {
+            padding: number;
+            borderRadius: number;
+            shadow: string;
+            backdropOpacity: number;
+            width: {
+                small: number;
+                medium: number;
+                large: number;
+                fullWidth: string;
+            };
+        };
+        switch: {
+            width: {
+                small: number;
+                medium: number;
+            };
+            height: {
+                small: number;
+                medium: number;
+            };
+            thumb: {
+                small: number;
+                medium: number;
+            };
+            track: {
+                off: string;
+                on: string;
+            };
+        };
+        navigation: {
+            header: {
+                height: number;
+                background: string;
+                text: string;
+            };
+            sidebar: {
+                width: number;
+                collapsedWidth: number;
+                background: string;
+            };
+            item: {
+                height: number;
+                padding: {
+                    x: number;
+                    y: number;
+                };
+                borderRadius: number;
+            };
+        };
+    };
+    darkMode: TrinityDarkModeTokens;
+    hierarchy: {
+        /** Attention/importance levels */
+        readonly attention: {
+            /** Most important actions/content - demands immediate attention */
+            readonly primary: {
+                readonly prominence: 5;
+                readonly usage: readonly ["Primary CTAs", "Critical alerts", "Page titles", "Current navigation"];
+                readonly minContrast: 7;
+            };
+            /** Important but not critical - strong visual presence */
+            readonly secondary: {
+                readonly prominence: 4;
+                readonly usage: readonly ["Secondary buttons", "Section headings", "Key information", "Active states"];
+                readonly minContrast: 4.5;
+            };
+            /** Supportive content - visible but not competing */
+            readonly tertiary: {
+                readonly prominence: 3;
+                readonly usage: readonly ["Body text", "Form labels", "Navigation items", "Card content"];
+                readonly minContrast: 4.5;
+            };
+            /** Background/supporting information */
+            readonly muted: {
+                readonly prominence: 2;
+                readonly usage: readonly ["Helper text", "Timestamps", "Metadata", "Placeholders"];
+                readonly minContrast: 3;
+            };
+            /** Non-interactive or unavailable */
+            readonly disabled: {
+                readonly prominence: 1;
+                readonly usage: readonly ["Disabled controls", "Inactive states", "Read-only fields"];
+                readonly minContrast: 2.5;
+            };
+        };
+        /** Typography scale and weights */
+        readonly typography: {
+            readonly display: {
+                readonly level: 1;
+                readonly scale: {
+                    readonly large: {
+                        readonly size: "3rem";
+                        readonly weight: 700;
+                        readonly lineHeight: 1.1;
+                        readonly tracking: "-0.02em";
+                    };
+                    readonly medium: {
+                        readonly size: "2.25rem";
+                        readonly weight: 700;
+                        readonly lineHeight: 1.15;
+                        readonly tracking: "-0.01em";
+                    };
+                    readonly small: {
+                        readonly size: "1.875rem";
+                        readonly weight: 600;
+                        readonly lineHeight: 1.2;
+                        readonly tracking: "0";
+                    };
+                };
+            };
+            readonly heading: {
+                readonly level: 2;
+                readonly scale: {
+                    readonly h1: {
+                        readonly size: "1.875rem";
+                        readonly weight: 700;
+                        readonly lineHeight: 1.25;
+                    };
+                    readonly h2: {
+                        readonly size: "1.5rem";
+                        readonly weight: 600;
+                        readonly lineHeight: 1.3;
+                    };
+                    readonly h3: {
+                        readonly size: "1.25rem";
+                        readonly weight: 600;
+                        readonly lineHeight: 1.35;
+                    };
+                    readonly h4: {
+                        readonly size: "1.125rem";
+                        readonly weight: 600;
+                        readonly lineHeight: 1.4;
+                    };
+                    readonly h5: {
+                        readonly size: "1rem";
+                        readonly weight: 600;
+                        readonly lineHeight: 1.45;
+                    };
+                    readonly h6: {
+                        readonly size: "0.875rem";
+                        readonly weight: 600;
+                        readonly lineHeight: 1.5;
+                    };
+                };
+            };
+            readonly body: {
+                readonly level: 3;
+                readonly scale: {
+                    readonly large: {
+                        readonly size: "1.125rem";
+                        readonly weight: 400;
+                        readonly lineHeight: 1.6;
+                    };
+                    readonly medium: {
+                        readonly size: "1rem";
+                        readonly weight: 400;
+                        readonly lineHeight: 1.5;
+                    };
+                    readonly small: {
+                        readonly size: "0.875rem";
+                        readonly weight: 400;
+                        readonly lineHeight: 1.5;
+                    };
+                };
+            };
+            readonly label: {
+                readonly level: 4;
+                readonly scale: {
+                    readonly large: {
+                        readonly size: "1rem";
+                        readonly weight: 500;
+                        readonly lineHeight: 1.25;
+                    };
+                    readonly medium: {
+                        readonly size: "0.875rem";
+                        readonly weight: 500;
+                        readonly lineHeight: 1.25;
+                    };
+                    readonly small: {
+                        readonly size: "0.75rem";
+                        readonly weight: 500;
+                        readonly lineHeight: 1.25;
+                    };
+                };
+            };
+            readonly caption: {
+                readonly level: 5;
+                readonly scale: {
+                    readonly default: {
+                        readonly size: "0.75rem";
+                        readonly weight: 400;
+                        readonly lineHeight: 1.4;
+                    };
+                    readonly emphasis: {
+                        readonly size: "0.75rem";
+                        readonly weight: 500;
+                        readonly lineHeight: 1.4;
+                    };
+                };
+            };
+            readonly overline: {
+                readonly level: 6;
+                readonly scale: {
+                    readonly default: {
+                        readonly size: "0.625rem";
+                        readonly weight: 600;
+                        readonly lineHeight: 1.5;
+                        readonly tracking: "0.1em";
+                        readonly transform: "uppercase";
+                    };
+                };
+            };
+        };
+        /** Z-axis elevation system */
+        readonly elevation: {
+            /** Ground level - page background, sunken areas */
+            readonly ground: {
+                readonly level: 0;
+                readonly zIndex: 0;
+                readonly shadow: "none";
+                readonly description: "Page backgrounds, wells, sunken inputs";
+            };
+            /** Resting - default content surfaces */
+            readonly resting: {
+                readonly level: 1;
+                readonly zIndex: 1;
+                readonly shadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+                readonly description: "Cards, panels at rest";
+            };
+            /** Raised - interactive/hover states */
+            readonly raised: {
+                readonly level: 2;
+                readonly zIndex: 10;
+                readonly shadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+                readonly description: "Hovered cards, active buttons";
+            };
+            /** Floating - dropdowns, menus */
+            readonly floating: {
+                readonly level: 3;
+                readonly zIndex: 1000;
+                readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+                readonly description: "Dropdown menus, popovers";
+            };
+            /** Sticky - headers, navigation */
+            readonly sticky: {
+                readonly level: 4;
+                readonly zIndex: 1020;
+                readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+                readonly description: "Sticky headers, fixed navigation";
+            };
+            /** Overlay - backdrop for modals */
+            readonly overlay: {
+                readonly level: 5;
+                readonly zIndex: 1040;
+                readonly shadow: "none";
+                readonly description: "Modal/dialog backdrops";
+            };
+            /** Dialog - modals, alerts */
+            readonly dialog: {
+                readonly level: 6;
+                readonly zIndex: 1050;
+                readonly shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+                readonly description: "Modal dialogs, alerts";
+            };
+            /** Popover - tooltips, notifications */
+            readonly popover: {
+                readonly level: 7;
+                readonly zIndex: 1060;
+                readonly shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+                readonly description: "Popovers, floating panels";
+            };
+            /** Tooltip - highest priority overlays */
+            readonly tooltip: {
+                readonly level: 8;
+                readonly zIndex: 1070;
+                readonly shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+                readonly description: "Tooltips, critical notifications";
+            };
+        };
+        /** Size scaling system */
+        readonly scale: {
+            /** Scale ratio for size progression */
+            readonly ratio: 1.25;
+            /** Size scale multipliers */
+            readonly sizes: {
+                readonly '3xs': 0.512;
+                readonly '2xs': 0.64;
+                readonly xs: 0.8;
+                readonly sm: 1;
+                readonly md: 1.25;
+                readonly lg: 1.563;
+                readonly xl: 1.953;
+                readonly '2xl': 2.441;
+                readonly '3xl': 3.052;
+            };
+            /** Icon sizes following the scale */
+            readonly icons: {
+                readonly xs: 12;
+                readonly sm: 16;
+                readonly md: 20;
+                readonly lg: 24;
+                readonly xl: 32;
+                readonly '2xl': 40;
+            };
+            /** Touch target minimums (accessibility) */
+            readonly touchTargets: {
+                readonly minimum: 44;
+                readonly comfortable: 48;
+                readonly spacious: 56;
+            };
+        };
+        /** Contrast levels */
+        readonly contrast: {
+            /** High contrast - primary actions, critical info */
+            readonly high: {
+                readonly foreground: string;
+                readonly background: string;
+                readonly ratio: 12.5;
+            };
+            /** Medium contrast - body content */
+            readonly medium: {
+                readonly foreground: string;
+                readonly background: string;
+                readonly ratio: 7.5;
+            };
+            /** Low contrast - secondary/muted content */
+            readonly low: {
+                readonly foreground: string;
+                readonly background: string;
+                readonly ratio: 4.5;
+            };
+            /** Subtle - disabled/decorative */
+            readonly subtle: {
+                readonly foreground: string;
+                readonly background: string;
+                readonly ratio: 3;
+            };
+        };
+        /** Interactive states */
+        readonly interactive: {
+            /** Default resting state */
+            readonly default: {
+                readonly opacity: 1;
+                readonly transform: "none";
+                readonly transition: "all 150ms ease-out";
+            };
+            /** Mouse hovering over element */
+            readonly hover: {
+                readonly opacity: 1;
+                readonly transform: "translateY(-1px)";
+                readonly transition: "all 150ms ease-out";
+            };
+            /** Element being pressed */
+            readonly active: {
+                readonly opacity: 0.9;
+                readonly transform: "translateY(0) scale(0.98)";
+                readonly transition: "all 50ms ease-out";
+            };
+            /** Keyboard focused */
+            readonly focus: {
+                readonly outline: `2px solid ${string}`;
+                readonly outlineOffset: "2px";
+                readonly transition: "outline-offset 100ms ease-out";
+            };
+            /** Element is disabled */
+            readonly disabled: {
+                readonly opacity: 0.5;
+                readonly cursor: "not-allowed";
+                readonly pointerEvents: "none";
+            };
+        };
+        /** Spacing rhythm */
+        readonly spacing: {
+            /** Micro spacing - between related elements */
+            readonly micro: {
+                readonly 1: 4;
+                readonly 2: 8;
+            };
+            /** Component spacing - within components */
+            readonly component: {
+                readonly 3: 12;
+                readonly 4: 16;
+                readonly 5: 20;
+            };
+            /** Section spacing - between sections */
+            readonly section: {
+                readonly 6: 24;
+                readonly 8: 32;
+                readonly 10: 40;
+            };
+            /** Layout spacing - page-level */
+            readonly layout: {
+                readonly 12: 48;
+                readonly 16: 64;
+                readonly 24: 96;
+                readonly 32: 128;
+            };
+        };
+    };
+};
+export default tokens;
+//# sourceMappingURL=tokens.d.ts.map