Source file prose.ml

(** Prose typography utilities

    Complete implementation of Tailwind Typography plugin with:
    - All HTML elements styled with :where() for low specificity
    - not-prose exclusion mechanism
    - Full CSS variable theming
    - Size and color variants *)

module Css = Cascade.Css
open Css

type variant =
  [ `Base | `Sm | `Lg | `Xl | `Xl2 | `Gray | `Slate | `Zinc | `Neutral | `Stone ]

(* Create prose variables using the new API *)
let prose_body_var = Var.channel Color "tw-prose-body"
let prose_headings_var = Var.channel Color "tw-prose-headings"
let prose_lead_var = Var.channel Color "tw-prose-lead"
let prose_links_var = Var.channel Color "tw-prose-links"
let prose_bold_var = Var.channel Color "tw-prose-bold"
let prose_counters_var = Var.channel Color "tw-prose-counters"
let prose_bullets_var = Var.channel Color "tw-prose-bullets"
let prose_hr_var = Var.channel Color "tw-prose-hr"
let prose_quotes_var = Var.channel Color "tw-prose-quotes"
let prose_quote_borders_var = Var.channel Color "tw-prose-quote-borders"
let prose_captions_var = Var.channel Color "tw-prose-captions"
let prose_kbd_var = Var.channel Color "tw-prose-kbd"
let prose_kbd_shadows_var = Var.channel Color "tw-prose-kbd-shadows"
let prose_code_var = Var.channel Color "tw-prose-code"
let prose_pre_code_var = Var.channel Color "tw-prose-pre-code"
let prose_pre_bg_var = Var.channel Color "tw-prose-pre-bg"
let prose_th_borders_var = Var.channel Color "tw-prose-th-borders"
let prose_td_borders_var = Var.channel Color "tw-prose-td-borders"

(* Invert variants for dark mode *)
let prose_invert_body_var = Var.channel Color "tw-prose-invert-body"
let prose_invert_headings_var = Var.channel Color "tw-prose-invert-headings"
let prose_invert_lead_var = Var.channel Color "tw-prose-invert-lead"
let prose_invert_links_var = Var.channel Color "tw-prose-invert-links"
let prose_invert_bold_var = Var.channel Color "tw-prose-invert-bold"
let prose_invert_counters_var = Var.channel Color "tw-prose-invert-counters"
let prose_invert_bullets_var = Var.channel Color "tw-prose-invert-bullets"
let prose_invert_hr_var = Var.channel Color "tw-prose-invert-hr"
let prose_invert_quotes_var = Var.channel Color "tw-prose-invert-quotes"

let prose_invert_quote_borders_var =
  Var.channel Color "tw-prose-invert-quote-borders"

let prose_invert_captions_var = Var.channel Color "tw-prose-invert-captions"
let prose_invert_kbd_var = Var.channel Color "tw-prose-invert-kbd"

let prose_invert_kbd_shadows_var =
  Var.channel Color "tw-prose-invert-kbd-shadows"

let prose_invert_code_var = Var.channel Color "tw-prose-invert-code"
let prose_invert_pre_code_var = Var.channel Color "tw-prose-invert-pre-code"
let prose_invert_pre_bg_var = Var.channel Color "tw-prose-invert-pre-bg"
let prose_invert_th_borders_var = Var.channel Color "tw-prose-invert-th-borders"
let prose_invert_td_borders_var = Var.channel Color "tw-prose-invert-td-borders"

(* ======================================================================== *)
(* Selector Helper Functions *)
(* ======================================================================== *)

let ( ++ ) = Css.Selector.( ++ )
let ( >> ) = Css.Selector.( >> )
let ( && ) = Css.Selector.( && )
(* let ( || ) = Css.Selector.( || ) -- Not used anymore, using list instead *)

(* Shorthand for attribute selectors *)
let attr name match_type = Css.Selector.attribute name match_type
let class_attr value = attr "class" (Whitespace_list value)
let type_attr value = attr "type" (Exact value)

(* The [:not(:where(...))] that keeps a prose rule off an element opted out with
   [not-prose], and off its descendants. *)
let not_prose_selector =
  let open Css.Selector in
  let not_prose_class = attribute "class" (Whitespace_list "not-prose") in
  let not_prose_descendant = combine not_prose_class Descendant universal in
  not [ where [ not_prose_class; not_prose_descendant ] ]

(* Helper to create a prose element selector with :where() and :not()
   exclusion *)
let prose_where_element element_selector =
  let open Css.Selector in
  (* Create :where(element):not(:where(...)) structure *)
  compound [ where [ element_selector ]; not_prose_selector ]

(* Helper to create a typed selector with :where() and :not() for prose *)
let where base_class elt =
  let open Css.Selector in
  (* For now, just use the new helper *)
  class_ base_class ++ prose_where_element elt

(* Helper for child selectors in prose size variants like prose-sm *)
let prose_child_selector parent_selector child_element =
  (* Create selector like: .prose-sm :where(.prose-sm>child):not(...) *)
  let open Css.Selector in
  let parent_child = combine parent_selector Child child_element in
  (* Wrap the parent>child in :where() then add :not() *)
  parent_selector ++ compound [ where [ parent_child ]; not_prose_selector ]

let li = Css.Selector.element "li"
let ol = Css.Selector.element "ol"
let ul = Css.Selector.element "ul"
let dd = Css.Selector.element "dd"
let dl = Css.Selector.element "dl"
let hr = Css.Selector.element "hr"
let h1 = Css.Selector.element "h1"
let h2 = Css.Selector.element "h2"
let h3 = Css.Selector.element "h3"
let h4 = Css.Selector.element "h4"
let thead = Css.Selector.element "thead"
let tbody = Css.Selector.element "tbody"
let tfoot = Css.Selector.element "tfoot"
let figure = Css.Selector.element "figure"
let p = Css.Selector.element "p"
let th = Css.Selector.element "th"
let td = Css.Selector.element "td"
let first_child = Css.Selector.First_child
let last_child = Css.Selector.Last_child
let sibling e = Css.Selector.(combine e Next_sibling universal)
let a = Css.Selector.element "a"
let code = Css.Selector.element "code"
let pre = Css.Selector.element "pre"
let blockquote = Css.Selector.element "blockquote"
let tr = Css.Selector.element "tr"
let table = Css.Selector.element "table"
let figcaption = Css.Selector.element "figcaption"
let picture = Css.Selector.element "picture"
let img = Css.Selector.element "img"
let dt = Css.Selector.element "dt"
let strong = Css.Selector.element "strong"
let video = Css.Selector.element "video"
(* kbd selector no longer needed; size rules use direct element selectors *)

(* Lead paragraph selector - now unused since prose_where_element is used
   directly *)

(* Compound selectors for ol with type attributes *)
(* ol type selectors were only used in removed duplicate rules *)

(* Pseudo-element helpers that apply pseudo AFTER the where clause *)
let with_before selector =
  Css.Selector.compound [ selector; Css.Selector.Before Css.Selector.Single ]

let with_after selector =
  Css.Selector.compound [ selector; Css.Selector.After Css.Selector.Single ]

let radius len = Css.Radius { horizontal = [ Css.Length len ]; vertical = None }

(* blockquote paragraph pseudo-element selectors were only used in removed
   duplicates *)
let blockquote_code = blockquote ++ code
let thead_th_code = thead ++ th ++ code
let pre_code = pre ++ code
let thead_th = thead ++ th
let tbody_tr = tbody ++ tr
let tbody_tr_last_child = tbody ++ (tr && last_child)

(* tbody_td and tfoot_td now constructed inline *)
(* picture_img now constructed inline *)
(* ol_li and ul_li now constructed inline *)
(* h2_code and h3_code now constructed inline in typography_rules *)
let nested_lists = Css.Selector.list [ ul ++ ul; ul ++ ol; ol ++ ul; ol ++ ol ]
(* These compound selectors are now constructed inline in typography_rules *)

(* Theme record for all prose color variables *)
type prose_theme = {
  body : Css.declaration * Css.color Css.var;
  headings : Css.declaration * Css.color Css.var;
  lead : Css.declaration * Css.color Css.var;
  links : Css.declaration * Css.color Css.var;
  bold : Css.declaration * Css.color Css.var;
  counters : Css.declaration * Css.color Css.var;
  bullets : Css.declaration * Css.color Css.var;
  hr : Css.declaration * Css.color Css.var;
  quotes : Css.declaration * Css.color Css.var;
  quote_borders : Css.declaration * Css.color Css.var;
  captions : Css.declaration * Css.color Css.var;
  kbd : Css.declaration * Css.color Css.var;
  kbd_shadows : Css.declaration * Css.color Css.var;
  code : Css.declaration * Css.color Css.var;
  pre_code : Css.declaration * Css.color Css.var;
  pre_bg : Css.declaration * Css.color Css.var;
  th_borders : Css.declaration * Css.color Css.var;
  td_borders : Css.declaration * Css.color Css.var;
  (* Invert variants *)
  invert_body : Css.declaration * Css.color Css.var;
  invert_headings : Css.declaration * Css.color Css.var;
  invert_lead : Css.declaration * Css.color Css.var;
  invert_links : Css.declaration * Css.color Css.var;
  invert_bold : Css.declaration * Css.color Css.var;
  invert_counters : Css.declaration * Css.color Css.var;
  invert_bullets : Css.declaration * Css.color Css.var;
  invert_hr : Css.declaration * Css.color Css.var;
  invert_quotes : Css.declaration * Css.color Css.var;
  invert_quote_borders : Css.declaration * Css.color Css.var;
  invert_captions : Css.declaration * Css.color Css.var;
  invert_kbd : Css.declaration * Css.color Css.var;
  invert_kbd_shadows : Css.declaration * Css.color Css.var;
  invert_code : Css.declaration * Css.color Css.var;
  invert_pre_code : Css.declaration * Css.color Css.var;
  invert_pre_bg : Css.declaration * Css.color Css.var;
  invert_th_borders : Css.declaration * Css.color Css.var;
  invert_td_borders : Css.declaration * Css.color Css.var;
}

(* The eighteen colour slots a prose palette fills. Each theme below is one
   record, so a slot added here is a compile error in every theme rather than a
   declaration that silently goes missing from one of them. *)
type palette = {
  body : Css.color;
  headings : Css.color;
  lead : Css.color;
  links : Css.color;
  bold : Css.color;
  counters : Css.color;
  bullets : Css.color;
  hr : Css.color;
  quotes : Css.color;
  quote_borders : Css.color;
  captions : Css.color;
  kbd : Css.color;
  kbd_shadows : Css.color;
  code : Css.color;
  pre_code : Css.color;
  pre_bg : Css.color;
  th_borders : Css.color;
  td_borders : Css.color;
}

