import type { DesignToken, DesignTokensConfig } from '@shoptet/tokens';
import { ColorDesignToken, isDesignToken, ShadowDesignToken } from '@shoptet/tokens';
import { objectEntries, objectFromEntries } from '@shoptet/utils';
import { createPathSelector } from '@shoptet/utils';

import { Scales } from './scales';

const selector = createPathSelector(Scales);

function select<P extends string>(
  path: P extends Parameters<typeof selector>[0] ? P : never
): ReturnType<typeof selector> {
  const reference = selector(path);

  if (typeof reference === 'object' && isDesignToken(reference)) {
    return {
      ...reference,
      $reference: path,
    } satisfies DesignToken;
  } else {
    return reference;
  }
}

const presetSteps = {
  light: {
    // base (canonical 1000)
    // low (canonical 850) anchor-drift +75 ✓consensus×3
    // medium (canonical 700) anchor-drift -25
    // strong (canonical 450) anchor-drift +50
    // full (canonical 0)
    background: {
      base: {
        default: 1000,
      },
      low: {
        default: 950,
        hovered: 875,
      },
      medium: {
        default: 725,
        hovered: 650,
        selected: 725,
      },
      high: {
        default: 675,
        hovered: 525,
      },
      xHigh: {
        default: 575,
        hovered: 400,
      },
      strong: {
        default: 325,
      },
      full: {
        default: 0,
      },
    },
    // base (canonical 1000)
    // low (canonical 850) anchor-drift +50
    // medium (canonical 650) anchor-drift +25
    // high (canonical 500) anchor-drift +75
    // strong (canonical 450) anchor-drift -125
    // full (canonical 0)
    foreground: {
      base: {
        default: 1000,
      },
      low: {
        default: 875,
      },
      medium: {
        default: 725,
        hovered: 600,
        selected: 725,
      },
      high: {
        default: 600,
        hovered: 525,
      },
      strong: {
        default: 475,
        hovered: 550,
      },
      full: {
        default: 0,
        hovered: 425,
      },
    },
  },
  // Dark steps are the inverse of light steps: dark = 1000 - light.
  dark: {
    background: {
      base: {
        default: 0,
      },
      low: {
        default: 50,
        hovered: 125,
      },
      medium: {
        default: 275,
        hovered: 350,
        selected: 275,
      },
      high: {
        default: 325,
        hovered: 475,
      },
      xHigh: {
        default: 425,
        hovered: 600,
      },
      strong: {
        default: 675,
      },
      full: {
        default: 1000,
      },
    },
    foreground: {
      base: {
        default: 0,
      },
      low: {
        default: 125,
      },
      medium: {
        default: 275,
        hovered: 400,
        selected: 275,
      },
      high: {
        default: 400,
        hovered: 475,
      },
      strong: {
        default: 525,
        hovered: 450,
      },
      full: {
        default: 1000,
        hovered: 575,
      },
    },
  },
  dimensionUtilities: {
    none: 0,
    line: 1,
    xxs: 2,
    xs: 4,
    sm: 8,
    md: 12,
    lg: 16,
    xl: 24,
    '2xl': 32,
    '3xl': 40,
    '4xl': 48,
  },
} as const;

