@zentrades-ui/tokens 0.1.0

package/src/constants.ts

@@ -0,0 +1,758 @@
+/**
+ * Token Constants
+ * Exported as named constants for use in vanilla-extract CSS files
+ * These match the structure from zenith/src/ui/tokens
+ */
+
+// ============================================================================
+// SPACING TOKENS
+// ============================================================================
+
+export const SPACING_STEPS = [
+  1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 26, 28, 32, 36, 40, 48, 56, 64, 72,
+  80, 88, 96, 104, 112, 120, 220,
+] as const;
+
+export type SpacingStep = (typeof SPACING_STEPS)[number];
+export type SpacingToken = `${SpacingStep}`;
+
+export const pxToRem = (px: number): string => `${px / 16}rem`;
+
+export const SPACING_UNITS = Object.fromEntries(
+  SPACING_STEPS.map((step) => [`${step}`, step])
+) as Record<SpacingToken, SpacingStep>;
+
+export const SPACING_TOKENS = Object.fromEntries(
+  SPACING_STEPS.map((step) => {
+    const key = `${step}` as SpacingToken;
+    return [key, pxToRem(SPACING_UNITS[key])];
+  })
+) as Record<SpacingToken, string>;
+
+export const SEMANTIC_SPACING = {
+  none: "0",
+  "2xs": SPACING_TOKENS["2"],
+  xs: SPACING_TOKENS["4"],
+  sm: SPACING_TOKENS["8"],
+  md: SPACING_TOKENS["12"],
+  lg: SPACING_TOKENS["16"],
+  xl: SPACING_TOKENS["24"],
+  "2xl": SPACING_TOKENS["32"],
+  "3xl": SPACING_TOKENS["40"],
+  "4xl": SPACING_TOKENS["48"],
+  "5xl": SPACING_TOKENS["56"],
+  "6xl": SPACING_TOKENS["64"],
+  "7xl": SPACING_TOKENS["72"],
+  "8xl": SPACING_TOKENS["80"],
+  "9xl": SPACING_TOKENS["88"],
+  "10xl": SPACING_TOKENS["96"],
+  "11xl": SPACING_TOKENS["104"],
+  "12xl": SPACING_TOKENS["112"],
+  section: SPACING_TOKENS["72"],
+  page: SPACING_TOKENS["96"],
+  container: SPACING_TOKENS["120"],
+} as const;
+
+export type SemanticSpacing = keyof typeof SEMANTIC_SPACING;
+
+// ============================================================================
+// COLOR TOKENS
+// ============================================================================
+
+export const COLORS = {
+  brand: {
+    100: "#fcdde0",
+    200: "#f8bbc2",
+    300: "#f599a3",
+    400: "#f17785",
+    500: "#ee5566",
+    600: "#be4452",
+    700: "#8f333d",
+    800: "#5f2229",
+    900: "#301114",
+  },
+  secondaryBrand: {
+    50: "#EFF8FF",
+    100: "#cde6f9",
+    200: "#9ccef4",
+    300: "#6ab5ee",
+    400: "#399de9",
+    500: "#0784e3",
+    600: "#066ab6",
+    700: "#044f88",
+    800: "#03355b",
+    900: "#011a2d",
+  },
+  blue: {
+    25: "#f3f6ff",
+    100: "#cfdaff",
+    200: "#9eb4ff",
+    300: "#6e8fff",
+    400: "#3d69ff",
+    500: "#0d44ff",
+    600: "#0a36cc",
+    700: "#082999",
+    800: "#051b66",
+    900: "#030e33",
+  },
+  purple: {
+    25: "#F9ECFF",
+    100: "#e2d1ff",
+    200: "#c6a3ff",
+    300: "#a975ff",
+    400: "#8d47ff",
+    450: "#ab00f5",
+    500: "#7019ff",
+    600: "#5a14cc",
+    700: "#430f99",
+    800: "#2d0a66",
+    900: "#160533",
+  },
+  violet: {
+    100: "#f4d1ff",
+    200: "#eaa2ff",
+    300: "#df74ff",
+    400: "#d545ff",
+    500: "#ca17ff",
+    600: "#a212cc",
+    700: "#790e99",
+    800: "#510966",
+    900: "#280533",
+  },
+  red: {
+    25: "#fff2f2",
+    100: "#fecccc",
+    200: "#fd9999",
+    300: "#fc6666",
+    400: "#fb3333",
+    500: "#fa0000",
+    600: "#c80000",
+    700: "#960000",
+    800: "#640000",
+    900: "#320000",
+  },
+  pink: {
+    100: "#ffcce7",
+    200: "#ff99cf",
+    300: "#ff66b8",
+    400: "#ff33a0",
+    500: "#ff0088",
+    600: "#cc006d",
+    700: "#990052",
+    800: "#660036",
+    900: "#33001b",
+  },
+  orange: {
+    25: "#fff8f2",
+    100: "#ffe4cc",
+    200: "#ffc999",
+    300: "#ffad66",
+    400: "#ff9233",
+    500: "#ff7700",
+    600: "#cc5f00",
+    700: "#994700",
+    800: "#663000",
+    900: "#331800",
+  },
+  yellow: {
+    100: "#fff4cc",
+    200: "#ffea99",
+    300: "#ffdf66",
+    400: "#ffd533",
+    500: "#ffca00",
+    600: "#cca200",
+    700: "#997900",
+    800: "#665100",
+    900: "#332800",
+  },
+  green: {
+    25: "#f2fbf3",
+    100: "#ccefd1",
+    200: "#99dea3",
+    300: "#66ce75",
+    400: "#33bd47",
+    500: "#00ad19",
+    600: "#008a14",
+    700: "#00680f",
+    800: "#00450a",
+    900: "#002305",
+  },
+  teal: {
+    100: "#ccfaf9",
+    200: "#99f5f3",
+    300: "#66f0ee",
+    400: "#33ebe8",
+    500: "#00e6e2",
+    600: "#00b8b5",
+    700: "#008a88",
+    800: "#005c5a",
+    900: "#002e2d",
+  },
+  cyan: {
+    25: "#f2fbff",
+    50: "#effeff",
+    100: "#ccefff",
+    200: "#99dfff",
+    300: "#66ceff",
+    400: "#33beff",
+    500: "#00aeff",
+    600: "#008bcc",
+    650: "#007d84",
+    700: "#006899",
+    800: "#004666",
+    900: "#002333",
+  },
+  neutral: {
+    25: "#F7F8F8",
+    50: "#f0f1f1",
+    100: "#e2e2e2",
+    150: "#d3d4d4",
+    200: "#c4c5c6",
+    250: "#b5b7b8",
+    300: "#a7a8a9",
+    350: "#989a9b",
+    400: "#898b8d",
+    450: "#7a7d7e",
+    500: "#6c6e70",
+    550: "#616365",
+    600: "#56585a",
+    650: "#4b4d4f",
+    700: "#414243",
+    750: "#363738",
+    800: "#2b2c2d",
+    850: "#202122",
+    900: "#161616",
+    950: "#0b0b0b",
+  },
+  primary: {
+    black: "#000000",
+    white: "#ffffff",
+    black50: "rgba(0, 0, 0, 0.50)",
+    white50: "rgba(255, 255, 255, 0.50)",
+  },
+} as const;
+
+export const themedColorVars = {
+  // Contents
+  contentPrimary: { light: COLORS.neutral[950], dark: COLORS.primary.white },
+  contentSecondary: { light: COLORS.neutral[800], dark: COLORS.neutral[100] },
+  contentTertiary: { light: COLORS.neutral[600], dark: COLORS.neutral[300] },
+  contentQuaternary: { light: COLORS.neutral[400], dark: COLORS.neutral[500] },
+  contentDefaultWhite: {
+    light: COLORS.primary.white,
+    dark: COLORS.primary.white,
+  },
+  contentPrimaryInverse: {
+    light: COLORS.primary.white,
+    dark: COLORS.neutral[950],
+  },
+  contentSecondaryInverse: {
+    light: COLORS.neutral[100],
+    dark: COLORS.neutral[800],
+  },
+  contentTertiaryInverse: {
+    light: COLORS.neutral[300],
+    dark: COLORS.neutral[600],
+  },
+  contentDisabled: { light: COLORS.neutral[250], dark: COLORS.neutral[700] },
+  contentBrand: { light: COLORS.brand[500], dark: COLORS.brand[500] },
+  contentSecondaryBrand: {
+    light: COLORS.secondaryBrand[500],
+    dark: COLORS.secondaryBrand[500],
+  },
+  contentLink: { light: COLORS.blue[500], dark: COLORS.blue[400] },
+  contentLinkHover: { light: COLORS.blue[600], dark: COLORS.blue[300] },
+  contentLinkPressed: { light: COLORS.blue[700], dark: COLORS.blue[200] },
+  contentInfo: { light: COLORS.blue[500], dark: COLORS.blue[400] },
+  contentInfoBold: { light: COLORS.blue[600], dark: COLORS.blue[300] },
+  contentNotice: { light: COLORS.orange[500], dark: COLORS.orange[400] },
+  contentNoticeBold: { light: COLORS.orange[700], dark: COLORS.orange[300] },
+  contentNegative: { light: COLORS.red[500], dark: COLORS.red[400] },
+  contentNegativeBold: { light: COLORS.red[700], dark: COLORS.red[300] },
+  contentPositive: { light: COLORS.green[500], dark: COLORS.green[400] },
+  contentPositiveBold: { light: COLORS.green[700], dark: COLORS.green[200] },
+  contentAttention: { light: COLORS.purple[450], dark: COLORS.purple[300] },
+  contentActive: { light: COLORS.cyan[650], dark: COLORS.cyan[200] },
+
+  // Backgrounds
+  backgroundPrimary: { light: COLORS.primary.white, dark: COLORS.neutral[950] },
+  backgroundSecondary: { light: COLORS.neutral[25], dark: COLORS.neutral[900] },
+  backgroundHover: { light: COLORS.neutral[100], dark: COLORS.neutral[800] },
+  backgroundPressed: { light: COLORS.neutral[100], dark: COLORS.neutral[700] },
+  backgroundSelected: { light: COLORS.brand[100], dark: COLORS.brand[700] },
+  backgroundSecondarySelected: {
+    light: COLORS.secondaryBrand[100],
+    dark: COLORS.secondaryBrand[800],
+  },
+  backgroundDisabled: { light: COLORS.neutral[50], dark: COLORS.neutral[800] },
+  backgroundBrand: { light: COLORS.brand[500], dark: COLORS.brand[400] },
+  backgroundBrandHover: { light: COLORS.brand[600], dark: COLORS.brand[300] },
+  backgroundBrandPressed: { light: COLORS.brand[700], dark: COLORS.brand[200] },
+  backgroundSecondaryBrand: {
+    light: COLORS.secondaryBrand[500],
+    dark: COLORS.secondaryBrand[400],
+  },
+  backgroundSecondaryBrandHover: {
+    light: COLORS.secondaryBrand[600],
+    dark: COLORS.secondaryBrand[300],
+  },
+  backgroundSecondaryBrandPressed: {
+    light: COLORS.secondaryBrand[700],
+    dark: COLORS.secondaryBrand[200],
+  },
+  backgroundInfo: { light: COLORS.blue[500], dark: COLORS.blue[400] },
+  backgroundInfoSubtle: { light: COLORS.blue[25], dark: COLORS.blue[900] },
+  backgroundNotice: { light: COLORS.orange[500], dark: COLORS.orange[400] },
+  backgroundNoticeSubtle: { light: COLORS.orange[25], dark: COLORS.orange[900] },
+  backgroundNegative: { light: COLORS.red[500], dark: COLORS.red[400] },
+  backgroundNegativeHover: { light: COLORS.red[600], dark: COLORS.red[300] },
+  backgroundNegativePressed: { light: COLORS.red[700], dark: COLORS.red[200] },
+  backgroundNegativeSubtle: { light: COLORS.red[25], dark: COLORS.red[900] },
+  backgroundPositive: { light: COLORS.green[500], dark: COLORS.green[400] },
+  backgroundPositiveSubtle: { light: COLORS.green[25], dark: COLORS.green[900] },
+  backgroundInverse: { light: COLORS.neutral[900], dark: COLORS.primary.white },
+  backgroundInverseHover: { light: COLORS.neutral[800], dark: COLORS.neutral[50] },
+  backgroundAttention: { light: COLORS.purple[25], dark: COLORS.purple[900] },
+  backgroundActive: { light: COLORS.cyan[50], dark: COLORS.cyan[900] },
+  backgroundSecondaryBrandSubtle: {
+    light: COLORS.secondaryBrand[50],
+    dark: COLORS.secondaryBrand[50],
+  },
+
+  // Borders
+  borderPrimary: { light: COLORS.neutral[600], dark: COLORS.neutral[400] },
+  borderSecondary: { light: COLORS.neutral[400], dark: COLORS.neutral[600] },
+  borderTertiary: { light: COLORS.neutral[200], dark: COLORS.neutral[800] },
+  borderQuaternary: { light: COLORS.neutral[100], dark: COLORS.neutral[900] },
+  borderDisabled: { light: COLORS.neutral[150], dark: COLORS.neutral[700] },
+  borderBrand: { light: COLORS.brand[500], dark: COLORS.brand[400] },
+  borderSecondaryBrand: {
+    light: COLORS.secondaryBrand[500],
+    dark: COLORS.secondaryBrand[400],
+  },
+  borderInverse: { light: COLORS.primary.white, dark: COLORS.neutral[900] },
+  borderFocus: { light: COLORS.blue[500], dark: COLORS.blue[400] },
+  borderInfo: { light: COLORS.blue[500], dark: COLORS.blue[400] },
+  borderNotice: { light: COLORS.orange[500], dark: COLORS.orange[400] },
+  borderNegative: { light: COLORS.red[500], dark: COLORS.red[400] },
+  borderPositive: { light: COLORS.green[500], dark: COLORS.green[400] },
+  borderMono: { light: COLORS.neutral[900], dark: COLORS.primary.white },
+  borderAttention: { light: COLORS.purple[450], dark: COLORS.purple[400] },
+  borderActive: { light: COLORS.cyan[650], dark: COLORS.cyan[400] },
+
+  // Surfaces
+  surfaceL0: { light: COLORS.primary.white, dark: COLORS.neutral[950] },
+  surfaceL1: { light: COLORS.primary.white, dark: COLORS.neutral[900] },
+  surfaceL2: { light: COLORS.primary.white, dark: COLORS.neutral[850] },
+  surfaceL3: { light: COLORS.primary.white, dark: COLORS.neutral[800] },
+  surfaceL4: { light: COLORS.primary.white, dark: COLORS.neutral[750] },
+  surfaceL5: { light: COLORS.primary.white, dark: COLORS.neutral[700] },
+  surfaceL6: { light: COLORS.primary.white, dark: COLORS.neutral[650] },
+
+  // Overlays
+  overlay50: { light: COLORS.primary.black50, dark: COLORS.primary.white50 },
+  overlay50Inverse: { light: COLORS.primary.white50, dark: COLORS.primary.black50 },
+} as const;
+
+export type ThemedColorName = keyof typeof themedColorVars;
+export type ThemedColorVariant = (typeof themedColorVars)[ThemedColorName];
+
+// ============================================================================
+// TYPOGRAPHY TOKENS
+// ============================================================================
+
+export const FONT_FAMILIES = {
+  geist: [
+    "Geist",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "sans-serif",
+  ],
+  mono: [
+    "Geist Mono",
+    "SF Mono",
+    "Monaco",
+    "Inconsolata",
+    "Roboto Mono",
+    "monospace",
+  ],
+} as const;
+
+export const FONT_WEIGHTS = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;
+
+export const FONT_SIZES = {
+  xs: SPACING_TOKENS["10"],
+  s: SPACING_TOKENS["12"],
+  m: SPACING_TOKENS["14"],
+  l: SPACING_TOKENS["16"],
+  xl: SPACING_TOKENS["18"],
+  "2xl": SPACING_TOKENS["20"],
+  "3xl": SPACING_TOKENS["24"],
+  "4xl": SPACING_TOKENS["28"],
+  "5xl": SPACING_TOKENS["32"],
+  "6xl": SPACING_TOKENS["40"],
+  "7xl": SPACING_TOKENS["48"],
+  "8xl": SPACING_TOKENS["56"],
+} as const;
+
+export const LINE_HEIGHTS = {
+  xs: SPACING_TOKENS["14"],
+  s: SPACING_TOKENS["16"],
+  m: SPACING_TOKENS["20"],
+  l: SPACING_TOKENS["24"],
+  xl: SPACING_TOKENS["26"],
+  "2xl": SPACING_TOKENS["28"],
+  "3xl": SPACING_TOKENS["32"],
+  "4xl": SPACING_TOKENS["36"],
+  "5xl": SPACING_TOKENS["40"],
+  "6xl": SPACING_TOKENS["48"],
+  "7xl": SPACING_TOKENS["56"],
+  "8xl": SPACING_TOKENS["64"],
+} as const;
+
+export const LETTER_SPACINGS = {
+  none: "0em",
+  xs: pxToRem(-1),
+  s: pxToRem(-0.5),
+  m: pxToRem(-0.25),
+} as const;
+
+export type FontFamily = keyof typeof FONT_FAMILIES;
+export type FontWeight = keyof typeof FONT_WEIGHTS;
+export type FontSize = keyof typeof FONT_SIZES;
+export type LineHeight = keyof typeof LINE_HEIGHTS;
+export type LetterSpacing = keyof typeof LETTER_SPACINGS;
+
+// ============================================================================
+// BORDER TOKENS
+// ============================================================================
+
+export const BORDER_RADIUS = {
+  circle: "50%",
+  pill: pxToRem(999),
+  xl: pxToRem(24),
+  lg: pxToRem(16),
+  md: pxToRem(12),
+  sm: pxToRem(8),
+  xs: pxToRem(4),
+} as const;
+
+export const BORDER_WIDTH = {
+  none: pxToRem(0),
+  xs: pxToRem(0.75),
+  s: pxToRem(1),
+  m: pxToRem(1.5),
+  l: pxToRem(2),
+  xl: pxToRem(4),
+} as const;
+
+export type BorderRadiusToken = keyof typeof BORDER_RADIUS;
+export type BorderWidthToken = keyof typeof BORDER_WIDTH;
+
+// ============================================================================
+// SHADOW TOKENS
+// ============================================================================
+
+export const SHADOW_LAYERS = {
+  L0: "none",
+  L1: "0px 0px 2px 0px rgba(0, 0, 0, 0.06)",
+  L2: "0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08)",
+  L3: "0px 0px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.10)",
+  L4: "0px 0px 6px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.10)",
+  L5: "0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 10px 20px 0px rgba(0, 0, 0, 0.10)",
+  L6: "0px 0px 10px 0px rgba(0, 0, 0, 0.08), 0px 12px 24px 0px rgba(0, 0, 0, 0.10)",
+  L7: "0px 0px 12px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.10)",
+} as const;
+
+export type ShadowLayer = keyof typeof SHADOW_LAYERS;
+
+// ============================================================================
+// BREAKPOINTS
+// ============================================================================
+
+export const BREAKPOINTS = {
+  xs: {},
+  sm: { "@media": "screen and (min-width: 640px)" },
+  md: { "@media": "screen and (min-width: 768px)" },
+  lg: { "@media": "screen and (min-width: 1024px)" },
+  xl: { "@media": "screen and (min-width: 1280px)" },
+} as const;
+
+export type Breakpoint = keyof typeof BREAKPOINTS;
+
+// ============================================================================
+// TYPOGRAPHY STYLES
+// ============================================================================
+
+export const LABEL_FONT_SIZES = {
+  "2xs": pxToRem(14),
+} as const;
+
+export const LABEL_LINE_HEIGHTS = {
+  "2xs": pxToRem(14),
+} as const;
+
+export const TYPOGRAPHY_STYLES = {
+  label: {
+    "2xs": {
+      medium: {
+        fontSize: LABEL_FONT_SIZES["2xs"],
+        lineHeight: LABEL_LINE_HEIGHTS["2xs"],
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+  },
+  heading: {
+    "3xl": {
+      semibold: {
+        fontSize: FONT_SIZES["8xl"],
+        lineHeight: LINE_HEIGHTS["8xl"],
+        fontWeight: FONT_WEIGHTS.semibold,
+        letterSpacing: LETTER_SPACINGS.xs,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    "2xl": {
+      semibold: {
+        fontSize: FONT_SIZES["7xl"],
+        lineHeight: LINE_HEIGHTS["7xl"],
+        fontWeight: FONT_WEIGHTS.semibold,
+        letterSpacing: LETTER_SPACINGS.xs,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    xl: {
+      semibold: {
+        fontSize: FONT_SIZES["6xl"],
+        lineHeight: LINE_HEIGHTS["6xl"],
+        fontWeight: FONT_WEIGHTS.semibold,
+        letterSpacing: LETTER_SPACINGS.xs,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    l: {
+      semibold: {
+        fontSize: FONT_SIZES["5xl"],
+        lineHeight: LINE_HEIGHTS["5xl"],
+        fontWeight: FONT_WEIGHTS.semibold,
+        letterSpacing: LETTER_SPACINGS.s,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    m: {
+      semibold: {
+        fontSize: FONT_SIZES["3xl"],
+        lineHeight: LINE_HEIGHTS["3xl"],
+        fontWeight: FONT_WEIGHTS.semibold,
+        letterSpacing: LETTER_SPACINGS.s,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    s: {
+      semibold: {
+        fontSize: FONT_SIZES["2xl"],
+        lineHeight: LINE_HEIGHTS["2xl"],
+        fontWeight: FONT_WEIGHTS.semibold,
+        letterSpacing: LETTER_SPACINGS.s,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    xs: {
+      semibold: {
+        fontSize: FONT_SIZES.l,
+        lineHeight: LINE_HEIGHTS.l,
+        fontWeight: FONT_WEIGHTS.semibold,
+        letterSpacing: LETTER_SPACINGS.m,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+      medium: {
+        fontSize: FONT_SIZES.l,
+        lineHeight: LINE_HEIGHTS.l,
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.m,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    "2xs": {
+      medium: {
+        fontSize: FONT_SIZES.m,
+        lineHeight: LINE_HEIGHTS.m,
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+  },
+  text: {
+    "2xl": {
+      medium: {
+        fontSize: FONT_SIZES["3xl"],
+        lineHeight: LINE_HEIGHTS["3xl"],
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+      regular: {
+        fontSize: FONT_SIZES["3xl"],
+        lineHeight: LINE_HEIGHTS["3xl"],
+        fontWeight: FONT_WEIGHTS.regular,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    xl: {
+      medium: {
+        fontSize: FONT_SIZES["2xl"],
+        lineHeight: LINE_HEIGHTS["2xl"],
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+      regular: {
+        fontSize: FONT_SIZES["2xl"],
+        lineHeight: LINE_HEIGHTS["2xl"],
+        fontWeight: FONT_WEIGHTS.regular,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    l: {
+      medium: {
+        fontSize: FONT_SIZES.l,
+        lineHeight: LINE_HEIGHTS.l,
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+      regular: {
+        fontSize: FONT_SIZES.l,
+        lineHeight: LINE_HEIGHTS.l,
+        fontWeight: FONT_WEIGHTS.regular,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    m: {
+      medium: {
+        fontSize: FONT_SIZES.m,
+        lineHeight: LINE_HEIGHTS.m,
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+      regular: {
+        fontSize: FONT_SIZES.m,
+        lineHeight: LINE_HEIGHTS.m,
+        fontWeight: FONT_WEIGHTS.regular,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    s: {
+      medium: {
+        fontSize: FONT_SIZES.s,
+        lineHeight: LINE_HEIGHTS.s,
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+      regular: {
+        fontSize: FONT_SIZES.s,
+        lineHeight: LINE_HEIGHTS.s,
+        fontWeight: FONT_WEIGHTS.regular,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+    xs: {
+      medium: {
+        fontSize: FONT_SIZES.xs,
+        lineHeight: LINE_HEIGHTS.xs,
+        fontWeight: FONT_WEIGHTS.medium,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+      regular: {
+        fontSize: FONT_SIZES.xs,
+        lineHeight: LINE_HEIGHTS.xs,
+        fontWeight: FONT_WEIGHTS.regular,
+        letterSpacing: LETTER_SPACINGS.none,
+        fontFamily: FONT_FAMILIES.geist,
+      },
+    },
+  },
+} as const;
+
+export type HeadingSize = keyof typeof TYPOGRAPHY_STYLES.heading;
+export type TextSize = keyof typeof TYPOGRAPHY_STYLES.text;
+export type LabelSize = keyof typeof TYPOGRAPHY_STYLES.label;
+
+// ============================================================================
+// Z-INDEX TOKENS
+// ============================================================================
+
+/**
+ * Z-Index Scale
+ *
+ * Centralized z-index values for consistent layering across the application.
+ * Use these constants instead of hardcoding z-index values.
+ *
+ * Hierarchy (lowest to highest):
+ * - BASE: Default positioning (sticky headers, relative elements)
+ * - DROPDOWN: Menus, selects, popovers, date pickers
+ * - DRAWER: Side panels and their overlays
+ * - MODAL: Modal dialogs and their overlays
+ * - OVERLAY: Full-screen overlays
+ * - POPOVER: Elements that appear above modals (menus inside modals)
+ * - TOOLTIP: Contextual hints (always visible over most content)
+ * - TOAST: Critical notifications (highest priority)
+ */
+export const Z_INDEX = {
+  /** Base layer for sticky elements and relative positioning (z-index: 1) */
+  BASE: 1,
+
+  /** Dropdown menus, selects, and popovers (z-index: 50) */
+  DROPDOWN: 50,
+
+  /** Drawer/Side panel overlay backdrop (z-index: 80) */
+  DRAWER_OVERLAY: 80,
+
+  /** Drawer/Side panel content (z-index: 90) */
+  DRAWER_CONTENT: 90,
+
+  /** Modal overlay backdrop (z-index: 100) */
+  MODAL_OVERLAY: 100,
+
+  /** Modal content (z-index: 110) */
+  MODAL_CONTENT: 110,
+
+  /** Alert dialog overlay (z-index: 120) */
+  ALERT_OVERLAY: 120,
+
+  /** Alert dialog content (z-index: 130) */
+  ALERT_CONTENT: 130,
+
+  /** Full-screen overlay (z-index: 1000) */
+  OVERLAY: 1000,
+
+  /** Popovers that need to appear above overlays - menus inside modals (z-index: 1100) */
+  POPOVER: 1100,
+
+  /** Tooltips - high priority contextual hints (z-index: 1200) */
+  TOOLTIP: 1200,
+
+  /** Toast notifications - highest priority (z-index: 9999) */
+  TOAST: 9999,
+} as const;
+
+export type ZIndexKey = keyof typeof Z_INDEX;
+export type ZIndexValue = (typeof Z_INDEX)[ZIndexKey];