let gray_normal =
  {
    body = Css.oklch 37.3 0.034 259.733;
    headings = Css.oklch 21.0 0.034 264.665;
    lead = Css.oklch 44.6 0.030 256.802;
    links = Css.oklch 21.0 0.034 264.665;
    bold = Css.oklch 21.0 0.034 264.665;
    counters = Css.oklch 55.1 0.027 264.364;
    bullets = Css.oklch 87.2 0.010 258.338;
    hr = Css.oklch 92.8 0.006 264.531;
    quotes = Css.oklch 21.0 0.034 264.665;
    quote_borders = Css.oklch 92.8 0.006 264.531;
    captions = Css.oklch 55.1 0.027 264.364;
    kbd = Css.oklch 21.0 0.034 264.665;
    kbd_shadows = Css.oklaba 21.0 (-0.00316127) (-0.0338527) 0.1;
    code = Css.oklch 21.0 0.034 264.665;
    pre_code = Css.oklch 92.8 0.006 264.531;
    pre_bg = Css.oklch 27.8 0.033 256.848;
    th_borders = Css.oklch 87.2 0.010 258.338;
    td_borders = Css.oklch 92.8 0.006 264.531;
  }

let gray_invert =
  {
    body = Css.oklch 87.2 0.010 258.338;
    headings = Css.hex "fff";
    lead = Css.oklch 70.7 0.022 261.325;
    links = Css.hex "fff";
    bold = Css.hex "fff";
    counters = Css.oklch 70.7 0.022 261.325;
    bullets = Css.oklch 44.6 0.030 256.802;
    hr = Css.oklch 37.3 0.034 259.733;
    quotes = Css.oklch 96.7 0.003 264.542;
    quote_borders = Css.oklch 37.3 0.034 259.733;
    captions = Css.oklch 70.7 0.022 261.325;
    kbd = Css.hex "fff";
    kbd_shadows = Css.hex "#ffffff1a";
    code = Css.hex "fff";
    pre_code = Css.oklch 87.2 0.010 258.338;
    pre_bg = Css.hex "00000080";
    th_borders = Css.oklch 44.6 0.030 256.802;
    td_borders = Css.oklch 37.3 0.034 259.733;
  }

let slate_normal =
  {
    body = Css.oklch 37.2 0.044 257.287;
    headings = Css.oklch 20.8 0.042 265.755;
    lead = Css.oklch 44.6 0.043 257.281;
    links = Css.oklch 20.8 0.042 265.755;
    bold = Css.oklch 20.8 0.042 265.755;
    counters = Css.oklch 55.4 0.046 257.417;
    bullets = Css.oklch 86.9 0.022 252.894;
    hr = Css.oklch 92.9 0.013 255.508;
    quotes = Css.oklch 20.8 0.042 265.755;
    quote_borders = Css.oklch 92.9 0.013 255.508;
    captions = Css.oklch 55.4 0.046 257.417;
    kbd = Css.oklch 20.8 0.042 265.755;
    kbd_shadows = Css.oklaba 20.8 (-0.00310889) (-0.0418848) 0.1;
    code = Css.oklch 20.8 0.042 265.755;
    pre_code = Css.oklch 92.9 0.013 255.508;
    pre_bg = Css.oklch 27.9 0.041 260.031;
    th_borders = Css.oklch 86.9 0.022 252.894;
    td_borders = Css.oklch 92.9 0.013 255.508;
  }

let slate_invert =
  {
    body = Css.oklch 86.9 0.022 252.894;
    headings = Css.hex "fff";
    lead = Css.oklch 70.4 0.040 256.788;
    links = Css.hex "fff";
    bold = Css.hex "fff";
    counters = Css.oklch 70.4 0.040 256.788;
    bullets = Css.oklch 44.6 0.043 257.281;
    hr = Css.oklch 37.2 0.044 257.287;
    quotes = Css.oklch 96.8 0.007 247.896;
    quote_borders = Css.oklch 37.2 0.044 257.287;
    captions = Css.oklch 70.4 0.040 256.788;
    kbd = Css.hex "fff";
    kbd_shadows = Css.hex "#ffffff1a";
    code = Css.hex "fff";
    pre_code = Css.oklch 86.9 0.022 252.894;
    pre_bg = Css.hex "00000080";
    th_borders = Css.oklch 44.6 0.043 257.281;
    td_borders = Css.oklch 37.2 0.044 257.287;
  }

let zinc_normal =
  {
    body = Css.oklch 37.0 0.013 285.805;
    headings = Css.oklch 21.0 0.006 285.885;
    lead = Css.oklch 44.2 0.017 285.786;
    links = Css.oklch 21.0 0.006 285.885;
    bold = Css.oklch 21.0 0.006 285.885;
    counters = Css.oklch 55.2 0.016 285.938;
    bullets = Css.oklch 87.1 0.006 286.286;
    hr = Css.oklch 92.0 0.004 286.32;
    quotes = Css.oklch 21.0 0.006 285.885;
    quote_borders = Css.oklch 92.0 0.004 286.32;
    captions = Css.oklch 55.2 0.016 285.938;
    kbd = Css.oklch 21.0 0.006 285.885;
    kbd_shadows = Css.oklaba 21.0 0.00164225 (-0.00577088) 0.1;
    code = Css.oklch 21.0 0.006 285.885;
    pre_code = Css.oklch 92.0 0.004 286.32;
    pre_bg = Css.oklch 27.4 0.006 286.033;
    th_borders = Css.oklch 87.1 0.006 286.286;
    td_borders = Css.oklch 92.0 0.004 286.32;
  }

let zinc_invert =
  {
    body = Css.oklch 87.1 0.006 286.286;
    headings = Css.hex "fff";
    lead = Css.oklch 70.5 0.015 286.067;
    links = Css.hex "fff";
    bold = Css.hex "fff";
    counters = Css.oklch 70.5 0.015 286.067;
    bullets = Css.oklch 44.2 0.017 285.786;
    hr = Css.oklch 37.0 0.013 285.805;
    quotes = Css.oklch 96.7 0.001 286.375;
    quote_borders = Css.oklch 37.0 0.013 285.805;
    captions = Css.oklch 70.5 0.015 286.067;
    kbd = Css.hex "fff";
    kbd_shadows = Css.hex "#ffffff1a";
    code = Css.hex "fff";
    pre_code = Css.oklch 87.1 0.006 286.286;
    pre_bg = Css.hex "00000080";
    th_borders = Css.oklch 44.2 0.017 285.786;
    td_borders = Css.oklch 37.0 0.013 285.805;
  }

let neutral_normal =
  {
    body = Css.oklch_none_hue 37.1 0.0;
    headings = Css.oklch_none_hue 20.5 0.0;
    lead = Css.oklch_none_hue 43.9 0.0;
    links = Css.oklch_none_hue 20.5 0.0;
    bold = Css.oklch_none_hue 20.5 0.0;
    counters = Css.oklch_none_hue 55.6 0.0;
    bullets = Css.oklch_none_hue 87.0 0.0;
    hr = Css.oklch_none_hue 92.2 0.0;
    quotes = Css.oklch_none_hue 20.5 0.0;
    quote_borders = Css.oklch_none_hue 92.2 0.0;
    captions = Css.oklch_none_hue 55.6 0.0;
    kbd = Css.oklch_none_hue 20.5 0.0;
    kbd_shadows = Css.oklaba 20.5 0.0 0.0 0.1;
    code = Css.oklch_none_hue 20.5 0.0;
    pre_code = Css.oklch_none_hue 92.2 0.0;
    pre_bg = Css.oklch_none_hue 26.9 0.0;
    th_borders = Css.oklch_none_hue 87.0 0.0;
    td_borders = Css.oklch_none_hue 92.2 0.0;
  }

let neutral_invert =
  {
    body = Css.oklch_none_hue 87.0 0.0;
    headings = Css.hex "fff";
    lead = Css.oklch_none_hue 70.8 0.0;
    links = Css.hex "fff";
    bold = Css.hex "fff";
    counters = Css.oklch_none_hue 70.8 0.0;
    bullets = Css.oklch_none_hue 43.9 0.0;
    hr = Css.oklch_none_hue 37.1 0.0;
    quotes = Css.oklch_none_hue 97.0 0.0;
    quote_borders = Css.oklch_none_hue 37.1 0.0;
    captions = Css.oklch_none_hue 70.8 0.0;
    kbd = Css.hex "fff";
    kbd_shadows = Css.hex "#ffffff1a";
    code = Css.hex "fff";
    pre_code = Css.oklch_none_hue 87.0 0.0;
    pre_bg = Css.hex "00000080";
    th_borders = Css.oklch_none_hue 43.9 0.0;
    td_borders = Css.oklch_none_hue 37.1 0.0;
  }

let stone_normal =
  {
    body = Css.oklch 37.4 0.01 67.558;
    headings = Css.oklch 21.6 0.006 56.043;
    lead = Css.oklch 44.4 0.011 73.639;
    links = Css.oklch 21.6 0.006 56.043;
    bold = Css.oklch 21.6 0.006 56.043;
    counters = Css.oklch 55.3 0.013 58.071;
    bullets = Css.oklch 86.9 0.005 56.366;
    hr = Css.oklch 92.3 0.003 48.717;
    quotes = Css.oklch 21.6 0.006 56.043;
    quote_borders = Css.oklch 92.3 0.003 48.717;
    captions = Css.oklch 55.3 0.013 58.071;
    kbd = Css.oklch 21.6 0.006 56.043;
    kbd_shadows = Css.oklaba 21.6 0.00335142 0.00497674 0.1;
    code = Css.oklch 21.6 0.006 56.043;
    pre_code = Css.oklch 92.3 0.003 48.717;
    pre_bg = Css.oklch 26.8 0.007 34.298;
    th_borders = Css.oklch 86.9 0.005 56.366;
    td_borders = Css.oklch 92.3 0.003 48.717;
  }

let stone_invert =
  {
    body = Css.oklch 86.9 0.005 56.366;
    headings = Css.hex "fff";
    lead = Css.oklch 70.9 0.01 56.259;
    links = Css.hex "fff";
    bold = Css.hex "fff";
    counters = Css.oklch 70.9 0.01 56.259;
    bullets = Css.oklch 44.4 0.011 73.639;
    hr = Css.oklch 37.4 0.01 67.558;
    quotes = Css.oklch 97.0 0.001 106.424;
    quote_borders = Css.oklch 37.4 0.01 67.558;
    captions = Css.oklch 70.9 0.01 56.259;
    kbd = Css.hex "fff";
    kbd_shadows = Css.hex "#ffffff1a";
    code = Css.hex "fff";
    pre_code = Css.oklch 86.9 0.005 56.366;
    pre_bg = Css.hex "00000080";
    th_borders = Css.oklch 44.4 0.011 73.639;
    td_borders = Css.oklch 37.4 0.01 67.558;
  }