export const colors = {
  light: {
    background: {
      blue: {
        low: {
          default: select(`swatch/blue/${presetSteps.light.background.low.default}`),
        },
      },
      controls: {
        low: {
          default: select(`swatch/controls/${presetSteps.light.background.low.default}`),
          hovered: select(`swatch/controls/${presetSteps.light.background.low.hovered}`),
        },
        medium: {
          default: select(`swatch/controls/${presetSteps.light.background.medium.default}`),
          hovered: select(`swatch/controls/${presetSteps.light.background.medium.hovered}`),
          selected: select(`swatch/controls/${presetSteps.light.background.medium.selected}`),
        },
      },
      main: {
        medium: {
          default: select(`swatch/main/${presetSteps.light.background.medium.default}`),
          hovered: select(`swatch/main/${presetSteps.light.background.medium.hovered}`),
          selected: select(`swatch/main/${presetSteps.light.background.medium.selected}`),
        },
      },
      neutral: {
        full: {
          default: select(`swatch/neutral/${presetSteps.light.background.full.default}`),
        },
        strong: {
          default: select(`swatch/neutral/${presetSteps.light.background.strong.default}`),
        },
        // StatusIndicator neutral intent.
        xHigh: {
          default: select(`swatch/neutral/525`),
          hovered: select(`swatch/neutral/${presetSteps.light.background.xHigh.hovered}`),
        },
        high: {
          default: select(`swatch/neutral/${presetSteps.light.background.high.default}`),
        },
        low: {
          default: select(`swatch/neutral/${presetSteps.light.background.low.default}`),
          hovered: select(`swatch/neutral/${presetSteps.light.background.low.hovered}`),
        },
        base: {
          default: select(`swatch/neutral/${presetSteps.light.background.base.default}`),
        },
      },
      notice: {
        medium: {
          default: select(`swatch/notice/${presetSteps.light.background.medium.default}`),
        },
        high: {
          default: select(`swatch/notice/${presetSteps.light.background.high.default}`),
          hovered: select(`swatch/notice/${presetSteps.light.background.high.hovered}`),
        },
      },
      informative: {
        low: {
          default: select(`swatch/informative/${presetSteps.light.background.low.default}`),
        },
        high: {
          default: select(`swatch/informative/${presetSteps.light.background.high.default}`),
        },
        xHigh: {
          default: select(`swatch/informative/${presetSteps.light.background.xHigh.default}`),
        },
        strong: {
          default: select(`swatch/informative/${presetSteps.light.background.xHigh.default}`),
        },
      },
      success: {
        low: {
          default: select(`swatch/success/${presetSteps.light.background.low.default}`),
        },
        high: {
          default: select(`swatch/success/${presetSteps.light.background.high.default}`),
        },
        xHigh: {
          hovered: select(`swatch/success/${presetSteps.light.background.xHigh.hovered}`),
        },
      },
      warning: {
        low: {
          default: select(`swatch/warning/${presetSteps.light.background.low.default}`),
        },
        medium: {
          default: select(`swatch/warning/${presetSteps.light.background.medium.default}`),
        },
        high: {
          default: select(`swatch/warning/${presetSteps.light.background.high.default}`),
          hovered: select(`swatch/warning/${presetSteps.light.background.high.hovered}`),
        },
      },
      critical: {
        low: {
          default: select(`swatch/critical/${presetSteps.light.background.low.default}`),
        },
        high: {
          default: select(`swatch/critical/${presetSteps.light.background.high.default}`),
          hovered: select(`swatch/critical/${presetSteps.light.background.high.hovered}`),
        },
        xHigh: {
          default: select(`swatch/critical/${presetSteps.light.background.xHigh.default}`),
          hovered: select(`swatch/critical/${presetSteps.light.background.xHigh.hovered}`),
        },
      },
    },
    foreground: {
      blue: {
        medium: {
          default: select(`swatch/blue/${presetSteps.light.foreground.medium.default}`),
        },
      },
      green: {
        medium: {
          default: select(`swatch/green/${presetSteps.light.foreground.medium.default}`),
        },
      },
      controls: {
        medium: {
          default: select(`swatch/controls/${presetSteps.light.foreground.medium.default}`),
          hovered: select(`swatch/controls/${presetSteps.light.foreground.medium.hovered}`),
          selected: select(`swatch/controls/${presetSteps.light.foreground.medium.selected}`),
        },
      },
      notice: {
        medium: {
          default: select(`swatch/notice/${presetSteps.light.foreground.medium.default}`),
        },
      },
      warning: {
        medium: {
          default: select(`swatch/warning/${presetSteps.light.foreground.medium.default}`),
        },
      },
      main: {
        medium: {
          default: select(`swatch/main/${presetSteps.light.foreground.medium.default}`),
          hovered: select(`swatch/main/${presetSteps.light.foreground.medium.hovered}`),
        },
      },
      critical: {
        high: {
          default: select(`swatch/critical/${presetSteps.light.foreground.high.default}`),
          hovered: select(`swatch/critical/${presetSteps.light.foreground.high.hovered}`),
        },
      },
      success: {
        high: {
          default: select(`swatch/success/${presetSteps.light.foreground.high.default}`),
        },
      },
      superadmin: {
        high: {
          default: select(`swatch/superadmin/${presetSteps.light.foreground.high.default}`),
          hovered: select(`swatch/superadmin/${presetSteps.light.foreground.high.hovered}`),
        },
      },
      links: {
        strong: {
          default: select(`swatch/links/${presetSteps.light.foreground.strong.default}`),
          hovered: select(`swatch/links/${presetSteps.light.foreground.strong.hovered}`),
        },
      },
      neutral: {
        low: {
          default: select(`swatch/neutral/${presetSteps.light.foreground.low.default}`),
        },
        medium: {
          default: select(`swatch/neutral/${presetSteps.light.foreground.medium.default}`),
        },
        high: {
          default: select(`swatch/neutral/${presetSteps.light.foreground.high.default}`),
        },
        full: {
          default: select(`swatch/neutral/${presetSteps.light.foreground.full.default}`),
          hovered: select(`swatch/neutral/${presetSteps.light.foreground.full.hovered}`),
        },
      },
      informative: {
        strong: {
          default: select(`swatch/informative/${presetSteps.light.foreground.strong.default}`),
        },
      },
    },
    border: {
      controls: {
        low: {
          default: select(`swatch/controls/${presetSteps.light.foreground.low.default}`),
        },
        medium: {
          default: select(`swatch/controls/${presetSteps.light.foreground.medium.default}`),
          hovered: select(`swatch/controls/${presetSteps.light.foreground.medium.hovered}`),
          selected: select(`swatch/controls/${presetSteps.light.foreground.medium.selected}`),
        },
      },
      success: {
        high: {
          default: select(`swatch/success/${presetSteps.light.foreground.high.default}`),
        },
      },
      main: {
        medium: {
          default: select(`swatch/main/${presetSteps.light.foreground.medium.default}`),
          hovered: select(`swatch/main/${presetSteps.light.foreground.medium.hovered}`),
        },
      },
      neutral: {
        low: {
          default: select(`swatch/neutral/${presetSteps.light.foreground.low.default}`),
        },
        medium: {
          default: select(`swatch/neutral/${presetSteps.light.foreground.medium.default}`),
        },
        high: {
          default: select(`swatch/neutral/${presetSteps.light.foreground.high.default}`),
        },
        full: {
          // default: path(`swatch/neutral/${config.light.foreground.full.default}`),
          hovered: select(`swatch/neutral/${presetSteps.light.foreground.full.hovered}`),
        },
      },
      notice: {
        medium: {
          default: select(`swatch/notice/${presetSteps.light.foreground.medium.default}`),
        },
      },
      blue: {
        medium: {
          default: select(`swatch/blue/${presetSteps.light.foreground.medium.default}`),
        },
      },
      warning: {
        medium: {
          default: select(`swatch/warning/${presetSteps.light.foreground.medium.default}`),
        },
      },
      critical: {
        high: {
          default: select(`swatch/critical/${presetSteps.light.foreground.high.default}`),
          hovered: select(`swatch/critical/${presetSteps.light.foreground.high.hovered}`),
        },
      },
      links: {
        strong: {
          default: select(`swatch/links/${presetSteps.light.foreground.strong.default}`),
        },
      },
      informative: {
        strong: {
          default: select(`swatch/informative/${presetSteps.light.foreground.strong.default}`),
        },
      },
    },
    shadow: {
      focus: ShadowDesignToken({
        offsetX: select('dimension/0'),
        offsetY: select('dimension/0'),
        blur: select('dimension/2'),
        spread: select('dimension/0'),
        color: ColorDesignToken(select(`swatch/controls/${presetSteps.light.background.medium.default}`)),
      }),
      high: {
        soft: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/12'),
          blur: select('dimension/32'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.light.background.full.default}`),
            select('blend/15'),
          ]),
        }),
        sharp: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/4'),
          blur: select('dimension/10'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.light.background.full.default}`),
            select('blend/5'),
          ]),
        }),
      },
      medium: {
        soft: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/3'),
          blur: select('dimension/7'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.light.background.full.default}`),
            select('blend/10'),
          ]),
        }),
        sharp: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/-3'),
          blur: select('dimension/7'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.light.background.full.default}`),
            select('blend/10'),
          ]),
        }),
      },
      low: {
        soft: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/2'),
          blur: select('dimension/6'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.light.background.full.default}`),
            select('blend/5'),
          ]),
        }),
        sharp: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/1'),
          blur: select('dimension/2'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.light.background.full.default}`),
            select('blend/5'),
          ]),
        }),
      },
    },
    blend: {
      solid: select('blend/100'),
      low: select('blend/70'),
      medium: select('blend/60'),
      high: select('blend/30'),
      strong: select('blend/10'),
      full: select('blend/0'),
    },
  },
  dark: {
    background: {
      blue: {
        low: {
          default: select(`swatch/blue/${presetSteps.dark.background.low.default}`),
        },
      },
      controls: {
        low: {
          default: select(`swatch/controls/${presetSteps.dark.background.low.default}`),
          hovered: select(`swatch/controls/${presetSteps.dark.background.low.hovered}`),
        },
        medium: {
          default: select(`swatch/controls/${presetSteps.dark.background.medium.default}`),
          hovered: select(`swatch/controls/${presetSteps.dark.background.medium.hovered}`),
          selected: select(`swatch/controls/${presetSteps.dark.background.medium.selected}`),
        },
      },
      main: {
        medium: {
          default: select(`swatch/main/${presetSteps.dark.background.medium.default}`),
          hovered: select(`swatch/main/${presetSteps.dark.background.medium.hovered}`),
          selected: select(`swatch/main/${presetSteps.dark.background.medium.selected}`),
        },
      },
      neutral: {
        full: {
          default: select(`swatch/neutral/${presetSteps.dark.background.full.default}`),
        },
        strong: {
          default: select(`swatch/neutral/${presetSteps.dark.background.strong.default}`),
        },
        // StatusIndicator neutral intent — fixed across themes.
        xHigh: {
          default: select(`swatch/neutral/525`),
        },
        high: {
          default: select(`swatch/neutral/${presetSteps.dark.background.high.default}`),
        },
        low: {
          default: select(`swatch/neutral/${presetSteps.dark.background.low.default}`),
          hovered: select(`swatch/neutral/${presetSteps.dark.background.low.hovered}`),
        },
        base: {
          default: select(`swatch/neutral/${presetSteps.dark.background.base.default}`),
        },
      },
      notice: {
        medium: {
          default: select(`swatch/notice/${presetSteps.dark.background.medium.default}`),
        },
        high: {
          default: select(`swatch/notice/${presetSteps.dark.background.high.default}`),
        },
      },
      informative: {
        low: {
          default: select(`swatch/informative/${presetSteps.dark.background.low.default}`),
        },
        high: {
          default: select(`swatch/informative/${presetSteps.dark.background.high.default}`),
        },
        xHigh: {
          default: select(`swatch/informative/${presetSteps.dark.background.xHigh.default}`),
        },
      },
      success: {
        low: {
          default: select(`swatch/success/${presetSteps.dark.background.low.default}`),
        },
        high: {
          default: select(`swatch/success/${presetSteps.dark.background.high.default}`),
        },
      },
      warning: {
        low: {
          default: select(`swatch/warning/${presetSteps.dark.background.low.default}`),
        },
        medium: {
          default: select(`swatch/warning/${presetSteps.dark.background.medium.default}`),
        },
        high: {
          default: select(`swatch/warning/${presetSteps.dark.background.high.default}`),
        },
      },
      critical: {
        low: {
          default: select(`swatch/critical/${presetSteps.dark.background.low.default}`),
        },
        high: {
          default: select(`swatch/critical/${presetSteps.dark.background.high.default}`),
          hovered: select(`swatch/critical/${presetSteps.dark.background.high.hovered}`),
        },
        xHigh: {
          default: select(`swatch/critical/${presetSteps.dark.background.xHigh.default}`),
        },
      },
    },
    foreground: {
      blue: {
        medium: {
          default: select(`swatch/blue/${presetSteps.dark.foreground.medium.default}`),
        },
      },
      green: {
        medium: {
          default: select(`swatch/green/${presetSteps.dark.foreground.medium.default}`),
        },
      },
      controls: {
        medium: {
          default: select(`swatch/controls/${presetSteps.dark.foreground.medium.default}`),
          hovered: select(`swatch/controls/${presetSteps.dark.foreground.medium.hovered}`),
          selected: select(`swatch/controls/${presetSteps.dark.foreground.medium.selected}`),
        },
      },
      notice: {
        medium: {
          default: select(`swatch/notice/${presetSteps.dark.foreground.medium.default}`),
        },
      },
      warning: {
        medium: {
          default: select(`swatch/warning/${presetSteps.dark.foreground.medium.default}`),
        },
      },
      main: {
        medium: {
          default: select(`swatch/main/${presetSteps.dark.foreground.medium.default}`),
          hovered: select(`swatch/main/${presetSteps.dark.foreground.medium.hovered}`),
        },
      },
      critical: {
        high: {
          default: select(`swatch/critical/${presetSteps.dark.foreground.high.default}`),
          hovered: select(`swatch/critical/${presetSteps.dark.foreground.high.hovered}`),
        },
      },
      success: {
        high: {
          default: select(`swatch/success/${presetSteps.dark.foreground.high.default}`),
        },
      },
      superadmin: {
        high: {
          default: select(`swatch/superadmin/${presetSteps.dark.foreground.high.default}`),
          hovered: select(`swatch/superadmin/${presetSteps.dark.foreground.high.hovered}`),
        },
      },
      links: {
        strong: {
          default: select(`swatch/links/${presetSteps.dark.foreground.strong.default}`),
          hovered: select(`swatch/links/${presetSteps.dark.foreground.strong.hovered}`),
        },
      },
      neutral: {
        low: {
          default: select(`swatch/neutral/${presetSteps.dark.foreground.low.default}`),
        },
        medium: {
          default: select(`swatch/neutral/${presetSteps.dark.foreground.medium.default}`),
        },
        high: {
          default: select(`swatch/neutral/${presetSteps.dark.foreground.high.default}`),
        },
        full: {
          default: select(`swatch/neutral/${presetSteps.dark.foreground.full.default}`),
          hovered: select(`swatch/neutral/${presetSteps.dark.foreground.full.hovered}`),
        },
      },
      informative: {
        strong: {
          default: select(`swatch/informative/${presetSteps.dark.foreground.strong.default}`),
        },
      },
    },
    border: {
      controls: {
        low: {
          default: select(`swatch/controls/${presetSteps.dark.foreground.low.default}`),
        },
        medium: {
          default: select(`swatch/controls/${presetSteps.dark.foreground.medium.default}`),
          hovered: select(`swatch/controls/${presetSteps.dark.foreground.medium.hovered}`),
          selected: select(`swatch/controls/${presetSteps.dark.foreground.medium.selected}`),
        },
      },
      success: {
        high: {
          default: select(`swatch/success/${presetSteps.dark.foreground.high.default}`),
        },
      },
      main: {
        medium: {
          default: select(`swatch/main/${presetSteps.dark.foreground.medium.default}`),
          hovered: select(`swatch/main/${presetSteps.dark.foreground.medium.hovered}`),
        },
      },
      neutral: {
        low: {
          default: select(`swatch/neutral/${presetSteps.dark.foreground.low.default}`),
        },
        medium: {
          default: select(`swatch/neutral/${presetSteps.dark.foreground.medium.default}`),
        },
        high: {
          default: select(`swatch/neutral/${presetSteps.dark.foreground.high.default}`),
        },
        full: {
          // default: path(`swatch/neutral/${config.light.foreground.full.default}`),
          hovered: select(`swatch/neutral/${presetSteps.dark.foreground.full.hovered}`),
        },
      },
      notice: {
        medium: {
          default: select(`swatch/notice/${presetSteps.dark.foreground.medium.default}`),
        },
      },
      blue: {
        medium: {
          default: select(`swatch/blue/${presetSteps.dark.foreground.medium.default}`),
        },
      },
      warning: {
        medium: {
          default: select(`swatch/warning/${presetSteps.dark.foreground.medium.default}`),
        },
      },
      critical: {
        high: {
          default: select(`swatch/critical/${presetSteps.dark.foreground.high.default}`),
          hovered: select(`swatch/critical/${presetSteps.dark.foreground.high.hovered}`),
        },
      },
      links: {
        strong: {
          default: select(`swatch/links/${presetSteps.dark.foreground.strong.default}`),
        },
      },
      informative: {
        strong: {
          default: select(`swatch/informative/${presetSteps.dark.foreground.strong.default}`),
        },
      },
    },
    shadow: {
      down: ShadowDesignToken({
        offsetX: select('dimension/0'),
        offsetY: select('dimension/3'),
        blur: select('dimension/7'),
        spread: select('dimension/0'),
        color: ColorDesignToken([
          select(`swatch/neutral/${presetSteps.dark.background.full.default}`),
          select('blend/10'),
        ]),
      }),
      focus: ShadowDesignToken({
        offsetX: select('dimension/0'),
        offsetY: select('dimension/0'),
        blur: select('dimension/2'),
        spread: select('dimension/0'),
        color: ColorDesignToken(select(`swatch/controls/${presetSteps.dark.background.medium.default}`)),
      }),
      up: ShadowDesignToken({
        offsetX: select('dimension/0'),
        offsetY: select('dimension/-3'),
        blur: select('dimension/7'),
        spread: select('dimension/0'),
        color: ColorDesignToken([
          select(`swatch/neutral/${presetSteps.dark.background.full.default}`),
          select('blend/10'),
        ]),
      }),
      high: {
        primary: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/12'),
          blur: select('dimension/32'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.dark.background.full.default}`),
            select('blend/15'),
          ]),
        }),
        secondary: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/4'),
          blur: select('dimension/10'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.dark.background.full.default}`),
            select('blend/5'),
          ]),
        }),
      },
      low: {
        primary: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/2'),
          blur: select('dimension/6'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.dark.background.full.default}`),
            select('blend/5'),
          ]),
        }),
        secondary: ShadowDesignToken({
          offsetX: select('dimension/0'),
          offsetY: select('dimension/1'),
          blur: select('dimension/2'),
          spread: select('dimension/0'),
          color: ColorDesignToken([
            select(`swatch/neutral/${presetSteps.dark.background.full.default}`),
            select('blend/5'),
          ]),
        }),
      },
    },
    blend: {
      solid: select('blend/100'),
      low: select('blend/70'),
      medium: select('blend/50'),
      high: select('blend/30'),
      strong: select('blend/10'),
      full: select('blend/0'),
    },
  },
} satisfies DesignTokensConfig;

const utilitySpacing = objectFromEntries(
  objectEntries(presetSteps.dimensionUtilities).map(([key, value]) => [key, select(`dimension/${value}`)] as const)
);

export const dimensions = {
  default: {
    screen: {
      width: {
        default: select('dimension/0'),
        sm: select('dimension/576'),
        md: select('dimension/768'),
        lg: select('dimension/992'),
        xl: select('dimension/1024'),
        xxl: select('dimension/1400'),
      },
    },
    tweak: {
      0: select('dimension/0'),
      100: select('dimension/0.1'),
      125: select('dimension/0.125'),
      200: select('dimension/0.2'),
      250: select('dimension/0.25'),
      300: select('dimension/0.3'),
      333: select('dimension/0.333333'),
      400: select('dimension/0.4'),
      500: select('dimension/0.5'),
      600: select('dimension/0.6'),
      666: select('dimension/0.666666'),
      700: select('dimension/0.7'),
      750: select('dimension/0.75'),
      800: select('dimension/0.8'),
      900: select('dimension/0.9'),
      1000: select('dimension/1'),
      2000: select('dimension/2'),
      3000: select('dimension/3'),
      4000: select('dimension/4'),
      5000: select('dimension/5'),
      6000: select('dimension/6'),
      7000: select('dimension/7'),
      neg7000: select('dimension/-7'),
      neg6000: select('dimension/-6'),
      neg5000: select('dimension/-5'),
      neg4000: select('dimension/-4'),
      neg3000: select('dimension/-3'),
      neg2000: select('dimension/-2'),
      neg1000: select('dimension/-1'),
      neg900: select('dimension/-0.9'),
      neg800: select('dimension/-0.8'),
      neg750: select('dimension/-0.75'),
      neg700: select('dimension/-0.7'),
      neg666: select('dimension/-0.666666'),
      neg600: select('dimension/-0.6'),
      neg500: select('dimension/-0.5'),
      neg400: select('dimension/-0.4'),
      neg333: select('dimension/-0.333333'),
      neg300: select('dimension/-0.3'),
      neg250: select('dimension/-0.25'),
      neg200: select('dimension/-0.2'),
      neg125: select('dimension/-0.125'),
      neg100: select('dimension/-0.1'),
    },
    gap: utilitySpacing,
    padding: utilitySpacing,
    margin: utilitySpacing,
    borderRadius: {
      ...utilitySpacing,
      // Themeable corners; defaults mirror the historical hardcoded values.
      button: select('dimension/0'),
      formField: select('dimension/0'),
      checkboxField: select('dimension/3'),
    },
    borderWidth: utilitySpacing,
    offset: utilitySpacing,
    size: {
      ...utilitySpacing,
      // The form field's CONTENT height; consumers add the two border widths,
      // which keeps the historical 26px box on a scale step.
      formField: select('dimension/24'),
    },
    elevation: {
      default: select('elevation/1'),
      overlay: select('elevation/999'),
      sidebar: select('elevation/1003'),
      header: select('elevation/1100'),
      modal: select('elevation/11000'),
      loader: select('elevation/12000'),
    },
  },
  sm: {},
} as const;

export const typography = {
  default: {
    fontFamily: {
      icons: select('fontFamily/icons'),
      numbers: select('fontFamily/default'),
      display: select('fontFamily/accent'),
      headline: select('fontFamily/accent'),
      title: select('fontFamily/accent'),
      body: select('fontFamily/default'),
      strong: select('fontFamily/default'),
      label: select('fontFamily/default'),
      controls: select('fontFamily/default'),
      navigation: select('fontFamily/default'),
      caption: select('fontFamily/default'),
      monospace: select('fontFamily/monospace'),
    },
    fontSize: {
      numbers: {
        large: select('fontSize/60'),
        medium: select('fontSize/36'),
        small: select('fontSize/24'),
      },
      display: {
        large: select('fontSize/56'),
        medium: select('fontSize/48'),
        small: select('fontSize/40'),
      },
      headline: {
        h1: select('fontSize/26'),
        h2: select('fontSize/22'),
        h3: select('fontSize/18'),
        h4: select('fontSize/16'),
        h5: select('fontSize/12'),
      },
      title: {
        large: select('fontSize/16'),
        medium: select('fontSize/14'),
        small: select('fontSize/12'),
      },
      label: {
        large: select('fontSize/16'),
        medium: select('fontSize/14'),
        small: select('fontSize/12'),
      },
      controls: {
        large: select('fontSize/16'),
        medium: select('fontSize/12'),
        small: select('fontSize/12'),
      },
      navigation: {
        large: select('fontSize/16'),
        medium: select('fontSize/14'),
        small: select('fontSize/12'),
      },
      body: {
        large: select('fontSize/14'),
        medium: select('fontSize/12'),
        small: select('fontSize/10'),
      },
      strong: {
        large: select('fontSize/14'),
        medium: select('fontSize/12'),
        small: select('fontSize/10'),
      },
      caption: {
        large: select('fontSize/16'),
        medium: select('fontSize/14'),
        small: select('fontSize/12'),
      },
      monospace: {
        large: select('fontSize/16'),
        medium: select('fontSize/14'),
        small: select('fontSize/12'),
      },
    },
    lineHeight: {
      numbers: {
        large: select('lineHeight/72'),
        medium: select('lineHeight/42') /* Original: 36 * 1.2 = 43.2 */,
        small: select('lineHeight/28') /* Original: 24 * 1.2 = 28.8 */,
      },
      display: {
        large: select('lineHeight/56'),
        medium: select('lineHeight/48'),
        small: select('lineHeight/40'),
      },
      headline: {
        h1: select('lineHeight/32'),
        h2: select('lineHeight/28') /* Original: 22px * 1.2727273 = 28px */,
        h3: select('lineHeight/24') /* Original: 18px * 1.2777778 = 23px */,
        h4: select('lineHeight/24') /* Original: 16px * 1.5 = 24px */,
        h5: select('lineHeight/14') /* Original: 12px * 1.1666667 = 14px */,
      },
      title: {
        large: select('lineHeight/24'),
        medium: select('lineHeight/20'),
        small: select('lineHeight/16'),
      },
      label: {
        large: select('lineHeight/24'),
        medium: select('lineHeight/20'),
        small: select('lineHeight/18'),
      },
      controls: {
        large: select('lineHeight/24') /* Original: 1.5 * 16 = 24 */,
        medium: select('lineHeight/24') /* Original: 2 * 12 = 24 */,
        small: select('lineHeight/16') /* Original: 1.3333333 * 12 = 16 */,
      },
      navigation: {
        large: select('lineHeight/24'),
        medium: select('lineHeight/20'),
        small: select('lineHeight/16'),
      },
      body: {
        large: select('lineHeight/22') /* Original: 14 * 1.5714286 = 22 */,
        medium: select('lineHeight/18') /* Original: 12 * 1.5 = 18 */,
        small: select('lineHeight/16') /* Original: 10 * 1.6 = 16 */,
      },
      strong: {
        large: select('lineHeight/22'),
        medium: select('lineHeight/18'),
        small: select('lineHeight/16'),
      },
      caption: {
        large: select('lineHeight/24'),
        medium: select('lineHeight/20'),
        small: select('lineHeight/16'),
      },
      monospace: {
        large: select('lineHeight/24'),
        medium: select('lineHeight/20'),
        small: select('lineHeight/16'),
      },
    },
    fontWeight: {
      numbers: {
        large: select('fontWeight/700'),
        medium: select('fontWeight/700'),
        small: select('fontWeight/400'),
      },
      display: {
        large: select('fontWeight/500'),
        medium: select('fontWeight/500'),
        small: select('fontWeight/500'),
      },
      headline: {
        h1: select('fontWeight/400'),
        h2: select('fontWeight/400'),
        h3: select('fontWeight/400'),
        h4: select('fontWeight/400'),
        h5: select('fontWeight/400'),
      },
      title: {
        large: select('fontWeight/700'),
        medium: select('fontWeight/700'),
        small: select('fontWeight/700'),
      },
      label: {
        large: select('fontWeight/400'),
        medium: select('fontWeight/400'),
        small: select('fontWeight/400'),
      },
      controls: {
        large: select('fontWeight/400'),
        medium: select('fontWeight/400'),
        small: select('fontWeight/400'),
      },
      navigation: {
        large: {
          default: select('fontWeight/400'),
          selected: select('fontWeight/700'),
        },
        medium: {
          default: select('fontWeight/400'),
          selected: select('fontWeight/700'),
        },
        small: {
          default: select('fontWeight/400'),
          selected: select('fontWeight/700'),
        },
      },
      body: {
        large: select('fontWeight/400'),
        medium: select('fontWeight/400'),
        small: select('fontWeight/400'),
      },
      strong: {
        large: select('fontWeight/700'),
        medium: select('fontWeight/700'),
        small: select('fontWeight/700'),
      },
      caption: {
        large: select('fontWeight/400'),
        medium: select('fontWeight/400'),
        small: select('fontWeight/400'),
      },
      monospace: {
        large: select('fontWeight/400'),
        medium: select('fontWeight/400'),
        small: select('fontWeight/400'),
      },
    },
    letterSpacing: {
      numbers: {
        large: select('letterSpacing/0'),
        medium: select('letterSpacing/0'),
        small: select('letterSpacing/0'),
      },
      display: {
        large: select('letterSpacing/0'),
        medium: select('letterSpacing/0'),
        small: select('letterSpacing/0'),
      },
      headline: {
        h1: select('letterSpacing/0'),
        h2: select('letterSpacing/0'),
        h3: select('letterSpacing/0'),
        h4: select('letterSpacing/0'),
        h5: select('letterSpacing/0'),
      },
      title: {
        large: select('letterSpacing/0'),
        medium: select('letterSpacing/0'),
        small: select('letterSpacing/0'),
      },
      label: {
        large: select('letterSpacing/0.1'),
        medium: select('letterSpacing/0.1'),
        small: select('letterSpacing/0.1'),
      },
      controls: {
        large: select('letterSpacing/0.4'),
        medium: select('letterSpacing/0.4'),
        small: select('letterSpacing/0.4'),
      },
      navigation: {
        large: select('letterSpacing/0.1'),
        medium: select('letterSpacing/0.1'),
        small: select('letterSpacing/0.1'),
      },
      body: {
        large: select('letterSpacing/0.16') /* Original: 0.15 */,
        medium: select('letterSpacing/0.1') /* Original: 0.1 */,
        small: select('letterSpacing/0.06') /* Original: 0.05 */,
      },
      strong: {
        large: select('letterSpacing/0.16') /* Original: 0.15 */,
        medium: select('letterSpacing/0.1') /* Original: 0.1 */,
        small: select('letterSpacing/0.06') /* Original: 0.05 */,
      },
      caption: {
        large: select('letterSpacing/0.1'),
        medium: select('letterSpacing/0.1'),
        small: select('letterSpacing/0.1'),
      },
      monospace: {
        large: select('letterSpacing/0'),
        medium: select('letterSpacing/0'),
        small: select('letterSpacing/0'),
      },
    },
    fontStyle: {
      italic: select('fontStyle/italic'),
      normal: select('fontStyle/normal'),
    },
  },
  sm: {
    fontSize: {
      headline: {
        h1: select('fontSize/36'),
      },
    },
    lineHeight: {
      headline: {
        h1: select('fontSize/46') /* Original: 36px * 1.2777778 = 46px */,
      },
    },
    fontWeight: {
      headline: {
        h1: select('fontWeight/400'),
      },
    },
    letterSpacing: {
      headline: {
        h1: select('letterSpacing/0'),
      },
    },
  },
} satisfies DesignTokensConfig;