export declare const SIDEBAR_WIDTH = 280;
export declare const CHAT_WIDTH = 420;
export declare const themeTemplate = "import customThemeJson from \"@/theme.json\";\n\n// Users can only override the brand palette via theme.json \u2014 semantic tokens\n// (accent, surface, etc.) are derived in GlobalStyles from the brand colors\n// and are not directly overridable.\ntype CustomColors = Omit<\n  Colors,\n  \"accent\" | \"accentStrong\" | \"accentMuted\" | \"surface\"\n>;\n\ninterface CustomTheme {\n  default?: Partial<CustomColors>;\n  dark?: Partial<CustomColors>;\n}\n\nconst customTheme = customThemeJson as CustomTheme;\n\nconst breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nconst spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\n// Resolved hex palettes for each mode. GlobalStyles emits them as CSS custom\n// properties, one block per mode, and that is where every painted color\n// actually comes from \u2014 the theme objects below only reference those variables.\n// Custom theme.json overrides are merged here, so they flow through both.\nexport const colorsLight: CustomColors = {\n  primaryLight: \"#d1d5db\",\n  primary: \"#556272\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#c4b5fd\",\n  secondary: \"#8b5cf6\",\n  secondaryDark: \"#5b21b6\",\n  tertiaryLight: \"#86efac\",\n  tertiary: \"#22c55e\",\n  tertiaryDark: \"#15803d\",\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#000000\",\n  light: \"#ffffff\",\n  ...(customTheme.default\n    ? (customTheme.default as Partial<CustomColors>)\n    : {}),\n};\n\nexport const colorsDark: CustomColors = {\n  primaryLight: \"#9ca3af\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#ddd6fe\",\n  secondary: \"#a78bfa\",\n  secondaryDark: \"#7c3aed\",\n  tertiaryLight: \"#6ee7b7\",\n  tertiary: \"#10b981\",\n  tertiaryDark: \"#065f46\",\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#ffffff\",\n  light: \"#000000\",\n  ...(customTheme.dark ? (customTheme.dark as Partial<CustomColors>) : {}),\n};\n\nexport const shadowsLight: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nexport const shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nconst fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono, monospace\",\n};\n\nconst fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n  buttonSmall: { xs: \"14px\", lg: \"14px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n  inputSmall: { xs: \"14px\", lg: \"14px\" },\n};\n\nconst lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n  buttonSmall: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n  inputSmall: { xs: \"1\", lg: \"1\" },\n};\n\n// Builds the full Colors record for a mode: the resolved brand palette plus\n// the semantic tokens derived from it. Used here only as the key template for\n// the CSS-variable theme below; the resolved values themselves are emitted as\n// custom properties by GlobalStyles.\nexport function buildColors(palette: CustomColors, isDark: boolean): Colors {\n  const accent = isDark ? palette.primaryLight : palette.primaryDark;\n  return {\n    ...palette,\n    accent,\n    // accent shifted ~10% toward black (light mode) or white (dark mode).\n    accentStrong: `color-mix(in srgb, ${accent} 90%, ${isDark ? \"white\" : \"black\"})`,\n    accentMuted: isDark ? palette.grayDark : palette.primary,\n    surface: isDark ? palette.dark : palette.light,\n  };\n}\n\n// Maps every key of a token record to the CSS custom property that holds its\n// value, keeping the record's exact shape. Passing the resolved light objects\n// as templates means a new token can never be forgotten here.\nfunction cssVarTokens<T extends object>(prefix: string, template: T): T {\n  return Object.fromEntries(\n    Object.keys(template).map((key) => [key, `var(--${prefix}-${key})`]),\n  ) as T;\n}\n\n// Every painted color and shadow resolves through a CSS custom property rather\n// than a literal, so the CSS styled-components generates is identical in light\n// and dark mode. That is what makes a statically rendered page paint the right\n// theme on its first frame: the data-theme attribute the blocking script in the\n// root layout stamps on <html> before paint selects the variable block, and\n// nothing has to wait for hydration to swap a theme object. `theme` and\n// `themeDark` therefore differ only in `isDark`, which Cherry's\n// ClientThemeProvider reads to persist the choice, and which\n// ThemeModeAttribute mirrors back onto the attribute.\nconst colors = cssVarTokens(\"color\", buildColors(colorsLight, false));\nconst shadows = cssVarTokens(\"shadow\", shadowsLight);\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: false,\n};\n\nexport const themeDark: Theme = {\n  ...theme,\n  isDark: true,\n};\n\ninterface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\ninterface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\n// Matches cherry-styled-components' Colors shape for the brand keys, plus a\n// handful of semantic tokens derived from the brand palette by buildColors.\n// The brand keys (primaryLight\u2026light) are customizable via theme.json; the\n// semantic keys (accent*, surface) are derived and not overridable \u2014 see\n// CustomColors above.\ninterface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n\n  /** High-contrast accent text. Was: isDark ? primaryLight : primaryDark. */\n  accent: TString;\n  /** Slightly stronger accent (lightened/darkened by ~10%). */\n  accentStrong: TString;\n  /** Muted body text. Was: isDark ? grayDark : primary. */\n  accentMuted: TString;\n  /** Elevated surface color, white-ish in both modes. Was: isDark ? dark : light. */\n  surface: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\ninterface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\ninterface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\ninterface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";