(* Default prose theme - the gray palette bound to the prose variables, created
   once and shared across all utilities. Each field is the (declaration,
   reference) pair returned by [Var.binding]. *)
let default_prose_theme : prose_theme =
  let normal = gray_normal and invert = gray_invert in
  {
    body = Var.binding prose_body_var normal.body;
    headings = Var.binding prose_headings_var normal.headings;
    lead = Var.binding prose_lead_var normal.lead;
    links = Var.binding prose_links_var normal.links;
    bold = Var.binding prose_bold_var normal.bold;
    counters = Var.binding prose_counters_var normal.counters;
    bullets = Var.binding prose_bullets_var normal.bullets;
    hr = Var.binding prose_hr_var normal.hr;
    quotes = Var.binding prose_quotes_var normal.quotes;
    quote_borders = Var.binding prose_quote_borders_var normal.quote_borders;
    captions = Var.binding prose_captions_var normal.captions;
    kbd = Var.binding prose_kbd_var normal.kbd;
    kbd_shadows = Var.binding prose_kbd_shadows_var normal.kbd_shadows;
    code = Var.binding prose_code_var normal.code;
    pre_code = Var.binding prose_pre_code_var normal.pre_code;
    pre_bg = Var.binding prose_pre_bg_var normal.pre_bg;
    th_borders = Var.binding prose_th_borders_var normal.th_borders;
    td_borders = Var.binding prose_td_borders_var normal.td_borders;
    (* Invert variants *)
    invert_body = Var.binding prose_invert_body_var invert.body;
    invert_headings = Var.binding prose_invert_headings_var invert.headings;
    invert_lead = Var.binding prose_invert_lead_var invert.lead;
    invert_links = Var.binding prose_invert_links_var invert.links;
    invert_bold = Var.binding prose_invert_bold_var invert.bold;
    invert_counters = Var.binding prose_invert_counters_var invert.counters;
    invert_bullets = Var.binding prose_invert_bullets_var invert.bullets;
    invert_hr = Var.binding prose_invert_hr_var invert.hr;
    invert_quotes = Var.binding prose_invert_quotes_var invert.quotes;
    invert_quote_borders =
      Var.binding prose_invert_quote_borders_var invert.quote_borders;
    invert_captions = Var.binding prose_invert_captions_var invert.captions;
    invert_kbd = Var.binding prose_invert_kbd_var invert.kbd;
    invert_kbd_shadows =
      Var.binding prose_invert_kbd_shadows_var invert.kbd_shadows;
    invert_code = Var.binding prose_invert_code_var invert.code;
    invert_pre_code = Var.binding prose_invert_pre_code_var invert.pre_code;
    invert_pre_bg = Var.binding prose_invert_pre_bg_var invert.pre_bg;
    invert_th_borders =
      Var.binding prose_invert_th_borders_var invert.th_borders;
    invert_td_borders =
      Var.binding prose_invert_td_borders_var invert.td_borders;
  }

(** Access theme record variables *)
let theme = default_prose_theme

(* Extract individual variables from theme record for backward compatibility *)
let prose_body_d, prose_body_v = theme.body
let prose_headings_d, prose_headings_v = theme.headings
let prose_lead_d, prose_lead_v = theme.lead
let prose_links_d, prose_links_v = theme.links
let prose_bold_d, prose_bold_v = theme.bold
let prose_counters_d, prose_counters_v = theme.counters
let prose_bullets_d, prose_bullets_v = theme.bullets
let prose_hr_d, prose_hr_v = theme.hr
let prose_quotes_d, prose_quotes_v = theme.quotes
let prose_quote_borders_d, prose_quote_borders_v = theme.quote_borders
let prose_captions_d, prose_captions_v = theme.captions
let prose_kbd_d, prose_kbd_v = theme.kbd
let prose_kbd_shadows_d, prose_kbd_shadows_v = theme.kbd_shadows
let prose_code_d, prose_code_v = theme.code
let prose_pre_code_d, prose_pre_code_v = theme.pre_code
let prose_pre_bg_d, prose_pre_bg_v = theme.pre_bg
let prose_th_borders_d, prose_th_borders_v = theme.th_borders
let prose_td_borders_d, prose_td_borders_v = theme.td_borders

(* Invert variants *)
let prose_invert_body_d, _prose_invert_body_v = theme.invert_body
let prose_invert_headings_d, _prose_invert_headings_v = theme.invert_headings
let prose_invert_lead_d, _prose_invert_lead_v = theme.invert_lead
let prose_invert_links_d, _prose_invert_links_v = theme.invert_links
let prose_invert_bold_d, _prose_invert_bold_v = theme.invert_bold
let prose_invert_counters_d, _prose_invert_counters_v = theme.invert_counters
let prose_invert_bullets_d, _prose_invert_bullets_v = theme.invert_bullets
let prose_invert_hr_d, _prose_invert_hr_v = theme.invert_hr
let prose_invert_quotes_d, _prose_invert_quotes_v = theme.invert_quotes

let prose_invert_quote_borders_d, _invert_quote_borders_v =
  theme.invert_quote_borders

let prose_invert_captions_d, _prose_invert_captions_v = theme.invert_captions
let prose_invert_kbd_d, _prose_invert_kbd_v = theme.invert_kbd
let prose_invert_kbd_shadows_d, _invert_kbd_shadows_v = theme.invert_kbd_shadows
let prose_invert_code_d, _prose_invert_code_v = theme.invert_code
let prose_invert_pre_code_d, _invert_pre_code_v = theme.invert_pre_code
let prose_invert_pre_bg_d, _invert_pre_bg_v = theme.invert_pre_bg
let prose_invert_th_borders_d, _invert_th_borders_v = theme.invert_th_borders
let prose_invert_td_borders_d, _invert_td_borders_v = theme.invert_td_borders

(** Collect all CSS variable declarations *)
let css_variables =
  [
    prose_body_d;
    prose_headings_d;
    prose_lead_d;
    prose_links_d;
    prose_bold_d;
    prose_counters_d;
    prose_bullets_d;
    prose_hr_d;
    prose_quotes_d;
    prose_quote_borders_d;
    prose_captions_d;
    prose_kbd_d;
    prose_kbd_shadows_d;
    prose_code_d;
    prose_pre_code_d;
    prose_pre_bg_d;
    prose_th_borders_d;
    prose_td_borders_d;
    prose_invert_body_d;
    prose_invert_headings_d;
    prose_invert_lead_d;
    prose_invert_links_d;
    prose_invert_bold_d;
    prose_invert_counters_d;
    prose_invert_bullets_d;
    prose_invert_hr_d;
    prose_invert_quotes_d;
    prose_invert_quote_borders_d;
    prose_invert_captions_d;
    prose_invert_kbd_d;
    prose_invert_kbd_shadows_d;
    prose_invert_code_d;
    prose_invert_pre_code_d;
    prose_invert_pre_bg_d;
    prose_invert_th_borders_d;
    prose_invert_td_borders_d;
  ]

let to_class = function
  | `Base -> "prose"
  | `Sm -> "prose-sm"
  | `Lg -> "prose-lg"
  | `Xl -> "prose-xl"
  | `Xl2 -> "prose-2xl"
  | `Gray -> "prose-gray"
  | `Slate -> "prose-slate"
  | `Zinc -> "prose-zinc"
  | `Neutral -> "prose-neutral"
  | `Stone -> "prose-stone"

(** Generate CSS rules for prose elements *)

(* Paragraph and lead styles are defined inline in base_prose_rules *)

(* Link styles are defined inline in base_prose_rules *)

(* Strong styles are defined inline in base_prose_rules *)

(* List styles are defined inline in base_prose_rules *)

(* Heading styles *)
let heading_rules base =
  [
    Css.rule ~selector:(where base h1)
      [
        Css.color (Css.Var prose_headings_v);
        Css.margin_top Zero;
        Css.margin_bottom (Em 0.888889);
        Css.font_size (Em 2.25);
        Css.font_weight (Weight 800.);
        Css.line_height (Num 1.11111);
      ];
    Css.rule
      ~selector:(where base (h1 ++ strong))
      [ Css.color Css.Inherit; Css.font_weight (Css.Weight 900.) ];
    Css.rule ~selector:(where base h2)
      [
        Css.color (Css.Var prose_headings_v);
        Css.margin_top (Em 2.0);
        Css.margin_bottom (Em 1.0);
        Css.font_size (Em 1.5);
        Css.font_weight (Weight 700.);
        Css.line_height (Num 1.33333);
      ];
    Css.rule
      ~selector:(where base (h2 ++ strong))
      [ Css.color Css.Inherit; Css.font_weight (Css.Weight 800.) ];
    Css.rule ~selector:(where base h3)
      [
        Css.color (Css.Var prose_headings_v);
        Css.margin_top (Em 1.6);
        Css.margin_bottom (Em 0.6);
        Css.font_size (Em 1.25);
        Css.font_weight (Weight 600.);
        Css.line_height (Num 1.6);
      ];
    Css.rule
      ~selector:(where base (h3 ++ strong))
      [ Css.color Inherit; Css.font_weight (Weight 700.) ];
    Css.rule ~selector:(where base h4)
      [
        Css.color (Css.Var prose_headings_v);
        Css.margin_top (Em 1.5);
        Css.margin_bottom (Em 0.5);
        Css.font_weight (Weight 600.);
        Css.line_height (Num 1.5);
      ];
    Css.rule
      ~selector:(where base (h4 ++ strong))
      [ Css.color Inherit; Css.font_weight (Weight 700.) ];
  ]

(* Horizontal rule styles are defined inline in base_prose_rules *)

(* Blockquote styles are defined inline in base_prose_rules *)

(* Media element styles *)
let media_rules base =
  [
    Css.rule ~selector:(where base img)
      [ Css.margin_top (Em 2.0); Css.margin_bottom (Em 2.0) ];
    Css.rule ~selector:(where base picture)
      [ Css.margin_top (Em 2.0); Css.margin_bottom (Em 2.0); Css.display Block ];
    Css.rule ~selector:(where base video)
      [ Css.margin_top (Em 2.0); Css.margin_bottom (Em 2.0) ];
  ]

