/**
 * JS/TS mirror of styles/tokens.css — for contexts that need raw values
 * (Framer Motion, canvas, chart libraries) rather than Tailwind classes.
 * The CSS custom properties in tokens.css remain the single source of truth
 * for anything renderable as a class; update both files together.
 */

export const breakpoints = {
  sm: 480,
  md: 768,
  lg: 1024,
  xl: 1280,
  "2xl": 1536,
  "3xl": 1920,
} as const;

export const containers = {
  sm: 480,
  md: 768,
  lg: 1024,
  xl: 1200,
  "2xl": 1360,
  "3xl": 1560,
} as const;

export const radii = {
  none: 0,
  sm: 2,
  DEFAULT: 4,
  md: 6,
  lg: 10,
  xl: 16,
  full: 9999,
} as const;

export const motionDurations = {
  instant: 0.1,
  fast: 0.15,
  base: 0.25,
  slow: 0.4,
  deliberate: 0.6,
} as const;

export const motionEasing = {
  editorial: [0.22, 1, 0.36, 1] as [number, number, number, number],
  standard: [0.4, 0, 0.2, 1] as [number, number, number, number],
};

export const typeScale = {
  displayXl: "4.5rem",
  displayLg: "3.5rem",
  displayMd: "2.75rem",
  h1: "2.25rem",
  h2: "1.75rem",
  h3: "1.375rem",
  h4: "1.125rem",
  bodyLg: "1.125rem",
  bodyMd: "1rem",
  bodySm: "0.875rem",
  caption: "0.8125rem",
  label: "0.75rem",
} as const;