import { a as g, b as m, c as h } from "./icon-utils-BIbzQICs.js";
const y = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif', r = {
  heading1: {
    fontSize: "36px",
    lineHeight: "40px",
    fontWeight: 600,
    letterSpacing: "-0.1px",
    className: "ai-heading1",
    meta: {
      description: "Primary heading for page titles and hero sections",
      usage: "Use for the main heading of a page or section. Should be used once per page.",
      a11y: "Should map to semantic <h1> elements for proper document structure"
    }
  },
  heading2: {
    fontSize: "24px",
    lineHeight: "28px",
    fontWeight: 600,
    letterSpacing: "-0.25px",
    className: "ai-heading2",
    meta: {
      description: "Secondary heading for major sections",
      usage: "Use for section headings and subsections within a page",
      a11y: "Should map to semantic <h2> elements"
    }
  },
  heading3: {
    fontSize: "18px",
    lineHeight: "26px",
    fontWeight: 600,
    letterSpacing: "-0.45px",
    className: "ai-heading3",
    meta: {
      description: "Tertiary heading for subsections",
      usage: "Use for subsection headings and card titles",
      a11y: "Should map to semantic <h3> elements"
    }
  },
  body: {
    fontSize: "16px",
    lineHeight: "26px",
    fontWeight: 400,
    letterSpacing: "-0.4px",
    className: "ai-body",
    meta: {
      description: "Default body text for main content",
      usage: "Use for paragraphs, descriptions, and general content",
      a11y: "Standard reading size optimized for readability"
    }
  },
  bodyEmph: {
    fontSize: "16px",
    lineHeight: "26px",
    fontWeight: 600,
    letterSpacing: "-0.4px",
    className: "ai-body-emph",
    meta: {
      description: "Emphasized body text",
      usage: "Use to emphasize key points within body text",
      a11y: "Use <strong> or <b> for semantic emphasis"
    }
  },
  bodySmall: {
    fontSize: "14px",
    lineHeight: "18px",
    fontWeight: 400,
    letterSpacing: "-0.3px",
    className: "ai-body-small",
    meta: {
      description: "Smaller body text for secondary information",
      usage: "Use for supporting text, metadata, and less prominent content",
      a11y: "Ensure text remains readable at this size"
    }
  },
  bodySmallEmph: {
    fontSize: "14px",
    lineHeight: "18px",
    fontWeight: 600,
    letterSpacing: "-0.3px",
    className: "ai-body-small-emph",
    meta: {
      description: "Emphasized smaller body text",
      usage: "Use for emphasized secondary information",
      a11y: "Use <strong> or <b> for semantic emphasis"
    }
  },
  caption: {
    fontSize: "12px",
    lineHeight: "16px",
    fontWeight: 400,
    letterSpacing: "-0.1px",
    className: "ai-caption",
    meta: {
      description: "Small text for captions and labels",
      usage: "Use for image captions, input labels, and fine print",
      a11y: "Minimum recommended size for readability"
    }
  },
  captionEmph: {
    fontSize: "12px",
    lineHeight: "16px",
    fontWeight: 600,
    letterSpacing: "-0.1px",
    className: "ai-caption-emph",
    meta: {
      description: "Emphasized caption text",
      usage: "Use for emphasized labels and important captions",
      a11y: "Ensure adequate contrast for accessibility"
    }
  },
  button: {
    fontSize: "15px",
    lineHeight: "24px",
    fontWeight: 500,
    letterSpacing: "-0.24px",
    className: "ai-button",
    meta: {
      description: "Button and interactive element text",
      usage: "Use for buttons, links, and interactive controls",
      a11y: "Size optimized for touch targets (min 44px height)"
    }
  },
  badge: {
    fontSize: "14px",
    lineHeight: "18px",
    fontWeight: 600,
    letterSpacing: "0px",
    className: "ai-badge",
    meta: {
      description: "Badge and tag text",
      usage: "Use for status badges, tags, and chips",
      a11y: "Ensure badges have proper semantic meaning"
    }
  }
}, p = {
  0: "0px",
  1: "2px",
  2: "4px",
  4: "8px",
  6: "12px",
  8: "16px",
  10: "20px",
  12: "24px",
  16: "32px",
  20: "40px",
  24: "48px",
  32: "64px",
  64: "128px"
}, t = {
  blue: "#0285FF",
  red: "#E02E2A",
  orange: "#E25507",
  green: "#008635"
}, i = {
  blue: "#0285FF",
  red: "#FF8583",
  orange: "#FF9E6C",
  green: "#40C977"
}, l = {
  light: {
    background: {
      primary: "#FFFFFF",
      secondary: "#E8E8E8",
      tertiary: "#F3F3F3"
    },
    text: {
      primary: "#0D0D0D",
      secondary: "#5D5D5D",
      tertiary: "#8F8F8F",
      inverted: "#1B1B1F"
    },
    icon: {
      primary: "#0D0D0D",
      secondary: "#5D5D5D",
      tertiary: "#8F8F8F",
      inverted: "#1B1B1F"
    },
    accent: t,
    // Semantic brand color aliases derived from accent colors
    brand: {
      primary: t.blue,
      success: t.green,
      warning: t.orange,
      error: t.red,
      info: t.blue
    },
    outline: "#79747E",
    border: {
      light: "rgba(13, 13, 13, 0.05)",
      default: "rgba(13, 13, 13, 0.10)",
      heavy: "rgba(13, 13, 13, 0.15)"
    },
    state: {
      hover: {
        background: "rgba(13, 13, 13, 0.08)",
        opacity: 0.9
      },
      active: {
        opacity: 1,
        scale: 0.98
      },
      disabled: {
        opacity: 0.4
      },
      focus: {
        outline: "#0285FF",
        offset: "2px"
      }
    }
  },
  dark: {
    background: {
      primary: "#212121",
      secondary: "#303030",
      tertiary: "#414141"
    },
    text: {
      primary: "#FFFFFF",
      secondary: "#CDCDCD",
      tertiary: "#AFAFAF",
      inverted: "#FFFFFF"
    },
    icon: {
      primary: "#FFFFFF",
      secondary: "#CDCDCD",
      tertiary: "#AFAFAF",
      inverted: "#FFFFFF"
    },
    accent: i,
    // Semantic brand color aliases derived from accent colors
    brand: {
      primary: i.blue,
      success: i.green,
      warning: i.orange,
      error: i.red,
      info: i.blue
    },
    outline: "#938F99",
    border: {
      light: "rgba(255, 255, 255, 0.08)",
      default: "rgba(255, 255, 255, 0.12)",
      heavy: "rgba(255, 255, 255, 0.16)"
    },
    state: {
      hover: {
        background: "rgba(255, 255, 255, 0.08)",
        opacity: 0.9
      },
      active: {
        opacity: 1,
        scale: 0.98
      },
      disabled: {
        opacity: 0.4
      },
      focus: {
        outline: "#0285FF",
        offset: "2px"
      }
    }
  }
}, o = {
  none: "0px",
  sm: "4px",
  md: "8px",
  base: "12px",
  lg: "16px",
  xl: "24px",
  full: "9999px"
}, u = o.xl, f = {
  0: {
    shadow: "none",
    lightOverlay: "rgba(0,0,0,0)",
    darkOverlay: "rgba(255,255,255,0)",
    className: "ai-elevation-0",
    meta: {
      description: "No elevation - flat surface",
      usage: "Use for elements flush with the background"
    }
  },
  1: {
    shadow: "0px 4px 16px rgba(0,0,0,0.05)",
    lightOverlay: "rgba(0,0,0,0)",
    darkOverlay: "rgba(255,255,255,0.05)",
    className: "ai-elevation-1",
    meta: {
      description: "Subtle elevation for cards and containers",
      usage: "Default elevation for cards, panels, and raised surfaces",
      zIndex: "1-100"
    }
  },
  2: {
    shadow: "0px 6px 24px rgba(0,0,0,0.08)",
    lightOverlay: "rgba(0,0,0,0)",
    darkOverlay: "rgba(255,255,255,0.07)",
    className: "ai-elevation-2",
    meta: {
      description: "Medium elevation for interactive elements",
      usage: "Use for hover states, dropdowns, and floating elements",
      zIndex: "100-200"
    }
  },
  3: {
    shadow: "0px 10px 32px rgba(0,0,0,0.10)",
    lightOverlay: "rgba(0,0,0,0)",
    darkOverlay: "rgba(255,255,255,0.08)",
    className: "ai-elevation-3",
    meta: {
      description: "Prominent elevation for modals and popovers",
      usage: "Use for dialogs, tooltips, and important UI elements",
      zIndex: "200-500"
    }
  },
  4: {
    shadow: "0px 12px 40px rgba(0,0,0,0.12)",
    lightOverlay: "rgba(0,0,0,0)",
    darkOverlay: "rgba(255,255,255,0.09)",
    className: "ai-elevation-4",
    meta: {
      description: "High elevation for overlays",
      usage: "Use for modals, drawers, and important overlays",
      zIndex: "500-1000"
    }
  },
  5: {
    shadow: "0px 16px 48px rgba(0,0,0,0.14)",
    lightOverlay: "rgba(0,0,0,0)",
    darkOverlay: "rgba(255,255,255,0.12)",
    className: "ai-elevation-5",
    meta: {
      description: "Maximum elevation for critical overlays",
      usage: "Use for toast notifications, alerts, and critical modals",
      zIndex: "1000+"
    }
  }
}, s = f, c = 1, d = {
  full: 1,
  subtle: 0.7,
  muted: 0.5,
  disabled: 0.3,
  // Interactive state opacities
  hover: 0.9,
  pressed: 1,
  // Overlay and background opacities
  overlay: 0.4,
  scrim: 0.6
}, x = p, v = l, F = o, S = r, z = s, E = d, k = c, D = o.xl, N = {
  /**
   * Get spacing CSS variable
   * @example cssVar.spacing(16) // 'var(--ai-spacing-16)'
   */
  spacing: (e) => `var(--ai-spacing-${e})`,
  /**
   * Get color CSS variable
   * @example cssVar.color('text-primary') // 'var(--ai-color-text-primary)'
   */
  color: (e) => `var(--ai-color-${e})`,
  /**
   * Get radius CSS variable
   * @example cssVar.radius('xl') // 'var(--ai-radius-xl)'
   */
  radius: (e) => `var(--ai-radius-${e})`,
  /**
   * Get typography CSS variables as a style object
   * @example cssVar.typography('heading1') // { fontSize: 'var(--ai-font-size-h1)', ... }
   */
  typography: (e) => {
    const n = {
      heading1: "h1",
      heading2: "h2",
      heading3: "h3",
      body: "body",
      bodyEmph: "body-emph",
      bodySmall: "body-small",
      bodySmallEmph: "body-small-emph",
      caption: "caption",
      captionEmph: "caption-emph",
      button: "button",
      badge: "badge"
    }[e];
    return {
      fontSize: `var(--ai-font-size-${n})`,
      lineHeight: `var(--ai-line-height-${n})`,
      fontWeight: `var(--ai-font-weight-${n})`,
      letterSpacing: `var(--ai-letter-spacing-${n})`
    };
  },
  /**
   * Get elevation CSS variable (shadow)
   * @example cssVar.elevation(2) // 'var(--ai-elevation-2)'
   */
  elevation: (e) => `var(--ai-elevation-${e})`,
  /**
   * Get opacity CSS variable
   * @example cssVar.opacity('subtle') // 'var(--ai-opacity-subtle)'
   */
  opacity: (e) => `var(--ai-opacity-${e})`
};
function U(e) {
  return `var(--${e})`;
}
function $(e, a) {
  return `var(--${e}, ${a})`;
}
function w(e) {
  const a = r[e];
  return {
    fontSize: a.fontSize,
    lineHeight: a.lineHeight,
    fontWeight: a.fontWeight,
    letterSpacing: a.letterSpacing
  };
}
function H(e) {
  return {
    boxShadow: s[e].shadow
  };
}
const W = {
  colors: l,
  typography: r,
  fontStack: y,
  spacing: p,
  radius: o,
  defaultRadius: u,
  elevation: s,
  defaultElevation: c,
  opacity: d,
  icons: h,
  iconMetadata: m,
  iconNames: g
};
export {
  W as a,
  S as b,
  v as c,
  D as d,
  z as e,
  y as f,
  k as g,
  N as h,
  U as i,
  w as j,
  H as k,
  E as o,
  F as r,
  x as s,
  r as t,
  $ as v
};