(* Keyboard styles *)
let kbd_rules base =
  [
    Css.rule
      ~selector:(where base (Css.Selector.element "kbd"))
      [
        Css.color (Css.Var prose_kbd_v);
        Css.box_shadows
          [
            Css.Shadow
              {
                h_offset = Zero;
                v_offset = Zero;
                blur = Some Zero;
                spread = Some (Px 1.0);
                color = Some (Css.Var prose_kbd_shadows_v);
              };
            Css.Shadow
              {
                h_offset = Zero;
                v_offset = Px 3.0;
                blur = Some Zero;
                spread = None;
                color = Some (Css.Var prose_kbd_shadows_v);
              };
          ];
        Css.padding_top (Em 0.1875);
        Css.padding_inline_end (Em 0.375);
        Css.padding_bottom (Em 0.1875);
        border_radius (radius (Rem 0.3125));
        Css.padding_inline_start (Em 0.375);
        font_family Inherit;
        Css.font_size (Em 0.875);
        Css.font_weight (Weight 500.);
      ];
  ]

(* Pre code block styles *)
let pre_code_rules base =
  [
    Css.rule ~selector:(where base pre)
      [
        Css.color (Css.Var prose_pre_code_v);
        Css.background_color (Css.Var prose_pre_bg_v);
        Css.padding_top (Em 0.857143);
        Css.padding_inline_end (Em 1.14286);
        Css.padding_bottom (Em 0.857143);
        border_radius (radius (Rem 0.375));
        Css.margin_top (Em 1.71429);
        Css.margin_bottom (Em 1.71429);
        Css.padding_inline_start (Em 1.14286);
        Css.font_size (Em 0.875);
        Css.font_weight (Weight 400.);
        Css.line_height (Num 1.71429);
        overflow_x Auto;
      ];
    Css.rule ~selector:(where base pre_code)
      [
        Css.font_weight Inherit;
        Css.color Css.Inherit;
        Css.font_size Inherit;
        font_family Inherit;
        Css.line_height Inherit;
        Css.background_color (hex "#0000");
        border_width Zero;
        border_radius (radius Zero);
        padding [ Zero ];
      ];
    (* Pre code pseudo-elements come AFTER pre code rule *)
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             with_before (where base pre_code); with_after (where base pre_code);
           ])
      [ content None ];
  ]

(* Code styles *)
let code_rules base =
  [
    Css.rule ~selector:(where base code)
      [
        Css.color (Css.Var prose_code_v);
        Css.font_size (Em 0.875);
        Css.font_weight (Weight 600.);
      ];
    (* Code pseudo-elements come AFTER code rule to match Tailwind *)
    Css.rule
      ~selector:
        (Css.Selector.list
           [ with_before (where base code); with_after (where base code) ])
      [ content (String "`") ];
    (* Code inherits color in certain contexts *)
    Css.rule
      ~selector:
        (Css.Selector.list [ where base (a ++ code); where base (h1 ++ code) ])
      [ Css.color Inherit ];
    Css.rule
      ~selector:(where base (h2 ++ code))
      [ Css.color Inherit; Css.font_size (Em 0.875) ];
    Css.rule
      ~selector:(where base (h3 ++ code))
      [ Css.color Inherit; Css.font_size (Em 0.9) ];
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             where base (h4 ++ code);
             where base blockquote_code;
             where base thead_th_code;
           ])
      [ Css.color Inherit ];
  ]
  @ pre_code_rules base

(* Table styles *)
let table_rules base =
  [
    Css.rule ~selector:(where base table)
      [
        table_layout Auto;
        width (Pct 100.0);
        Css.margin_top (Em 2.0);
        Css.margin_bottom (Em 2.0);
        Css.font_size (Em 0.875);
        Css.line_height (Num 1.71429);
      ];
    Css.rule
      ~selector:(where base (Css.Selector.element "thead"))
      [
        Css.border_bottom_width (Px 1.);
        Css.border_bottom_color (Css.Var prose_th_borders_v);
      ];
    Css.rule ~selector:(where base thead_th)
      [
        Css.color (Css.Var prose_headings_v);
        Css.vertical_align Bottom;
        Css.padding_inline_end (Em 0.571429);
        Css.padding_bottom (Em 0.571429);
        Css.padding_inline_start (Em 0.571429);
        Css.font_weight (Weight 600.);
      ];
    Css.rule ~selector:(where base tbody_tr)
      [
        Css.border_bottom_width (Px 1.);
        Css.border_bottom_color (Css.Var prose_td_borders_v);
      ];
    Css.rule
      ~selector:(where base tbody_tr_last_child)
      [ border_bottom_width Zero ];
    Css.rule ~selector:(where base (tbody ++ td)) [ vertical_align Baseline ];
    Css.rule ~selector:(where base tfoot)
      [
        border_top_width (Px 1.); border_top_color (Css.Var prose_th_borders_v);
      ];
    Css.rule ~selector:(where base (tfoot ++ td)) [ vertical_align Top ];
    Css.rule
      ~selector:(where base (Css.Selector.list [ th; td ]))
      [ text_align Start ];
  ]

(* Figure and figcaption styles *)
let figure_rules base =
  [
    Css.rule
      ~selector:(where base Css.Selector.(combine figure Child universal))
      [ Css.margin_top Zero; Css.margin_bottom Zero ];
    Css.rule ~selector:(where base figcaption)
      [
        Css.color (Css.Var prose_captions_v);
        Css.margin_top (Em 0.857143);
        Css.font_size (Em 0.875);
        Css.line_height (Num 1.42857);
      ];
  ]

(* Nested list paragraph first/last child spacing *)
let nested_list_paragraph_rules base =
  [
    Css.rule
      ~selector:
        (where base
           (Css.Selector.combine
              (Css.Selector.class_ "prose")
              Child
              (ul >> li ++ p)))
      [ Css.margin_top (Em 0.75); Css.margin_bottom (Em 0.75) ];
    Css.rule
      ~selector:
        (where base
           (Css.Selector.combine
              (Css.Selector.class_ "prose")
              Child
              (ul >> (li >> (p && first_child)))))
      [ Css.margin_top (Em 1.25) ];
    Css.rule
      ~selector:
        (where base
           (Css.Selector.combine
              (Css.Selector.class_ "prose")
              Child
              (ul >> (li >> (p && last_child)))))
      [ Css.margin_bottom (Em 1.25) ];
    Css.rule
      ~selector:
        (where base
           (Css.Selector.combine
              (Css.Selector.class_ "prose")
              Child
              (ol >> (li >> (p && first_child)))))
      [ Css.margin_top (Em 1.25) ];
    Css.rule
      ~selector:
        (where base
           (Css.Selector.combine
              (Css.Selector.class_ "prose")
              Child
              (ol >> (li >> (p && last_child)))))
      [ Css.margin_bottom (Em 1.25) ];
  ]

(* List spacing rules *)
let list_spacing_rules base =
  [
    (* Picture img special handling *)
    Css.rule
      ~selector:(where base (picture >> img))
      [ Css.margin_top Zero; Css.margin_bottom Zero ];
    (* List item styles *)
    Css.rule ~selector:(where base li)
      [ Css.margin_top (Em 0.5); Css.margin_bottom (Em 0.5) ];
    Css.rule
      ~selector:
        (Css.Selector.list [ where base (ol >> li); where base (ul >> li) ])
      [ Css.padding_inline_start (Em 0.375) ];
  ]
  @ nested_list_paragraph_rules base
  @ [
      (* Nested lists *)
      Css.rule ~selector:(where base nested_lists)
        [ Css.margin_top (Em 0.75); Css.margin_bottom (Em 0.75) ];
      (* Definition lists *)
      Css.rule ~selector:(where base dl)
        [ Css.margin_top (Em 1.25); Css.margin_bottom (Em 1.25) ];
      Css.rule ~selector:(where base dd)
        [ Css.margin_top (Em 0.5); padding_inline_start (Em 1.625) ];
    ]

(* Table spacing rules *)
let table_spacing_rules base =
  [
    Css.rule
      ~selector:(where base (thead ++ (th && first_child)))
      [ Css.padding_inline_start Zero ];
    Css.rule
      ~selector:(where base (thead ++ (th && last_child)))
      [ Css.padding_inline_end Zero ];
    Css.rule
      ~selector:(where base (Css.Selector.list [ tbody ++ td; tfoot ++ td ]))
      [
        Css.padding_top (Em 0.571429);
        Css.padding_inline_end (Em 0.571429);
        Css.padding_bottom (Em 0.571429);
        Css.padding_inline_start (Em 0.571429);
      ];
    Css.rule
      ~selector:
        (where base
           (Css.Selector.list
              [ tbody ++ (td && first_child); tfoot ++ (td && first_child) ]))
      [ Css.padding_inline_start Zero ];
    Css.rule
      ~selector:
        (where base
           (Css.Selector.list
              [ tbody ++ (td && last_child); tfoot ++ (td && last_child) ]))
      [ Css.padding_inline_end Zero ];
  ]

(* Adjacent element spacing rules *)
let adjacent_element_spacing_rules base =
  [
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             where base (sibling hr);
             where base (sibling h2);
             where base (sibling h3);
             where base (sibling h4);
           ])
      [ Css.margin_top Zero ];
  ]

(* Figure and boundary rules *)
let figure_and_boundary_rules base =
  [
    Css.rule ~selector:(where base figure)
      [ Css.margin_top (Em 2.0); Css.margin_bottom (Em 2.0) ];
    (* First and last child margins *)
    Css.rule
      ~selector:
        (where base
           (Css.Selector.combine
              (Css.Selector.class_ "prose")
              Css.Selector.Child first_child))
      [ Css.margin_top Zero ];
    Css.rule
      ~selector:
        (where base
           (Css.Selector.combine
              (Css.Selector.class_ "prose")
              Css.Selector.Child last_child))
      [ Css.margin_bottom Zero ];
  ]

(* Additional list and spacing rules *)
let additional_rules base =
  list_spacing_rules base
  @ adjacent_element_spacing_rules base
  @ table_spacing_rules base
  @ figure_and_boundary_rules base

(* Paragraph and text rules *)
let paragraph_and_text_rules base =
  [
    (* Paragraphs *)
    Css.rule ~selector:(where base p)
      [ Css.margin_top (Em 1.25); Css.margin_bottom (Em 1.25) ];
    (* Lead text *)
    Css.rule
      ~selector:(where base (class_attr "lead"))
      [
        color (Css.Var prose_lead_v);
        margin_top (Em 1.2);
        margin_bottom (Em 1.2);
        font_size (Em 1.25);
        line_height (Num 1.6);
      ];
  ]

