/**
 * beenvoice mobile theme — derived from `beenvoice/src/styles/globals.css`
 * and root layout `brand-background` + `components/ui/card.tsx`.
 *
 * Default: data-interface-theme="beenvoice", data-radius="xl", data-color-theme="slate"
 */

/** hsl(0 0% 100%) */
export const background = "#FFFFFF";

/** hsl(240 10% 3.9%) */
export const foreground = "#09090B";

/** hsl(240 5.9% 10%) */
export const primary = "#18181B";

/** hsl(0 0% 98%) */
export const primaryForeground = "#FAFAFA";

/** hsl(240 4.8% 95.9%) */
export const muted = "#F4F4F5";

/** hsl(240 3.8% 46.1%) */
export const mutedForeground = "#71717A";

/** hsl(240 5.9% 90%) */
export const border = "#E4E4E7";

/** hsl(240 5.9% 90% / 0.5) — `border-border/50` on cards */
export const border50 = "rgba(228, 228, 231, 0.5)";

/** `bg-background/80` on glass surfaces */
export const surface80 = "rgba(255, 255, 255, 0.8)";

/** `bg-background/80` on chrome (tab bar, headers) — `backdrop-blur-md` */
export const chrome80 = "rgba(255, 255, 255, 0.8)";

/** brand-background grid: `#80808012` → alpha 0x12 / 255 */
export const gridLine = "rgba(128, 128, 128, 0.0706)";

export const gridSize = 24;

/** brand-background blob: `bg-neutral-400/40` = #a3a3a3 @ 40% */
export const blobCore = "rgba(163, 163, 163, 0.4)";

/** dark mode blob: neutral-500/30 — kept for future */
export const blobCoreDark = "rgba(115, 115, 115, 0.3)";

export const blobDiameter = 800;

/**
 * Tailwind blur scale (approx px):
 * blur-md = 12, blur-xl = 24, blur-3xl = 64
 */
export const blur = {
  md: 12,
  xl: 24,
  blob: 64,
} as const;

/**
 * expo-blur intensity is not 1:1 with CSS px — tuned to visually match.
 * backdrop-blur-xl ≈ 24px, backdrop-blur-md ≈ 12px
 */
export const blurIntensity = {
  card: 45,
  chrome: 28,
} as const;

/**
 * Radius: beenvoice `[data-slot=card] { border-radius: var(--radius-lg) }`
 * with `--radius: 1rem` (xl preference) → 16px.
 * Auth/marketing cards use the same glass card component.
 */
export const radius = {
  sm: 4,
  md: 8,
  lg: 16,
  xl: 20,
  button: 12,
  pill: 999,
} as const;

/** shadow-sm on default card */
export const shadowSm = {
  shadowColor: "#000000",
  shadowOffset: { width: 0, height: 1 },
  shadowOpacity: 0.05,
  shadowRadius: 2,
  elevation: 1,
} as const;

/** shadow-md on stats cards */
export const shadowMd = {
  shadowColor: "#000000",
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.08,
  shadowRadius: 8,
  elevation: 4,
} as const;

/** @keyframes blob — 7s ease infinite */
export const blobAnimation = {
  durationMs: 7000,
  keyframes: [
    { translateX: 0, translateY: 0, scale: 1 },
    { translateX: 30, translateY: -50, scale: 1.1 },
    { translateX: -20, translateY: 20, scale: 0.9 },
    { translateX: 0, translateY: 0, scale: 1 },
  ],
} as const;