/**
 * Definity Typography Classes
 * Basierend auf Original Definity Template
 */

export const typography = {
  // Headings
  h1: "font-heading font-bold text-[1.7em] tracking-[5px] uppercase text-dark",
  h2: "font-heading font-bold text-[1.5em] tracking-[4px] uppercase text-dark",
  h3: "font-heading font-bold text-[1.3em] tracking-[3.5px] uppercase text-dark",
  h4: "font-heading font-bold text-[1.07em] tracking-[3px] uppercase text-dark",
  h5: "font-heading font-bold text-[1em] tracking-[2px] uppercase text-dark",
  h6: "font-heading font-bold text-[0.85em] tracking-[2px] uppercase text-dark",

  // Light Variants (for dark backgrounds)
  h1Light: "font-heading font-bold text-[1.7em] tracking-[5px] uppercase text-white",
  h2Light: "font-heading font-bold text-[1.5em] tracking-[4px] uppercase text-white",
  h3Light: "font-heading font-bold text-[1.3em] tracking-[3.5px] uppercase text-white",

  // Alternative Heading (Light Weight)
  hAlt: "font-heading-alt font-light uppercase tracking-[2px]",
  hAltLight: "font-heading-alt font-light uppercase tracking-[2px] text-gray-light",

  // Body
  body: "font-body font-light text-[14px] tracking-[0.2px] leading-[1.8em] text-gray",
  bodyLight: "font-body font-light text-[14px] tracking-[0.2px] leading-[1.8em] text-gray-light",

  // Links
  link: "text-accent border-b border-transparent hover:border-accent transition-all duration-500",
  linkDark: "text-dark border-b border-transparent hover:border-dark transition-all duration-500",

  // Labels / Small Text
  label: "font-heading text-[0.85em] tracking-[2px] uppercase text-gray-light",
  labelDark: "font-heading text-[0.85em] tracking-[2px] uppercase text-dark",
}

/**
 * Prose Styles for Rich Text Content
 */
export const prose = `
  font-body font-light text-[14px] tracking-[0.2px] leading-[1.8em] text-gray

  [&_h1]:font-heading [&_h1]:font-bold [&_h1]:text-[1.7em]
  [&_h1]:tracking-[5px] [&_h1]:uppercase [&_h1]:text-dark [&_h1]:mb-6

  [&_h2]:font-heading [&_h2]:font-bold [&_h2]:text-[1.5em]
  [&_h2]:tracking-[4px] [&_h2]:uppercase [&_h2]:text-dark [&_h2]:mb-5 [&_h2]:mt-10

  [&_h3]:font-heading [&_h3]:font-bold [&_h3]:text-[1.3em]
  [&_h3]:tracking-[3.5px] [&_h3]:uppercase [&_h3]:text-dark [&_h3]:mb-4 [&_h3]:mt-8

  [&_p]:mb-6

  [&_a]:text-accent [&_a]:border-b [&_a]:border-transparent
  [&_a:hover]:border-accent [&_a]:transition-all [&_a]:duration-500

  [&_blockquote]:border-none [&_blockquote]:p-0 [&_blockquote]:my-8
  [&_blockquote]:text-[1.3em] [&_blockquote]:tracking-[0.5px] [&_blockquote]:italic

  [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-6
  [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-6
  [&_li]:mb-2

  [&_strong]:font-semibold [&_strong]:text-dark
`