(* Link and strong rules *)
let link_and_strong_rules base =
  [
    (* Links *)
    Css.rule ~selector:(where base a)
      [
        color (Css.Var prose_links_v);
        Css.font_weight (Weight 500.);
        text_decoration
          (Shorthand
             {
               lines = [ Underline ];
               style = None;
               color = None;
               thickness = None;
             });
      ];
    (* Strong *)
    Css.rule ~selector:(where base strong)
      [ Css.color (Css.Var prose_bold_v); Css.font_weight (Weight 600.) ];
    (* Strong inherit rules - group multiple selectors *)
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             where base (Css.Selector.combine a Css.Selector.Descendant strong);
             where base
               (Css.Selector.combine blockquote Css.Selector.Descendant strong);
             where base
               (Css.Selector.combine
                  (Css.Selector.combine thead Css.Selector.Descendant th)
                  Css.Selector.Descendant strong);
           ])
      [ Css.color Inherit ];
  ]

(* Case-insensitive ol[type] rule *)
let ol_type_ci base letter style =
  Css.rule
    ~selector:(where base (Css.Selector.compound [ ol; type_attr letter ]))
    [ list_style_type style ]

(* Case-sensitive ol[type] rule *)
let ol_type_cs base letter style =
  let cs_attr = Css.Selector.attribute ~flag:Sensitive "type" (Exact letter) in
  Css.rule
    ~selector:(where base (Css.Selector.compound [ ol; cs_attr ]))
    [ list_style_type style ]

(* Ordered list type variant rules *)
let ol_type_variant_rules base =
  [
    ol_type_ci base "A" Upper_alpha;
    ol_type_ci base "a" Lower_alpha;
    ol_type_cs base "A" Upper_alpha;
    ol_type_cs base "a" Lower_alpha;
    ol_type_ci base "I" Upper_roman;
    ol_type_ci base "i" Lower_roman;
    ol_type_cs base "I" Upper_roman;
    ol_type_cs base "i" Lower_roman;
    ol_type_ci base "1" Decimal;
  ]

(* List marker rules *)
let list_marker_rules base =
  [
    Css.rule
      ~selector:
        (Css.Selector.compound
           [
             where base (Css.Selector.combine ol Css.Selector.Child li);
             Css.Selector.Marker;
           ])
      [ Css.color (Css.Var prose_counters_v); Css.font_weight (Weight 400.) ];
    Css.rule
      ~selector:
        (Css.Selector.compound
           [
             where base (Css.Selector.combine ul Css.Selector.Child li);
             Css.Selector.Marker;
           ])
      [ Css.color (Css.Var prose_bullets_v) ];
  ]

(* Lists with markers (markers come AFTER the ul rule like Tailwind) *)
let list_and_marker_rules base =
  [
    (* Lists *)
    Css.rule ~selector:(where base ol)
      [
        margin_top (Em 1.25);
        margin_bottom (Em 1.25);
        padding_inline_start (Em 1.625);
        list_style_type Decimal;
      ];
  ]
  @ ol_type_variant_rules base
  @ [
      Css.rule ~selector:(where base ul)
        [
          margin_top (Em 1.25);
          margin_bottom (Em 1.25);
          padding_inline_start (Em 1.625);
          list_style_type Disc;
        ];
    ]
  (* Markers come AFTER ul rule to match Tailwind *)
  @ list_marker_rules base

(* Blockquote and pseudo-element rules *)
let blockquote_rules base =
  [
    Css.rule ~selector:(where base blockquote)
      [
        color (Css.Var prose_quotes_v);
        border_inline_start_width (Rem 0.25);
        border_inline_start_color (Css.Var prose_quote_borders_v);
        quotes
          (Pairs
             [
               (* " and " - left/right double quotes *)
               ("\xe2\x80\x9c", "\xe2\x80\x9d");
               (* ' and ' - left/right single quotes *)
               ("\xe2\x80\x98", "\xe2\x80\x99");
             ]);
        margin_top (Em 1.6);
        margin_bottom (Em 1.6);
        padding_inline_start (Em 1.0);
        font_style Italic;
        Css.font_weight (Weight 500.);
      ];
    (* Blockquote pseudo-elements come AFTER blockquote rule *)
    Css.rule
      ~selector:
        (with_before
           (where base
              (Css.Selector.compound
                 [
                   Css.Selector.combine blockquote Css.Selector.Descendant p;
                   Css.Selector.First_of_type;
                 ])))
      [ content Open_quote ];
    Css.rule
      ~selector:
        (with_after
           (where base
              (Css.Selector.compound
                 [
                   Css.Selector.combine blockquote Css.Selector.Descendant p;
                   Css.Selector.Last_of_type;
                 ])))
      [ content Close_quote ];
  ]

(* Structural elements with blockquote pseudo-elements interleaved *)
let structural_element_rules base =
  [
    (* Definition terms *)
    Css.rule ~selector:(where base dt)
      [
        color (Css.Var prose_headings_v);
        margin_top (Em 1.25);
        Css.font_weight (Weight 600.);
      ];
    (* Horizontal rules *)
    Css.rule ~selector:(where base hr)
      [
        border_color (Css.Var prose_hr_v);
        border_top_width (Px 1.0);
        margin_top (Em 3.0);
        margin_bottom (Em 3.0);
      ];
  ]
  @ blockquote_rules base

(* Base prose rules - combines all element rules *)
let base_prose_rules () =
  let base = "prose" in
  let main_rule =
    Css.rule
      ~selector:(Css.Selector.class_ "prose")
      [ Css.color (Css.Var prose_body_v); Css.max_width (Ch 65.0) ]
  in
  let variables_rule =
    Css.rule
      ~selector:(Css.Selector.class_ "prose")
      (css_variables @ [ Css.font_size (Rem 1.0); Css.line_height (Num 1.75) ])
  in
  [ main_rule ]
  @ paragraph_and_text_rules base
  @ link_and_strong_rules base @ list_and_marker_rules base
  @ structural_element_rules base
  @ heading_rules base @ media_rules base @ kbd_rules base @ code_rules base
  @ table_rules base @ figure_rules base @ [ variables_rule ]
  @ additional_rules base

(* Configuration type for typography sizes *)
type size_config = {
  base_font_size : Css.length;
  base_line_height : float;
  p_margin_y : Css.length;
  lead_margin_top : Css.length;
  lead_margin_bottom : Css.length;
  lead_font_size : Css.length;
  lead_line_height : float;
  blockquote_margin_y : Css.length;
  blockquote_padding_start : Css.length;
  h1_margin_top : Css.length;
  h1_margin_bottom : Css.length;
  h1_font_size : Css.length;
  h1_line_height : float;
  h2_margin_top : Css.length;
  h2_margin_bottom : Css.length;
  h2_font_size : Css.length;
  h2_line_height : float;
  h3_margin_top : Css.length;
  h3_margin_bottom : Css.length;
  h3_font_size : Css.length;
  h3_line_height : float;
  h4_margin_top : Css.length;
  h4_margin_bottom : Css.length;
  h4_line_height : float;
  img_margin_y : Css.length;
  kbd_padding_y : Css.length;
  kbd_padding_x : Css.length;
  kbd_font_size : Css.length;
  kbd_border_radius : Css.length;
  code_font_size : Css.length;
  h2_code_font_size : Css.length;
  h3_code_font_size : Css.length;
  pre_padding_y : Css.length;
  pre_padding_x : Css.length;
  pre_border_radius : Css.length;
  pre_margin_top : Css.length;
  pre_margin_bottom : Css.length;
  pre_font_size : Css.length;
  pre_line_height : float;
  list_margin_y : Css.length;
  list_padding_start : Css.length;
  li_margin_y : Css.length;
  li_padding_start : Css.length;
  li_p_margin_y : Css.length;
  li_p_first_margin_top : Css.length;
  li_p_last_margin_bottom : Css.length;
  nested_list_margin_y : Css.length;
  dl_margin_y : Css.length;
  dt_margin_top : Css.length;
  dd_margin_top : Css.length;
  dd_padding_start : Css.length;
  hr_margin_y : Css.length;
  table_font_size : Css.length;
  table_line_height : float;
  thead_th_padding_x : Css.length;
  thead_th_padding_bottom : Css.length;
  tbody_td_padding_y : Css.length;
  tbody_td_padding_x : Css.length;
  figure_margin_y : Css.length;
  figcaption_margin_top : Css.length;
  figcaption_font_size : Css.length;
  figcaption_line_height : float;
}

(* Typography heading rules for size variants *)
let typography_heading_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:(selector ++ prose_where_element h1)
      [
        Css.margin_top c.h1_margin_top;
        Css.margin_bottom c.h1_margin_bottom;
        Css.font_size c.h1_font_size;
        Css.line_height (Num c.h1_line_height);
      ];
    Css.rule
      ~selector:(selector ++ prose_where_element h2)
      [
        Css.margin_top c.h2_margin_top;
        Css.margin_bottom c.h2_margin_bottom;
        Css.font_size c.h2_font_size;
        Css.line_height (Num c.h2_line_height);
      ];
    Css.rule
      ~selector:(selector ++ prose_where_element h3)
      [
        Css.margin_top c.h3_margin_top;
        Css.margin_bottom c.h3_margin_bottom;
        Css.font_size c.h3_font_size;
        Css.line_height (Num c.h3_line_height);
      ];
    Css.rule
      ~selector:(selector ++ prose_where_element h4)
      [
        Css.margin_top c.h4_margin_top;
        Css.margin_bottom c.h4_margin_bottom;
        Css.line_height (Num c.h4_line_height);
      ];
  ]

(* Typography nested list paragraph and definition list rules *)
let typography_list_nested_rules selector c =
  let open Selector in
  [
    (* Nested list paragraphs *)
    Css.rule
      ~selector:(prose_child_selector selector (ul >> li ++ p))
      [ Css.margin_top c.li_p_margin_y; Css.margin_bottom c.li_p_margin_y ];
    Css.rule
      ~selector:(prose_child_selector selector (ul >> li >> (p && first_child)))
      [ Css.margin_top c.li_p_first_margin_top ];
    Css.rule
      ~selector:(prose_child_selector selector (ul >> li >> (p && last_child)))
      [ Css.margin_bottom c.li_p_last_margin_bottom ];
    Css.rule
      ~selector:(prose_child_selector selector (ol >> li >> (p && first_child)))
      [ Css.margin_top c.li_p_first_margin_top ];
    Css.rule
      ~selector:(prose_child_selector selector (ol >> li >> (p && last_child)))
      [ Css.margin_bottom c.li_p_last_margin_bottom ];
    (* Nested lists *)
    Css.rule
      ~selector:(selector ++ prose_where_element nested_lists)
      [
        Css.margin_top c.nested_list_margin_y;
        Css.margin_bottom c.nested_list_margin_y;
      ];
    (* Definition lists *)
    Css.rule
      ~selector:(selector ++ prose_where_element dl)
      [ Css.margin_top c.dl_margin_y; Css.margin_bottom c.dl_margin_y ];
    Css.rule
      ~selector:(selector ++ prose_where_element dt)
      [ Css.margin_top c.dt_margin_top ];
    Css.rule
      ~selector:(selector ++ prose_where_element dd)
      [
        Css.margin_top c.dd_margin_top; padding_inline_start c.dd_padding_start;
      ];
  ]

(* Typography list rules for size variants *)
let typography_list_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             selector ++ prose_where_element ol;
             selector ++ prose_where_element ul;
           ])
      [
        Css.margin_top c.list_margin_y;
        Css.margin_bottom c.list_margin_y;
        Css.padding_inline_start c.list_padding_start;
      ];
    Css.rule
      ~selector:(selector ++ prose_where_element li)
      [ Css.margin_top c.li_margin_y; Css.margin_bottom c.li_margin_y ];
    (* List items with padding *)
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             selector ++ prose_where_element (ol >> li);
             selector ++ prose_where_element (ul >> li);
           ])
      [ Css.padding_inline_start c.li_padding_start ];
  ]
  @ typography_list_nested_rules selector c

(* Typography table body and footer cell rules *)
let typography_table_cell_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:
        (selector
        ++ prose_where_element (Css.Selector.list [ tbody ++ td; tfoot ++ td ])
        )
      [
        Css.padding_top c.tbody_td_padding_y;
        Css.padding_inline_end c.tbody_td_padding_x;
        Css.padding_bottom c.tbody_td_padding_y;
        Css.padding_inline_start c.tbody_td_padding_x;
      ];
    (* First and last table cells *)
    Css.rule
      ~selector:
        (selector
        ++ prose_where_element
             (Css.Selector.list
                [ tbody ++ (td && first_child); tfoot ++ (td && first_child) ])
        )
      [ Css.padding_inline_start Zero ];
    Css.rule
      ~selector:
        (selector
        ++ prose_where_element
             (Css.Selector.list
                [ tbody ++ (td && last_child); tfoot ++ (td && last_child) ]))
      [ Css.padding_inline_end Zero ];
  ]

(* Typography table rules for size variants *)
let typography_table_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:(selector ++ prose_where_element table)
      [
        Css.font_size c.table_font_size;
        Css.line_height (Num c.table_line_height);
      ];
    Css.rule
      ~selector:(selector ++ prose_where_element (thead ++ th))
      [
        Css.padding_inline_end c.thead_th_padding_x;
        Css.padding_bottom c.thead_th_padding_bottom;
        Css.padding_inline_start c.thead_th_padding_x;
      ];
    Css.rule
      ~selector:(selector ++ prose_where_element (thead ++ (th && first_child)))
      [ Css.padding_inline_start Zero ];
    Css.rule
      ~selector:(selector ++ prose_where_element (thead ++ (th && last_child)))
      [ Css.padding_inline_end Zero ];
  ]
  @ typography_table_cell_rules selector c

(* Typography figure and boundary rules for size variants *)
let typography_figure_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:(selector ++ prose_where_element figure)
      [ Css.margin_top c.figure_margin_y; Css.margin_bottom c.figure_margin_y ];
    Css.rule
      ~selector:
        (selector ++ prose_where_element (combine figure Child universal))
      [ Css.margin_top Zero; Css.margin_bottom Zero ];
    Css.rule
      ~selector:(selector ++ prose_where_element figcaption)
      [
        Css.margin_top c.figcaption_margin_top;
        Css.font_size c.figcaption_font_size;
        Css.line_height (Num c.figcaption_line_height);
      ];
    (* First and last child margins *)
    Css.rule
      ~selector:(prose_child_selector selector first_child)
      [ Css.margin_top Zero ];
    Css.rule
      ~selector:(prose_child_selector selector last_child)
      [ Css.margin_bottom Zero ];
  ]

(* Typography image and media rules for size variants *)
let typography_media_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             selector ++ prose_where_element img;
             selector ++ prose_where_element picture;
           ])
      [ Css.margin_top c.img_margin_y; Css.margin_bottom c.img_margin_y ];
    Css.rule
      ~selector:(selector ++ prose_where_element (picture >> img))
      [ Css.margin_top Zero; Css.margin_bottom Zero ];
    Css.rule
      ~selector:(selector ++ prose_where_element video)
      [ Css.margin_top c.img_margin_y; Css.margin_bottom c.img_margin_y ];
  ]

(* Typography code element rules for size variants *)
let typography_code_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:(selector ++ prose_where_element (element "kbd"))
      [
        Css.padding_top c.kbd_padding_y;
        Css.padding_inline_end c.kbd_padding_x;
        Css.padding_bottom c.kbd_padding_y;
        border_radius (radius c.kbd_border_radius);
        Css.padding_inline_start c.kbd_padding_x;
        Css.font_size c.kbd_font_size;
      ];
    Css.rule
      ~selector:(selector ++ prose_where_element code)
      [ Css.font_size c.code_font_size ];
    Css.rule
      ~selector:(selector ++ prose_where_element (h2 ++ code))
      [ Css.font_size c.h2_code_font_size ];
    Css.rule
      ~selector:(selector ++ prose_where_element (h3 ++ code))
      [ Css.font_size c.h3_code_font_size ];
    Css.rule
      ~selector:(selector ++ prose_where_element pre)
      [
        Css.padding_top c.pre_padding_y;
        Css.padding_inline_end c.pre_padding_x;
        Css.padding_bottom c.pre_padding_y;
        border_radius (radius c.pre_border_radius);
        Css.margin_top c.pre_margin_top;
        Css.margin_bottom c.pre_margin_bottom;
        Css.padding_inline_start c.pre_padding_x;
        Css.font_size c.pre_font_size;
        Css.line_height (Num c.pre_line_height);
      ];
  ]

(* Typography horizontal rule and following element rules *)
let typography_hr_rules selector c =
  let open Selector in
  [
    Css.rule
      ~selector:(selector ++ prose_where_element hr)
      [ Css.margin_top c.hr_margin_y; Css.margin_bottom c.hr_margin_y ];
    (* Following elements *)
    Css.rule
      ~selector:
        (Css.Selector.list
           [
             selector ++ prose_where_element (sibling hr);
             selector ++ prose_where_element (sibling h2);
             selector ++ prose_where_element (sibling h3);
             selector ++ prose_where_element (sibling h4);
           ])
      [ Css.margin_top Zero ];
  ]

(* Helper function to generate typography rules for different sizes *)
let typography_rules selector c =
  let open Selector in
  [
    (* Base rule *)
    Css.rule ~selector
      [
        Css.font_size c.base_font_size; Css.line_height (Num c.base_line_height);
      ];
    (* Paragraph *)
    Css.rule
      ~selector:(selector ++ prose_where_element p)
      [ Css.margin_top c.p_margin_y; Css.margin_bottom c.p_margin_y ];
    (* Lead paragraph *)
    Css.rule
      ~selector:(selector ++ prose_where_element (class_attr "lead"))
      [
        Css.margin_top c.lead_margin_top;
        Css.margin_bottom c.lead_margin_bottom;
        Css.font_size c.lead_font_size;
        Css.line_height (Num c.lead_line_height);
      ];
    (* Blockquote *)
    Css.rule
      ~selector:(selector ++ prose_where_element blockquote)
      [
        Css.margin_top c.blockquote_margin_y;
        Css.margin_bottom c.blockquote_margin_y;
        Css.padding_inline_start c.blockquote_padding_start;
      ];
  ]
  @ typography_heading_rules selector c
  @ typography_media_rules selector c
  @ typography_code_rules selector c
  @ typography_list_rules selector c
  @ typography_hr_rules selector c
  @ typography_table_rules selector c
  @ typography_figure_rules selector c

(* Size configuration for prose-sm *)
let sm_config =
  {
    base_font_size = Rem 0.875;
    base_line_height = 1.71429;
    p_margin_y = Em 1.14286;
    lead_margin_top = Em 0.888889;
    lead_margin_bottom = Em 0.888889;
    lead_font_size = Em 1.28571;
    lead_line_height = 1.55556;
    blockquote_margin_y = Em 1.33333;
    blockquote_padding_start = Em 1.11111;
    h1_margin_top = Zero;
    h1_margin_bottom = Em 0.8;
    h1_font_size = Em 2.14286;
    h1_line_height = 1.2;
    h2_margin_top = Em 1.6;
    h2_margin_bottom = Em 0.8;
    h2_font_size = Em 1.42857;
    h2_line_height = 1.4;
    h3_margin_top = Em 1.55556;
    h3_margin_bottom = Em 0.444444;
    h3_font_size = Em 1.28571;
    h3_line_height = 1.55556;
    h4_margin_top = Em 1.42857;
    h4_margin_bottom = Em 0.571429;
    h4_line_height = 1.42857;
    img_margin_y = Em 1.71429;
    kbd_padding_y = Em 0.142857;
    kbd_padding_x = Em 0.357143;
    kbd_font_size = Em 0.857143;
    kbd_border_radius = Rem 0.3125;
    code_font_size = Em 0.857143;
    h2_code_font_size = Em 0.9;
    h3_code_font_size = Em 0.888889;
    pre_padding_y = Em 0.666667;
    pre_padding_x = Em 1.0;
    pre_border_radius = Rem 0.25;
    pre_margin_top = Em 1.66667;
    pre_margin_bottom = Em 1.66667;
    pre_font_size = Em 0.857143;
    pre_line_height = 1.66667;
    list_margin_y = Em 1.14286;
    list_padding_start = Em 1.57143;
    li_margin_y = Em 0.285714;
    li_padding_start = Em 0.428571;
    li_p_margin_y = Em 0.571429;
    li_p_first_margin_top = Em 1.14286;
    li_p_last_margin_bottom = Em 1.14286;
    nested_list_margin_y = Em 0.571429;
    dl_margin_y = Em 1.14286;
    dt_margin_top = Em 1.14286;
    dd_margin_top = Em 0.285714;
    dd_padding_start = Em 1.57143;
    hr_margin_y = Em 2.85714;
    table_font_size = Em 0.857143;
    table_line_height = 1.5;
    thead_th_padding_x = Em 1.0;
    thead_th_padding_bottom = Em 0.666667;
    tbody_td_padding_y = Em 0.666667;
    tbody_td_padding_x = Em 1.0;
    figure_margin_y = Em 1.71429;
    figcaption_margin_top = Em 0.666667;
    figcaption_font_size = Em 0.857143;
    figcaption_line_height = 1.33333;
  }

(* Size configuration for prose-lg *)
let lg_config =
  {
    base_font_size = Rem 1.125;
    base_line_height = 1.77778;
    p_margin_y = Em 1.33333;
    lead_margin_top = Em 1.09091;
    lead_margin_bottom = Em 1.09091;
    lead_font_size = Em 1.22222;
    lead_line_height = 1.45455;
    blockquote_margin_y = Em 1.66667;
    blockquote_padding_start = Em 1.0;
    h1_margin_top = Zero;
    h1_margin_bottom = Em 0.833333;
    h1_font_size = Em 2.66667;
    h1_line_height = 1.0;
    h2_margin_top = Em 1.86667;
    h2_margin_bottom = Em 1.06667;
    h2_font_size = Em 1.66667;
    h2_line_height = 1.33333;
    h3_margin_top = Em 1.66667;
    h3_margin_bottom = Em 0.666667;
    h3_font_size = Em 1.33333;
    h3_line_height = 1.5;
    h4_margin_top = Em 1.77778;
    h4_margin_bottom = Em 0.444444;
    h4_line_height = 1.55556;
    img_margin_y = Em 1.77778;
    kbd_padding_y = Em 0.222222;
    kbd_padding_x = Em 0.444444;
    kbd_font_size = Em 0.888889;
    kbd_border_radius = Rem 0.3125;
    code_font_size = Em 0.888889;
    h2_code_font_size = Em 0.866667;
    h3_code_font_size = Em 0.875;
    pre_padding_y = Em 1.0;
    pre_padding_x = Em 1.5;
    pre_border_radius = Rem 0.375;
    pre_margin_top = Em 2.0;
    pre_margin_bottom = Em 2.0;
    pre_font_size = Em 0.888889;
    pre_line_height = 1.75;
    list_margin_y = Em 1.33333;
    list_padding_start = Em 1.55556;
    li_margin_y = Em 0.666667;
    li_padding_start = Em 0.444444;
    li_p_margin_y = Em 0.888889;
    li_p_first_margin_top = Em 1.33333;
    li_p_last_margin_bottom = Em 1.33333;
    nested_list_margin_y = Em 0.888889;
    dl_margin_y = Em 1.33333;
    dt_margin_top = Em 1.33333;
    dd_margin_top = Em 0.666667;
    dd_padding_start = Em 1.55556;
    hr_margin_y = Em 3.11111;
    table_font_size = Em 0.888889;
    table_line_height = 1.5;
    thead_th_padding_x = Em 0.75;
    thead_th_padding_bottom = Em 0.75;
    tbody_td_padding_y = Em 0.75;
    tbody_td_padding_x = Em 0.75;
    figure_margin_y = Em 1.77778;
    figcaption_margin_top = Em 1.0;
    figcaption_font_size = Em 0.888889;
    figcaption_line_height = 1.5;
  }

(* Size configuration for prose-xl *)
let xl_config =
  {
    base_font_size = Rem 1.25;
    base_line_height = 1.8;
    p_margin_y = Em 1.2;
    lead_margin_top = Em 1.0;
    lead_margin_bottom = Em 1.0;
    lead_font_size = Em 1.2;
    lead_line_height = 1.5;
    blockquote_margin_y = Em 1.6;
    blockquote_padding_start = Em 1.06667;
    h1_margin_top = Zero;
    h1_margin_bottom = Em 0.857143;
    h1_font_size = Em 2.8;
    h1_line_height = 1.0;
    h2_margin_top = Em 1.55556;
    h2_margin_bottom = Em 0.888889;
    h2_font_size = Em 1.8;
    h2_line_height = 1.11111;
    h3_margin_top = Em 1.6;
    h3_margin_bottom = Em 0.666667;
    h3_font_size = Em 1.5;
    h3_line_height = 1.33333;
    h4_margin_top = Em 1.8;
    h4_margin_bottom = Em 0.6;
    h4_line_height = 1.6;
    img_margin_y = Em 2.0;
    kbd_padding_y = Em 0.25;
    kbd_padding_x = Em 0.4;
    kbd_font_size = Em 0.9;
    kbd_border_radius = Rem 0.3125;
    code_font_size = Em 0.9;
    h2_code_font_size = Em 0.861111;
    h3_code_font_size = Em 0.9;
    pre_padding_y = Em 1.11111;
    pre_padding_x = Em 1.33333;
    pre_border_radius = Rem 0.5;
    pre_margin_top = Em 2.0;
    pre_margin_bottom = Em 2.0;
    pre_font_size = Em 0.9;
    pre_line_height = 1.77778;
    list_margin_y = Em 1.2;
    list_padding_start = Em 1.6;
    li_margin_y = Em 0.6;
    li_padding_start = Em 0.4;
    li_p_margin_y = Em 0.8;
    li_p_first_margin_top = Em 1.2;
    li_p_last_margin_bottom = Em 1.2;
    nested_list_margin_y = Em 0.8;
    dl_margin_y = Em 1.2;
    dt_margin_top = Em 1.2;
    dd_margin_top = Em 0.6;
    dd_padding_start = Em 1.6;
    hr_margin_y = Em 2.8;
    table_font_size = Em 0.9;
    table_line_height = 1.55556;
    thead_th_padding_x = Em 0.666667;
    thead_th_padding_bottom = Em 0.888889;
    tbody_td_padding_y = Em 0.888889;
    tbody_td_padding_x = Em 0.666667;
    figure_margin_y = Em 2.0;
    figcaption_margin_top = Em 1.0;
    figcaption_font_size = Em 0.9;
    figcaption_line_height = 1.55556;
  }

(* Size configuration for prose-2xl *)
let xl2_config =
  {
    base_font_size = Rem 1.5;
    base_line_height = 1.66667;
    p_margin_y = Em 1.33333;
    lead_margin_top = Em 1.06667;
    lead_margin_bottom = Em 1.06667;
    lead_font_size = Em 1.25;
    lead_line_height = 1.46667;
    blockquote_margin_y = Em 1.77778;
    blockquote_padding_start = Em 1.11111;
    h1_margin_top = Zero;
    h1_margin_bottom = Em 0.875;
    h1_font_size = Em 2.66667;
    h1_line_height = 1.0;
    h2_margin_top = Em 1.5;
    h2_margin_bottom = Em 0.833333;
    h2_font_size = Em 2.0;
    h2_line_height = 1.08333;
    h3_margin_top = Em 1.55556;
    h3_margin_bottom = Em 0.666667;
    h3_font_size = Em 1.5;
    h3_line_height = 1.22222;
    h4_margin_top = Em 1.66667;
    h4_margin_bottom = Em 0.666667;
    h4_line_height = 1.5;
    img_margin_y = Em 2.0;
    kbd_padding_y = Em 0.25;
    kbd_padding_x = Em 0.333333;
    kbd_font_size = Em 0.833333;
    kbd_border_radius = Rem 0.375;
    code_font_size = Em 0.833333;
    h2_code_font_size = Em 0.875;
    h3_code_font_size = Em 0.888889;
    pre_padding_y = Em 1.2;
    pre_padding_x = Em 1.6;
    pre_border_radius = Rem 0.5;
    pre_margin_top = Em 2.0;
    pre_margin_bottom = Em 2.0;
    pre_font_size = Em 0.833333;
    pre_line_height = 1.8;
    list_margin_y = Em 1.33333;
    list_padding_start = Em 1.58333;
    li_margin_y = Em 0.5;
    li_padding_start = Em 0.416667;
    li_p_margin_y = Em 0.833333;
    li_p_first_margin_top = Em 1.33333;
    li_p_last_margin_bottom = Em 1.33333;
    nested_list_margin_y = Em 0.666667;
    dl_margin_y = Em 1.33333;
    dt_margin_top = Em 1.33333;
    dd_margin_top = Em 0.5;
    dd_padding_start = Em 1.58333;
    hr_margin_y = Em 3.0;
    table_font_size = Em 0.833333;
    table_line_height = 1.4;
    thead_th_padding_x = Em 0.6;
    thead_th_padding_bottom = Em 0.8;
    tbody_td_padding_y = Em 0.8;
    tbody_td_padding_x = Em 0.6;
    figure_margin_y = Em 2.0;
    figcaption_margin_top = Em 1.0;
    figcaption_font_size = Em 0.833333;
    figcaption_line_height = 1.6;
  }

let sm_size_rules selector =
  typography_rules (Css.Selector.class_ selector) sm_config

let lg_size_rules selector =
  typography_rules (Css.Selector.class_ selector) lg_config

let xl_size_rules selector =
  typography_rules (Css.Selector.class_ selector) xl_config

let xl2_size_rules selector =
  typography_rules (Css.Selector.class_ selector) xl2_config

(* Helper to create declarations from a list of (var, value) pairs *)
let bind_prose_vars bindings =
  List.map (fun (var, value) -> Var.set var value) bindings

(* The two ways a palette reaches the sheet: as the prose colours themselves,
   and as the inverted set [.prose-invert] swaps in. *)
let normal_bindings p =
  bind_prose_vars
    [
      (prose_body_var, p.body);
      (prose_headings_var, p.headings);
      (prose_lead_var, p.lead);
      (prose_links_var, p.links);
      (prose_bold_var, p.bold);
      (prose_counters_var, p.counters);
      (prose_bullets_var, p.bullets);
      (prose_hr_var, p.hr);
      (prose_quotes_var, p.quotes);
      (prose_quote_borders_var, p.quote_borders);
      (prose_captions_var, p.captions);
      (prose_kbd_var, p.kbd);
      (prose_kbd_shadows_var, p.kbd_shadows);
      (prose_code_var, p.code);
      (prose_pre_code_var, p.pre_code);
      (prose_pre_bg_var, p.pre_bg);
      (prose_th_borders_var, p.th_borders);
      (prose_td_borders_var, p.td_borders);
    ]

let invert_bindings p =
  bind_prose_vars
    [
      (prose_invert_body_var, p.body);
      (prose_invert_headings_var, p.headings);
      (prose_invert_lead_var, p.lead);
      (prose_invert_links_var, p.links);
      (prose_invert_bold_var, p.bold);
      (prose_invert_counters_var, p.counters);
      (prose_invert_bullets_var, p.bullets);
      (prose_invert_hr_var, p.hr);
      (prose_invert_quotes_var, p.quotes);
      (prose_invert_quote_borders_var, p.quote_borders);
      (prose_invert_captions_var, p.captions);
      (prose_invert_kbd_var, p.kbd);
      (prose_invert_kbd_shadows_var, p.kbd_shadows);
      (prose_invert_code_var, p.code);
      (prose_invert_pre_code_var, p.pre_code);
      (prose_invert_pre_bg_var, p.pre_bg);
      (prose_invert_th_borders_var, p.th_borders);
      (prose_invert_td_borders_var, p.td_borders);
    ]

(* Helper to create color variable bindings for color themes - returns
   declarations *)
let color_theme_bindings theme_name =
  match theme_name with
  | "gray" -> normal_bindings gray_normal @ invert_bindings gray_invert
  | "slate" -> normal_bindings slate_normal @ invert_bindings slate_invert
  | "zinc" -> normal_bindings zinc_normal @ invert_bindings zinc_invert
  | "neutral" -> normal_bindings neutral_normal @ invert_bindings neutral_invert
  | "stone" -> normal_bindings stone_normal @ invert_bindings stone_invert
  | _ -> []

(* prose-invert remaps every --tw-prose-* to its --tw-prose-invert-*
   counterpart, the way Tailwind's [.prose-invert] does. *)
let invert_remap_bindings =
  normal_bindings
    {
      body = Css.Var (snd theme.invert_body);
      headings = Css.Var (snd theme.invert_headings);
      lead = Css.Var (snd theme.invert_lead);
      links = Css.Var (snd theme.invert_links);
      bold = Css.Var (snd theme.invert_bold);
      counters = Css.Var (snd theme.invert_counters);
      bullets = Css.Var (snd theme.invert_bullets);
      hr = Css.Var (snd theme.invert_hr);
      quotes = Css.Var (snd theme.invert_quotes);
      quote_borders = Css.Var (snd theme.invert_quote_borders);
      captions = Css.Var (snd theme.invert_captions);
      kbd = Css.Var (snd theme.invert_kbd);
      kbd_shadows = Css.Var (snd theme.invert_kbd_shadows);
      code = Css.Var (snd theme.invert_code);
      pre_code = Css.Var (snd theme.invert_pre_code);
      pre_bg = Css.Var (snd theme.invert_pre_bg);
      th_borders = Css.Var (snd theme.invert_th_borders);
      td_borders = Css.Var (snd theme.invert_td_borders);
    }

(* Accent colour themes (prose-orange, ...) only override the link colours,
   normal and inverted. Values taken from the Tailwind typography plugin. *)
let accent_color_bindings = function
  | "orange" ->
      bind_prose_vars
        [
          (prose_links_var, Css.oklch 64.6 0.222 41.116);
          (prose_invert_links_var, Css.oklch 70.5 0.213 47.604);
        ]
  | _ -> []

let to_css_rules variant =
  match variant with
  | `Base -> base_prose_rules ()
  | `Sm -> sm_size_rules "prose-sm"
  | `Lg -> lg_size_rules "prose-lg"
  | `Xl -> xl_size_rules "prose-xl"
  | `Xl2 -> xl2_size_rules "prose-2xl"
  | `Gray ->
      [
        Css.rule
          ~selector:(Css.Selector.class_ "prose-gray")
          (color_theme_bindings "gray");
      ]
  | `Slate ->
      [
        Css.rule
          ~selector:(Css.Selector.class_ "prose-slate")
          (color_theme_bindings "slate");
      ]
  | `Zinc ->
      [
        Css.rule
          ~selector:(Css.Selector.class_ "prose-zinc")
          (color_theme_bindings "zinc");
      ]
  | `Neutral ->
      [
        Css.rule
          ~selector:(Css.Selector.class_ "prose-neutral")
          (color_theme_bindings "neutral");
      ]
  | `Stone ->
      [
        Css.rule
          ~selector:(Css.Selector.class_ "prose-stone")
          (color_theme_bindings "stone");
      ]
  | `Invert ->
      [
        Css.rule
          ~selector:(Css.Selector.class_ "prose-invert")
          invert_remap_bindings;
      ]
  | `Orange ->
      [
        Css.rule
          ~selector:(Css.Selector.class_ "prose-orange")
          (accent_color_bindings "orange");
      ]

let pp = function
  | `Base -> "Base"
  | `Sm -> "Sm"
  | `Lg -> "Lg"
  | `Xl -> "Xl"
  | `Xl2 -> "Xl2"
  | `Gray -> "Gray"
  | `Slate -> "Slate"
  | `Zinc -> "Zinc"
  | `Neutral -> "Neutral"
  | `Stone -> "Stone"
  | `Invert -> "Invert"
  | `Orange -> "Orange"

(** Prose utility constructors *)
let prose_style variant =
  let rules = to_css_rules variant in
  Style.style ~rules:(Some rules) []

(** Generate complete prose stylesheet *)
let stylesheet () =
  (* Generate CSS for all prose variants *)
  let base_rules = to_css_rules `Base in
  let sm_rules = to_css_rules `Sm in
  let lg_rules = to_css_rules `Lg in
  let xl_rules = to_css_rules `Xl in
  let xl2_rules = to_css_rules `Xl2 in
  let gray_rules = to_css_rules `Gray in
  let slate_rules = to_css_rules `Slate in

  (* Combine all rules *)
  let all_rules =
    List.concat
      [
        base_rules;
        sm_rules;
        lg_rules;
        xl_rules;
        xl2_rules;
        gray_rules;
        slate_rules;
      ]
  in
  (* Return raw rules; caller composes into a stylesheet if needed *)
  all_rules

let niet = Style.style ~rules:(Some []) []

(* Handler for prose size variants - priority 2 *)
module Handler = struct
  (** Local prose utility type for size variants *)
  type t =
    | Prose
    | Prose_sm
    | Prose_lg
    | Prose_xl
    | Prose_2xl
    | Lead
    | Not_prose

  (** Extensible variant for prose utilities *)

  (** Priority for prose size utilities *)
  let name = "prose"

  let priority _ = 2 (* Same as margin to allow interleaving by suborder *)

  (** {1 Utility Conversion Functions} *)

  let to_style _theme = function
    | Prose -> prose_style `Base
    | Prose_sm -> prose_style `Sm
    | Prose_lg -> prose_style `Lg
    | Prose_xl -> prose_style `Xl
    | Prose_2xl -> prose_style `Xl2
    | Lead -> niet
    | Not_prose -> niet

  let to_class = function
    | Prose -> "prose"
    | Prose_sm -> "prose-sm"
    | Prose_lg -> "prose-lg"
    | Prose_xl -> "prose-xl"
    | Prose_2xl -> "prose-2xl"
    | Lead -> "lead"
    | Not_prose -> "not-prose"

  let of_class _theme class_name =
    let parts = Parse.split_class class_name in
    match parts with
    | [ "prose" ] -> Ok Prose
    | [ "prose"; "sm" ] -> Ok Prose_sm
    | [ "prose"; "lg" ] -> Ok Prose_lg
    | [ "prose"; "xl" ] -> Ok Prose_xl
    | [ "prose"; "2xl" ] -> Ok Prose_2xl
    | [ "lead" ] -> Ok Lead
    | [ "not"; "prose" ] -> Ok Not_prose
    | _ -> Error (`Msg "Not a prose size utility")

  let suborder = function
    (* Prose sorts among the priority-2 margin utilities exactly where Tailwind
       puts it: after the inline-end margins (me-*, ~4.2-4.3M) and before the
       top margins (mt-*, negatives at 5.0M). *)
    | Prose -> 4650000
    | Prose_2xl -> 4650001 (* Alphabetical: 2xl before lg, sm, xl *)
    | Prose_lg -> 4650002
    | Prose_sm -> 4650003
    | Prose_xl -> 4650004
    | Lead -> 4650005
    | Not_prose -> 4650006

  let examples = []
end

(* Handler for prose color variants - priority 21 *)
module Color_Handler = struct
  type t = [ `Gray | `Slate | `Zinc | `Neutral | `Stone | `Invert | `Orange ]
  (** The prose colour variants, as {!prose_style} names them. *)

  (** Extensible variant for prose color utilities *)

  (** Priority for prose color utilities *)
  let name = "prose-color"

  let priority _ = 25 (* Same as color utilities *)

  (** {1 Utility Conversion Functions} *)

  let to_style _theme variant = prose_style variant

  let to_class = function
    | `Gray -> "prose-gray"
    | `Slate -> "prose-slate"
    | `Zinc -> "prose-zinc"
    | `Neutral -> "prose-neutral"
    | `Stone -> "prose-stone"
    | `Invert -> "prose-invert"
    | `Orange -> "prose-orange"

  let of_class _theme class_name =
    let parts = Parse.split_class class_name in
    match parts with
    | [ "prose"; "gray" ] -> Ok `Gray
    | [ "prose"; "slate" ] -> Ok `Slate
    | [ "prose"; "zinc" ] -> Ok `Zinc
    | [ "prose"; "neutral" ] -> Ok `Neutral
    | [ "prose"; "stone" ] -> Ok `Stone
    | [ "prose"; "invert" ] -> Ok `Invert
    | [ "prose"; "orange" ] -> Ok `Orange
    | _ -> Error (`Msg "Not a prose color utility")

  let suborder = function
    (* Prose color utilities come after text colors (20000-29999). The gray
       ramps sort alphabetically by class name, matching Tailwind's order (gray,
       neutral, slate, stone, zinc), then invert and orange. *)
    | `Gray -> 30000
    | `Neutral -> 30001
    | `Slate -> 30002
    | `Stone -> 30003
    | `Zinc -> 30004
    | `Invert -> 30005
    | `Orange -> 30006

  let examples = []
end

module Utility_factory = Utility.Make (Handler)
(** Register both handlers with Utility system *)

module Color_utility = Utility.Make (Color_Handler)

(** Public API *)
let utility = Utility_factory.v

let color_utility = Color_utility.v
let prose = utility Handler.Prose
let prose_sm = utility Handler.Prose_sm
let prose_lg = utility Handler.Prose_lg
let prose_xl = utility Handler.Prose_xl
let prose_2xl = utility Handler.Prose_2xl
let prose_gray = color_utility `Gray
let prose_slate = color_utility `Slate
let prose_zinc = color_utility `Zinc
let prose_neutral = color_utility `Neutral
let prose_stone = color_utility `Stone
let prose_invert = color_utility `Invert
let prose_orange = color_utility `Orange
let prose_lead = utility Handler.Lead
let not_prose = utility Handler.Not_prose