@thesage/ui 0.0.9

package/dist/tokens.mjs

@@ -0,0 +1,2319 @@
+"use client";
+
+// ../tokens/src/base.ts
+var baseTokens = {
+  /**
+   * Spacing scale (based on 4px grid)
+   */
+  spacing: {
+    "0": "0",
+    "0.5": "0.125rem",
+    // 2px
+    "1": "0.25rem",
+    // 4px
+    "2": "0.5rem",
+    // 8px
+    "3": "0.75rem",
+    // 12px
+    "4": "1rem",
+    // 16px
+    "5": "1.25rem",
+    // 20px
+    "6": "1.5rem",
+    // 24px
+    "8": "2rem",
+    // 32px
+    "10": "2.5rem",
+    // 40px
+    "12": "3rem",
+    // 48px
+    "16": "4rem",
+    // 64px
+    "20": "5rem",
+    // 80px
+    "24": "6rem",
+    // 96px
+    "32": "8rem"
+    // 128px
+  },
+  /**
+   * Typography scales
+   */
+  fontSize: {
+    "xs": "0.75rem",
+    // 12px
+    "sm": "0.875rem",
+    // 14px
+    "base": "1rem",
+    // 16px
+    "lg": "1.125rem",
+    // 18px
+    "xl": "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem",
+    // 36px
+    "5xl": "3rem",
+    // 48px
+    "6xl": "3.75rem",
+    // 60px
+    "7xl": "4.5rem",
+    // 72px
+    "8xl": "6rem"
+    // 96px
+  },
+  fontWeight: {
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900"
+  },
+  lineHeight: {
+    none: "1",
+    tight: "1.25",
+    snug: "1.375",
+    normal: "1.5",
+    relaxed: "1.625",
+    loose: "2"
+  },
+  /**
+   * Border radius
+   */
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    // 2px
+    DEFAULT: "0.25rem",
+    // 4px
+    md: "0.375rem",
+    // 6px
+    lg: "0.5rem",
+    // 8px
+    xl: "0.75rem",
+    // 12px
+    "2xl": "1rem",
+    // 16px
+    "3xl": "1.5rem",
+    // 24px
+    full: "9999px"
+  },
+  /**
+   * Motion durations (base values - themes can override)
+   */
+  duration: {
+    instant: "0ms",
+    fast: "150ms",
+    normal: "300ms",
+    slow: "500ms",
+    slower: "800ms"
+  },
+  /**
+   * Easing curves (base values - themes can override)
+   */
+  ease: {
+    linear: "linear",
+    in: "cubic-bezier(0.4, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.2, 1)",
+    inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  /**
+   * Z-index scale
+   */
+  zIndex: {
+    "auto": "auto",
+    "0": "0",
+    "10": "10",
+    "20": "20",
+    "30": "30",
+    "40": "40",
+    "50": "50",
+    dropdown: "1000",
+    sticky: "1020",
+    fixed: "1030",
+    modalBackdrop: "1040",
+    modal: "1050",
+    popover: "1060",
+    tooltip: "1070"
+  },
+  /**
+   * Focus ring configuration
+   */
+  focus: {
+    width: "2px",
+    offset: "2px",
+    style: "solid"
+  }
+};
+var spacing = {
+  xs: baseTokens.spacing["1"],
+  // 4px  — Tight internal padding
+  sm: baseTokens.spacing["2"],
+  // 8px  — Default gap
+  md: baseTokens.spacing["4"],
+  // 16px — Section padding
+  lg: baseTokens.spacing["6"],
+  // 24px — Card padding
+  xl: baseTokens.spacing["8"],
+  // 32px — Section margins
+  "2xl": baseTokens.spacing["12"],
+  // 48px — Page sections
+  "3xl": baseTokens.spacing["16"]
+  // 64px — Major divisions
+};
+var typography = {
+  fonts: {
+    sans: "var(--font-body)",
+    serif: "var(--font-heading)",
+    mono: "var(--font-mono)"
+  },
+  sizes: {
+    xs: baseTokens.fontSize.xs,
+    // 12px — Fine print
+    sm: baseTokens.fontSize.sm,
+    // 14px — Secondary text
+    base: baseTokens.fontSize.base,
+    // 16px — Body text
+    lg: baseTokens.fontSize.lg,
+    // 18px — Lead paragraphs
+    xl: baseTokens.fontSize.xl,
+    // 20px — Section headers
+    "2xl": baseTokens.fontSize["2xl"],
+    // 24px — Page headers
+    "3xl": baseTokens.fontSize["3xl"]
+    // 30px — Hero text
+  },
+  weights: {
+    normal: baseTokens.fontWeight.normal,
+    // 400
+    medium: baseTokens.fontWeight.medium,
+    // 500
+    semibold: baseTokens.fontWeight.semibold,
+    // 600
+    bold: baseTokens.fontWeight.bold
+    // 700
+  },
+  leading: {
+    tight: baseTokens.lineHeight.tight,
+    // 1.25 — Headings
+    normal: baseTokens.lineHeight.normal,
+    // 1.5  — Body
+    relaxed: baseTokens.lineHeight.relaxed
+    // 1.625 — Spacious reading
+  }
+};
+var motion = {
+  duration: baseTokens.duration,
+  easing: {
+    default: baseTokens.ease.out,
+    // Most transitions
+    spring: "cubic-bezier(0.16, 1, 0.3, 1)",
+    // Playful interactions
+    linear: baseTokens.ease.linear
+    // Progress indicators
+  }
+};
+
+// ../tokens/src/studio.ts
+var studioTokens = {
+  light: {
+    colors: {
+      // Backgrounds
+      background: "#ffffff",
+      backgroundSecondary: "#fafafa",
+      backgroundTertiary: "#f5f5f5",
+      // Foregrounds
+      foreground: "#0a0a0a",
+      foregroundSecondary: "#525252",
+      foregroundTertiary: "#a3a3a3",
+      // Brand
+      primary: "#0a0a0a",
+      primaryForeground: "#ffffff",
+      secondary: "#f5f5f5",
+      secondaryForeground: "#0a0a0a",
+      accent: "#0070f3",
+      accentForeground: "#ffffff",
+      // Borders
+      border: "#d4d4d4",
+      borderSubtle: "#f5f5f5",
+      // States
+      hover: "#fafafa",
+      active: "#f0f0f0",
+      // Link hover states
+      linkHover: "#0a0a0a",
+      linkHoverForeground: "#ffffff",
+      // Semantic
+      success: "#00a86b",
+      successForeground: "#ffffff",
+      warning: "#f59e0b",
+      warningForeground: "#ffffff",
+      error: "#ef4444",
+      errorForeground: "#ffffff",
+      info: "#0070f3",
+      infoForeground: "#ffffff",
+      // Component-specific colors
+      card: "#ffffff",
+      cardForeground: "#0a0a0a",
+      popover: "#ffffff",
+      popoverForeground: "#0a0a0a",
+      muted: "#f5f5f5",
+      mutedForeground: "#737373",
+      destructive: "#ef4444",
+      destructiveForeground: "#ffffff",
+      input: "#d4d4d4",
+      ring: "#0a0a0a",
+      // Surface is used by various components
+      surface: "#fafafa",
+      // Glass effects
+      glass: "rgba(255, 255, 255, 0.7)",
+      glassBorder: "rgba(0, 0, 0, 0.1)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(4px)",
+        md: "blur(8px)",
+        lg: "blur(16px)",
+        xl: "blur(24px)"
+      },
+      shadow: {
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+      }
+    }
+  },
+  dark: {
+    colors: {
+      // Backgrounds
+      background: "#000000",
+      backgroundSecondary: "#171717",
+      backgroundTertiary: "#262626",
+      // Foregrounds
+      foreground: "#fafafa",
+      foregroundSecondary: "#a3a3a3",
+      foregroundTertiary: "#858585",
+      // Brand
+      primary: "#ffffff",
+      primaryForeground: "#0a0a0a",
+      secondary: "#262626",
+      secondaryForeground: "#fafafa",
+      accent: "#0090ff",
+      accentForeground: "#ffffff",
+      // Borders
+      border: "#404040",
+      borderSubtle: "#1a1a1a",
+      // States
+      hover: "#1a1a1a",
+      active: "#262626",
+      // Link hover states
+      linkHover: "#ffffff",
+      linkHoverForeground: "#0a0a0a",
+      // Semantic
+      success: "#10b981",
+      successForeground: "#ffffff",
+      warning: "#f59e0b",
+      warningForeground: "#ffffff",
+      error: "#ef4444",
+      errorForeground: "#ffffff",
+      info: "#0090ff",
+      infoForeground: "#ffffff",
+      // Component-specific colors
+      card: "#0a0a0a",
+      cardForeground: "#fafafa",
+      popover: "#0a0a0a",
+      popoverForeground: "#fafafa",
+      muted: "#262626",
+      mutedForeground: "#a3a3a3",
+      destructive: "#ef4444",
+      destructiveForeground: "#ffffff",
+      input: "#404040",
+      ring: "#d4d4d4",
+      // Surface is used by various components
+      surface: "#171717",
+      // Glass effects
+      glass: "rgba(0, 0, 0, 0.7)",
+      glassBorder: "rgba(255, 255, 255, 0.1)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(4px)",
+        md: "blur(8px)",
+        lg: "blur(16px)",
+        xl: "blur(24px)"
+      },
+      shadow: {
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.5)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.6)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.7)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.8)"
+      }
+    }
+  },
+  /**
+   * Motion personality for Studio theme
+   */
+  motion: {
+    // Duration scales based on motion slider (0-10)
+    getDuration: (intensity) => {
+      if (intensity === 0) return "0ms";
+      const ms = 150 + (intensity - 1) * 40;
+      return `${ms}ms`;
+    },
+    // Easing curves - smooth and professional
+    ease: {
+      default: "cubic-bezier(0.4, 0, 0.2, 1)",
+      // ease-in-out
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      spring: "cubic-bezier(0.16, 1, 0.3, 1)"
+      // Smooth spring
+    }
+  },
+  /**
+   * Typography for Studio theme
+   */
+  typography: {
+    heading: {
+      fontFamily: "var(--font-geist-sans)",
+      fontWeight: "600",
+      letterSpacing: "-0.02em"
+    },
+    body: {
+      fontFamily: "var(--font-geist-sans)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    },
+    mono: {
+      fontFamily: "var(--font-geist-mono)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    }
+  }
+};
+
+// ../tokens/src/sage.ts
+var sageTokens = {
+  light: {
+    colors: {
+      // Warm, earthy backgrounds
+      background: "#faf8f5",
+      backgroundSecondary: "#f5f1eb",
+      backgroundTertiary: "#ede8e0",
+      // Warm neutrals for text
+      foreground: "#2d2823",
+      foregroundSecondary: "#5a524a",
+      foregroundTertiary: "#8a7f72",
+      // Muted sage green as primary
+      primary: "#7a9b7f",
+      primaryForeground: "#faf8f5",
+      primaryHover: "#6a8b6f",
+      // Secondary - warm stone
+      secondary: "#ede8e0",
+      secondaryForeground: "#2d2823",
+      // Warm terracotta accent
+      accent: "#c17a5f",
+      accentForeground: "#faf8f5",
+      accentHover: "#b16a4f",
+      // Semantic colors with muted, organic tones
+      success: "#6b8e6f",
+      successForeground: "#faf8f5",
+      warning: "#d4a574",
+      warningForeground: "#2d2823",
+      error: "#c17a5f",
+      errorForeground: "#faf8f5",
+      info: "#8b9dc3",
+      infoForeground: "#faf8f5",
+      // Borders - warm subtle
+      border: "#e0d8cf",
+      borderSubtle: "#ede8e0",
+      // States
+      hover: "#f5f1eb",
+      active: "#ede8e0",
+      // Link hover states - Muted sage green
+      linkHover: "#7a9b7f",
+      linkHoverForeground: "#faf8f5",
+      // Soft glass effects
+      glass: "rgba(250, 248, 245, 0.85)",
+      glassBorder: "rgba(122, 155, 127, 0.15)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(6px)",
+        md: "blur(12px)",
+        lg: "blur(20px)",
+        xl: "blur(32px)"
+      },
+      shadow: {
+        sm: "0 2px 4px 0 rgba(45, 40, 35, 0.06)",
+        md: "0 4px 8px -2px rgba(45, 40, 35, 0.08)",
+        lg: "0 8px 16px -4px rgba(45, 40, 35, 0.12)",
+        xl: "0 16px 32px -8px rgba(45, 40, 35, 0.16)",
+        "2xl": "0 24px 48px -12px rgba(45, 40, 35, 0.20)"
+      }
+    }
+  },
+  dark: {
+    colors: {
+      // Deep forest backgrounds
+      background: "#1a1614",
+      backgroundSecondary: "#252220",
+      backgroundTertiary: "#2f2b28",
+      // Warm light text
+      foreground: "#f5f1eb",
+      foregroundSecondary: "#c7bfb5",
+      foregroundTertiary: "#8a7f72",
+      // Brighter sage for dark mode
+      primary: "#a8c5ad",
+      primaryForeground: "#1a1614",
+      primaryHover: "#b8d5bd",
+      // Secondary - lighter warm stone
+      secondary: "#2f2b28",
+      secondaryForeground: "#f5f1eb",
+      // Warm peachy accent for dark
+      accent: "#e5a78a",
+      accentForeground: "#1a1614",
+      accentHover: "#f5b79a",
+      // Semantic colors adjusted for dark
+      success: "#95b89a",
+      successForeground: "#1a1614",
+      warning: "#e5c59a",
+      warningForeground: "#1a1614",
+      error: "#e5a78a",
+      errorForeground: "#1a1614",
+      info: "#a8b5d5",
+      infoForeground: "#1a1614",
+      // Borders
+      border: "#3a3530",
+      borderSubtle: "#2f2b28",
+      // States
+      hover: "#252220",
+      active: "#2f2b28",
+      // Link hover states - Brighter sage for dark mode
+      linkHover: "#a8c5ad",
+      linkHoverForeground: "#1a1614",
+      // Dark glass effects
+      glass: "rgba(26, 22, 20, 0.85)",
+      glassBorder: "rgba(168, 197, 173, 0.2)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(6px)",
+        md: "blur(12px)",
+        lg: "blur(20px)",
+        xl: "blur(32px)"
+      },
+      shadow: {
+        sm: "0 2px 4px 0 rgba(0, 0, 0, 0.3)",
+        md: "0 4px 8px -2px rgba(0, 0, 0, 0.4)",
+        lg: "0 8px 16px -4px rgba(0, 0, 0, 0.5)",
+        xl: "0 16px 32px -8px rgba(0, 0, 0, 0.6)",
+        "2xl": "0 24px 48px -12px rgba(0, 0, 0, 0.7)"
+      }
+    }
+  },
+  motion: {
+    getDuration: (intensity) => {
+      if (intensity === 0) return "0ms";
+      const ms = 300 + (intensity - 1) * 60;
+      return `${ms}ms`;
+    },
+    ease: {
+      default: "cubic-bezier(0.33, 1, 0.68, 1)",
+      // Organic, flowing
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      spring: "cubic-bezier(0.16, 1, 0.3, 1)"
+    }
+  },
+  interactions: {
+    hover: {
+      overlayColor: "var(--color-interaction-overlay)",
+      opacity: "var(--opacity-interaction-hover)"
+    },
+    active: {
+      scale: "var(--scale-interaction-active)"
+    },
+    focus: {
+      ringColor: "var(--color-interaction-focus-ring)",
+      ringWidth: "var(--width-interaction-focus-ring)",
+      ringOffset: "var(--width-interaction-focus-offset)"
+    },
+    disabled: {
+      opacity: "var(--opacity-interaction-disabled)"
+    }
+  },
+  typography: {
+    heading: {
+      fontFamily: "var(--font-sage-serif)",
+      // Lora serif
+      fontWeight: "600",
+      letterSpacing: "-0.01em"
+    },
+    body: {
+      fontFamily: "var(--font-sage-sans)",
+      // Instrument Sans
+      fontWeight: "400",
+      letterSpacing: "0"
+    },
+    mono: {
+      fontFamily: "var(--font-sage-mono)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    }
+  }
+};
+
+// ../tokens/src/volt.ts
+var voltTokens = {
+  light: {
+    colors: {
+      // Bright, punchy backgrounds
+      background: "#ffffff",
+      backgroundSecondary: "#f8f9fb",
+      backgroundTertiary: "#f0f2f5",
+      // Sharp contrast text
+      foreground: "#0a0a0a",
+      foregroundSecondary: "#4a4a4a",
+      foregroundTertiary: "#8a8a8a",
+      // Electric blue primary (WCAG AA compliant)
+      primary: "#0066ff",
+      primaryForeground: "#ffffff",
+      primaryHover: "#0052cc",
+      // Secondary - cool gray
+      secondary: "#f0f2f5",
+      secondaryForeground: "#0a0a0a",
+      // Vibrant cyan accent
+      accent: "#00d9ff",
+      accentForeground: "#0a0a0a",
+      accentHover: "#00c3e6",
+      // Bold semantic colors
+      success: "#00cc66",
+      successForeground: "#ffffff",
+      warning: "#ffaa00",
+      warningForeground: "#0a0a0a",
+      error: "#ff3366",
+      errorForeground: "#ffffff",
+      info: "#3399ff",
+      infoForeground: "#ffffff",
+      // Borders
+      border: "#e0e4ea",
+      borderSubtle: "#f0f2f5",
+      // States
+      hover: "#f8f9fb",
+      active: "#f0f2f5",
+      // Link hover states - Electric blue with high contrast
+      linkHover: "#0066ff",
+      linkHoverForeground: "#ffffff",
+      // Crisp glass effects
+      glass: "rgba(255, 255, 255, 0.8)",
+      glassBorder: "rgba(0, 102, 255, 0.2)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(8px)",
+        md: "blur(16px)",
+        lg: "blur(32px)",
+        xl: "blur(48px)"
+      },
+      shadow: {
+        sm: "0 0 8px rgba(0, 102, 255, 0.15)",
+        md: "0 0 16px rgba(0, 102, 255, 0.2)",
+        lg: "0 0 24px rgba(0, 102, 255, 0.25)",
+        xl: "0 0 32px rgba(0, 102, 255, 0.3)",
+        "2xl": "0 0 48px rgba(0, 102, 255, 0.4)"
+      }
+    }
+  },
+  dark: {
+    colors: {
+      // Pure black cyberpunk background
+      background: "#000000",
+      backgroundSecondary: "#0a0a0a",
+      backgroundTertiary: "#141414",
+      // Bright white text
+      foreground: "#ffffff",
+      foregroundSecondary: "#b3b3b3",
+      foregroundTertiary: "#666666",
+      // Neon blue primary
+      primary: "#0099ff",
+      primaryForeground: "#000000",
+      primaryHover: "#00aaff",
+      // Secondary - dark gray
+      secondary: "#141414",
+      secondaryForeground: "#ffffff",
+      // Neon cyan accent
+      accent: "#00ffff",
+      accentForeground: "#000000",
+      accentHover: "#33ffff",
+      // Neon semantic colors
+      success: "#00ff99",
+      successForeground: "#000000",
+      warning: "#ffcc00",
+      warningForeground: "#000000",
+      error: "#ff0066",
+      errorForeground: "#ffffff",
+      info: "#66ccff",
+      infoForeground: "#000000",
+      // Borders
+      border: "#1a1a1a",
+      borderSubtle: "#141414",
+      // States
+      hover: "#0a0a0a",
+      active: "#141414",
+      // Link hover states - Neon cyan (high luma)
+      linkHover: "#00ffff",
+      linkHoverForeground: "#000000",
+      // Dark glass with glow
+      glass: "rgba(0, 0, 0, 0.8)",
+      glassBorder: "rgba(0, 153, 255, 0.3)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(8px)",
+        md: "blur(16px)",
+        lg: "blur(32px)",
+        xl: "blur(48px)"
+      },
+      shadow: {
+        sm: "0 0 12px rgba(0, 153, 255, 0.4)",
+        md: "0 0 20px rgba(0, 153, 255, 0.5)",
+        lg: "0 0 32px rgba(0, 153, 255, 0.6)",
+        xl: "0 0 48px rgba(0, 153, 255, 0.7)",
+        "2xl": "0 0 64px rgba(0, 153, 255, 0.8)"
+      }
+    }
+  },
+  motion: {
+    getDuration: (intensity) => {
+      if (intensity === 0) return "0ms";
+      const ms = 100 + (intensity - 1) * 25;
+      return `${ms}ms`;
+    },
+    ease: {
+      default: "cubic-bezier(0.16, 1, 0.3, 1)",
+      // Snappy spring
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      spring: "cubic-bezier(0.68, -0.55, 0.27, 1.55)"
+      // Bouncy
+    }
+  },
+  typography: {
+    heading: {
+      fontFamily: "var(--font-volt-sans)",
+      // Space Grotesk
+      fontWeight: "700",
+      // Bold
+      letterSpacing: "-0.03em"
+    },
+    body: {
+      fontFamily: "var(--font-volt-sans)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    },
+    mono: {
+      fontFamily: "var(--font-volt-mono)",
+      // Fira Code
+      fontWeight: "400",
+      letterSpacing: "0"
+    }
+  }
+};
+
+// ../tokens/src/typography.ts
+var fontFamilies = {
+  studio: {
+    heading: "Outfit",
+    body: "Manrope",
+    mono: "Fira Code",
+    description: "Modern geometric sans-serif with clean readability",
+    usage: {
+      heading: "Headlines, titles, emphasis",
+      body: "Paragraphs, UI text, readable content",
+      mono: "Code blocks, technical content"
+    }
+  },
+  sage: {
+    heading: "Lora",
+    // Serif for elegance
+    body: "Instrument Sans",
+    serif: "Lora",
+    // Explicit serif reference
+    sans: "Instrument Sans",
+    // Explicit sans reference
+    mono: "Fira Code",
+    description: "Elegant serif headings with modern sans body",
+    usage: {
+      heading: "Elegant headings, article titles",
+      body: "Long-form content, UI text",
+      serif: "Pull quotes, emphasis",
+      sans: "UI elements, captions",
+      mono: "Code blocks, technical content"
+    }
+  },
+  volt: {
+    heading: "Space Grotesk",
+    body: "Space Grotesk",
+    sans: "Space Grotesk",
+    mono: "Fira Code",
+    description: "Tech-forward, consistent geometric throughout",
+    usage: {
+      heading: "All headlines",
+      body: "All body text (unified typography)",
+      sans: "All sans-serif needs",
+      mono: "Code blocks, technical content"
+    }
+  }
+};
+var fontLoadingConfig = {
+  studio: {
+    heading: { family: "Outfit", weights: ["300", "400", "500", "600", "700", "800"] },
+    body: { family: "Manrope", weights: ["300", "400", "500", "600", "700", "800"] },
+    mono: { family: "Fira Code", weights: ["400", "500", "600", "700"] }
+  },
+  sage: {
+    heading: { family: "Lora", weights: ["400", "500", "600", "700"] },
+    body: { family: "Instrument Sans", weights: ["400", "500", "600", "700"] },
+    mono: { family: "Fira Code", weights: ["400", "500", "600", "700"] }
+  },
+  volt: {
+    heading: { family: "Space Grotesk", weights: ["300", "400", "500", "600", "700"] },
+    body: { family: "Space Grotesk", weights: ["300", "400", "500", "600", "700"] },
+    mono: { family: "Fira Code", weights: ["400", "500", "600", "700"] }
+  }
+};
+var fontSizes = {
+  // Body text scale
+  xs: { base: "0.75rem", mobile: "0.75rem" },
+  // 12px
+  sm: { base: "0.875rem", mobile: "0.875rem" },
+  // 14px
+  base: { base: "1rem", mobile: "1rem" },
+  // 16px
+  lg: { base: "1.125rem", mobile: "1rem" },
+  // 18px / 16px mobile
+  xl: { base: "1.25rem", mobile: "1.125rem" },
+  // 20px / 18px mobile
+  "2xl": { base: "1.5rem", mobile: "1.25rem" },
+  // 24px / 20px mobile
+  "3xl": { base: "1.875rem", mobile: "1.5rem" },
+  // 30px / 24px mobile
+  // Heading scale (h6 → h1)
+  "4xl": { base: "2.25rem", mobile: "1.875rem" },
+  // 36px / 30px - h3
+  "5xl": { base: "3rem", mobile: "2.25rem" },
+  // 48px / 36px - h2
+  "6xl": { base: "3.75rem", mobile: "2.5rem" },
+  // 60px / 40px - h1
+  "7xl": { base: "4.5rem", mobile: "3rem" },
+  // 72px / 48px - Display
+  "8xl": { base: "6rem", mobile: "3.75rem" },
+  // 96px / 60px - Hero
+  "9xl": { base: "8rem", mobile: "4.5rem" }
+  // 128px / 72px - Ultra
+};
+var semanticSizes = {
+  "heading-1": "hero",
+  "heading-2": "5xl",
+  "heading-3": "4xl",
+  "heading-4": "2xl",
+  "heading-5": "xl",
+  "heading-6": "lg",
+  "body-large": "lg",
+  "body": "base",
+  "body-small": "sm",
+  "caption": "xs"
+};
+var fontWeights = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+var semanticWeights = {
+  heading: "bold",
+  // Default heading weight
+  "heading-light": "semibold",
+  "heading-heavy": "extrabold",
+  body: "normal",
+  // Default body weight
+  "body-emphasis": "medium",
+  "body-strong": "semibold",
+  caption: "normal"
+};
+var lineHeights = {
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  loose: "1.75",
+  extraloose: "2"
+};
+var semanticLineHeights = {
+  heading: "tight",
+  "heading-display": "none",
+  // Very tight for large display text
+  body: "normal",
+  "body-relaxed": "relaxed",
+  caption: "snug"
+};
+var letterSpacing = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+var semanticLetterSpacing = {
+  heading: "tight",
+  "heading-display": "tighter",
+  body: "normal",
+  "small-caps": "wider",
+  "all-caps": "widest"
+};
+var typePresets = {
+  "display-large": {
+    size: fontSizes["8xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.none,
+    letterSpacing: letterSpacing.tighter,
+    description: "Large hero text, landing pages"
+  },
+  "display": {
+    size: fontSizes["7xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.tight,
+    letterSpacing: letterSpacing.tight,
+    description: "Hero sections, major headings"
+  },
+  "heading-1": {
+    size: fontSizes["6xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.tight,
+    letterSpacing: letterSpacing.tight,
+    description: "Page titles, h1"
+  },
+  "heading-2": {
+    size: fontSizes["5xl"],
+    weight: fontWeights.bold,
+    lineHeight: lineHeights.tight,
+    letterSpacing: letterSpacing.normal,
+    description: "Section titles, h2"
+  },
+  "heading-3": {
+    size: fontSizes["4xl"],
+    weight: fontWeights.semibold,
+    lineHeight: lineHeights.snug,
+    letterSpacing: letterSpacing.normal,
+    description: "Subsection titles, h3"
+  },
+  "heading-4": {
+    size: fontSizes["2xl"],
+    weight: fontWeights.semibold,
+    lineHeight: lineHeights.snug,
+    letterSpacing: letterSpacing.normal,
+    description: "Component titles, h4"
+  },
+  "heading-5": {
+    size: fontSizes.xl,
+    weight: fontWeights.medium,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Small headings, h5"
+  },
+  "heading-6": {
+    size: fontSizes.lg,
+    weight: fontWeights.medium,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Tiny headings, h6"
+  },
+  "body-large": {
+    size: fontSizes.lg,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.relaxed,
+    letterSpacing: letterSpacing.normal,
+    description: "Lead paragraphs, intro text"
+  },
+  "body": {
+    size: fontSizes.base,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Default body text"
+  },
+  "body-small": {
+    size: fontSizes.sm,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+    description: "Small body text, fine print"
+  },
+  "caption": {
+    size: fontSizes.xs,
+    weight: fontWeights.normal,
+    lineHeight: lineHeights.snug,
+    letterSpacing: letterSpacing.wide,
+    description: "Captions, labels, metadata"
+  },
+  "overline": {
+    size: fontSizes.xs,
+    weight: fontWeights.semibold,
+    lineHeight: lineHeights.normal,
+    letterSpacing: letterSpacing.widest,
+    description: "Eyebrows, categories, all-caps labels"
+  }
+};
+function getFontVariable(theme, type) {
+  return `--font-${theme}-${type}`;
+}
+function getThemeFontVariables(theme) {
+  const fonts = fontFamilies[theme];
+  const vars = {};
+  Object.entries(fonts).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      vars[`--font-${theme}-${key}`] = value;
+    }
+  });
+  return vars;
+}
+function getResponsiveFontSize(sizeKey) {
+  const size = fontSizes[sizeKey];
+  return `font-size: ${size.mobile}; @media (min-width: 768px) { font-size: ${size.base}; }`;
+}
+var typographySystem = {
+  families: fontFamilies,
+  sizes: fontSizes,
+  weights: fontWeights,
+  lineHeights,
+  letterSpacing,
+  presets: typePresets,
+  semantic: {
+    sizes: semanticSizes,
+    weights: semanticWeights,
+    lineHeights: semanticLineHeights,
+    letterSpacing: semanticLetterSpacing
+  },
+  utils: {
+    getFontVariable,
+    getThemeFontVariables,
+    getResponsiveFontSize
+  }
+};
+
+// ../tokens/src/syntax.ts
+var syntaxColors = {
+  light: {
+    comment: "#22863a",
+    // Green for comments
+    keyword: "#8250df",
+    // Purple for keywords (import, export, const, etc.)
+    function: "#6639ba",
+    // Purple for function names
+    string: "#c1592a",
+    // Orange for strings
+    number: "#0a3069",
+    // Blue for numbers
+    boolean: "#0550ae",
+    // Blue for booleans
+    operator: "#1a1a1a",
+    // Almost black for operators
+    property: "#0550ae",
+    // Blue for properties
+    className: "#005cc5",
+    // Blue for class names
+    tag: "#005cc5",
+    // Blue for HTML/JSX tags
+    attribute: "#0550ae",
+    // Blue for attributes
+    variable: "#0550ae",
+    // Blue for variables
+    punctuation: "#57606a",
+    // Gray for punctuation
+    plain: "#1a1a1a"
+    // Default text color
+  },
+  dark: {
+    comment: "#6A9955",
+    // Green for comments
+    keyword: "#C586C0",
+    // Purple for keywords (import, export, const, etc.)
+    function: "#DCDCAA",
+    // Yellow for function names
+    string: "#CE9178",
+    // Orange for strings
+    number: "#B5CEA8",
+    // Light green for numbers
+    boolean: "#569CD6",
+    // Blue for booleans
+    operator: "#D4D4D4",
+    // Light gray for operators
+    property: "#9CDCFE",
+    // Light blue for properties
+    className: "#4EC9B0",
+    // Cyan for class names
+    tag: "#4EC9B0",
+    // Cyan for HTML/JSX tags
+    attribute: "#9CDCFE",
+    // Light blue for attributes
+    variable: "#9CDCFE",
+    // Light blue for variables
+    punctuation: "#808080",
+    // Gray for punctuation
+    plain: "#D4D4D4"
+    // Default text color
+  }
+};
+var codeColors = {
+  light: {
+    // Block code background - cool gray for subtle distinction
+    blockBackground: "#F8F9FA",
+    // Inline code background - pale amber for warmth and visibility
+    inlineBackground: "#FEF3E7",
+    // Border color for definition and separation
+    border: "#E1E4E8"
+  },
+  dark: {
+    // Block code background - VS Code-inspired dark background
+    blockBackground: "#1E1E1E",
+    // Inline code background - slightly lighter for contrast
+    inlineBackground: "#252525",
+    // Border color for definition
+    border: "#3D3D3D"
+  }
+};
+
+// ../tokens/src/color-palettes.ts
+var colorPalettes = [
+  // === PROFESSIONAL ===
+  {
+    id: "deep-trust",
+    name: "Deep Trust",
+    description: "Confident navy with subtle warmth",
+    category: "professional",
+    primary: "#1e3a5f",
+    secondary: "#64748b",
+    accent: "#f59e0b",
+    harmony: "Split-Complementary",
+    bestFor: ["Finance", "Legal", "Enterprise SaaS"],
+    rationale: "Navy (trust, authority) paired with Slate (neutral utility) and Amber (approachable warmth). The amber accent draws attention to CTAs without disrupting professional gravitas. High contrast ratios ensure accessibility.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "graphite-precision",
+    name: "Graphite Precision",
+    description: "Modern technical authority",
+    category: "professional",
+    primary: "#0f172a",
+    secondary: "#475569",
+    accent: "#0ea5e9",
+    harmony: "Analogous + Accent",
+    bestFor: ["Dev Tools", "Analytics", "SaaS Dashboards"],
+    rationale: "Near-black primary (Slate 900) conveys technical sophistication. Steel secondary provides UI structure. Sky blue accent pops for interactive elements. Inspired by developer tools like VS Code and GitHub.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "obsidian-gold",
+    name: "Obsidian Gold",
+    description: "Premium high-end authority",
+    category: "professional",
+    primary: "#09090b",
+    secondary: "#3f3f46",
+    accent: "#ca8a04",
+    harmony: "Complementary",
+    bestFor: ["Luxury Tech", "Premium Services", "High-End Products"],
+    rationale: "Zinc 950 primary delivers true premium feel without harsh black. Zinc 700 secondary creates layered depth for cards and containers. Yellow-700 gold accent signals exclusivity and value.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "slate-ember",
+    name: "Slate Ember",
+    description: "Warm corporate modernism",
+    category: "professional",
+    primary: "#334155",
+    secondary: "#94a3b8",
+    accent: "#ea580c",
+    harmony: "Complementary",
+    bestFor: ["Consulting", "B2B Services", "Corporate Sites"],
+    rationale: "Slate 700 primary feels mature yet approachable. Slate 400 secondary lightens UI without losing professionalism. Orange 600 accent energizes without overwhelming\u2014perfect for subtle call-to-action emphasis.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  // === CREATIVE ===
+  {
+    id: "sunset-gradient",
+    name: "Sunset Gradient",
+    description: "Warm analogous energy flow",
+    category: "creative",
+    primary: "#db2777",
+    secondary: "#f97316",
+    accent: "#fbbf24",
+    harmony: "Analogous",
+    bestFor: ["Design Agencies", "Portfolios", "Creative Studios"],
+    rationale: "Pink 600 \u2192 Orange 500 \u2192 Amber 400 creates natural warmth progression mimicking golden hour. This analogous flow feels cohesive yet dynamic. Works beautifully with white backgrounds and dark text.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "electric-violet",
+    name: "Electric Violet",
+    description: "Bold complementary punch",
+    category: "creative",
+    primary: "#7c3aed",
+    secondary: "#be185d",
+    accent: "#fb923c",
+    harmony: "Triadic",
+    bestFor: ["Entertainment", "Events", "Music", "Gaming"],
+    rationale: "Violet 600, Rose 700, and Orange 400 form a dynamic triadic harmony. Each color is equidistant on the wheel, creating maximum visual interest while maintaining balance. Use violet as dominant, rose for sections, orange for CTAs.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "indigo-bloom",
+    name: "Indigo Bloom",
+    description: "Sophisticated feminine power",
+    category: "creative",
+    primary: "#4338ca",
+    secondary: "#be123c",
+    accent: "#d946ef",
+    harmony: "Split-Complementary",
+    bestFor: ["Beauty", "Fashion Tech", "Lifestyle Apps"],
+    rationale: "Indigo 700 anchors with depth and sophistication. Rose 700 provides rich contrast. Fuchsia 500 accent sparkles for highlights and interactions. The palette balances strength with approachability.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "coral-reef",
+    name: "Coral Reef",
+    description: "Playful warmth with depth",
+    category: "creative",
+    primary: "#f43f5e",
+    secondary: "#06b6d4",
+    accent: "#fcd34d",
+    harmony: "Triadic",
+    bestFor: ["Social Apps", "Community Platforms", "Lifestyle"],
+    rationale: "Rose 500 (coral), Cyan 500 (ocean), and Amber 300 (sand) evoke tropical vibrancy. This triadic scheme feels energetic yet grounded. Great for apps targeting younger, socially-engaged audiences.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  // === NATURE ===
+  {
+    id: "forest-floor",
+    name: "Forest Floor",
+    description: "Deep organic earthiness",
+    category: "nature",
+    primary: "#14532d",
+    secondary: "#78350f",
+    accent: "#84cc16",
+    harmony: "Analogous + Accent",
+    bestFor: ["Sustainability", "Wellness", "Organic Products"],
+    rationale: "Green 900 (deep forest) and Amber 900 (rich earth/bark) create grounded warmth. Lime 500 accent represents new growth and vitality. This palette speaks to environmental consciousness and natural authenticity.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "ocean-calm",
+    name: "Ocean Calm",
+    description: "Tranquil aquatic serenity",
+    category: "nature",
+    primary: "#0f766e",
+    secondary: "#0284c7",
+    accent: "#22d3ee",
+    harmony: "Analogous",
+    bestFor: ["Healthcare", "Meditation", "Clean Tech"],
+    rationale: "Teal 700, Sky 600, and Cyan 400 form a calming blue-green progression. Mimics depth variations in water. Low emotional intensity promotes trust and calm\u2014ideal for wellness and health applications.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "sage-garden",
+    name: "Sage Garden",
+    description: "Botanical mindfulness",
+    category: "nature",
+    primary: "#6366f1",
+    secondary: "#059669",
+    accent: "#fef08a",
+    harmony: "Triadic",
+    bestFor: ["Meditation Apps", "Spa", "Personal Growth"],
+    rationale: "Indigo 500 (lavender energy), Emerald 600 (sage calm), Yellow 200 (morning light). Named colors match actual botanicals. Soft yellow accent provides gentle illumination for key interactions.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "desert-dawn",
+    name: "Desert Dawn",
+    description: "Warm arid minimalism",
+    category: "nature",
+    primary: "#d6d3d1",
+    secondary: "#a8a29e",
+    accent: "#c2410c",
+    harmony: "Monochromatic + Accent",
+    bestFor: ["Architecture", "Interior Design", "Artisan Goods"],
+    rationale: "Stone 300 and Stone 400 create subtle warmth typical of desert sands. Orange 700 accent recalls desert flora and sunset. Minimalist yet rich\u2014perfect for showcasing products and photography.",
+    wcagAA: false,
+    wcagAAA: false
+  },
+  // === VIBRANT ===
+  {
+    id: "neon-signal",
+    name: "Neon Signal",
+    description: "High-energy cyberpunk electric",
+    category: "vibrant",
+    primary: "#06b6d4",
+    secondary: "#d946ef",
+    accent: "#fde047",
+    harmony: "Triadic (CMY-based)",
+    bestFor: ["Gaming", "Web3", "Music Streaming", "Youth Apps"],
+    rationale: "Cyan 500, Fuchsia 500, Yellow 300 approximate CMY primaries\u2014the digital/print color model. Creates electric, almost glitch-aesthetic energy. Use sparingly on dark backgrounds for maximum impact.",
+    wcagAA: false,
+    wcagAAA: false
+  },
+  {
+    id: "citrus-burst",
+    name: "Citrus Burst",
+    description: "Maximum fresh impact",
+    category: "vibrant",
+    primary: "#65a30d",
+    secondary: "#7c3aed",
+    accent: "#14b8a6",
+    harmony: "Split-Complementary",
+    bestFor: ["Sports", "Energy Drinks", "Youth Brands"],
+    rationale: "Lime 600, Violet 600, and Teal 500 create intentional visual tension. The near-complementary lime/violet pairing vibrates with energy, while teal accent provides unexpected freshness. Bold and unapologetic.",
+    wcagAA: false,
+    wcagAAA: false
+  },
+  {
+    id: "fire-intensity",
+    name: "Fire Intensity",
+    description: "Passionate warmth progression",
+    category: "vibrant",
+    primary: "#b91c1c",
+    secondary: "#ea580c",
+    accent: "#fbbf24",
+    harmony: "Analogous (Warm)",
+    bestFor: ["Food Delivery", "Fitness", "Action Sports"],
+    rationale: "Red 700 \u2192 Orange 600 \u2192 Amber 400 represents heat intensity from coals to flame to spark. This warm analogous progression demands attention and creates urgency. Best balanced with plenty of whitespace.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "aurora-borealis",
+    name: "Aurora Borealis",
+    description: "Ethereal northern lights",
+    category: "vibrant",
+    primary: "#0891b2",
+    secondary: "#7c3aed",
+    accent: "#22c55e",
+    harmony: "Triadic",
+    bestFor: ["Astronomy Apps", "Science", "Innovation"],
+    rationale: "Cyan 600, Violet 600, and Green 500 capture the magical shifting hues of aurora displays. Equally spaced on the wheel, they create visual wonder without chaos. Perfect for science and exploration themes.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  // === MINIMAL ===
+  {
+    id: "swiss-mono",
+    name: "Swiss Mono",
+    description: "International style precision",
+    category: "minimal",
+    primary: "#000000",
+    secondary: "#52525b",
+    accent: "#2563eb",
+    harmony: "Achromatic + Accent",
+    bestFor: ["Typography", "Photography", "Editorial"],
+    rationale: "Pure black and Zinc 600 honor Swiss International Style. Blue 600 accent (classic 'international blue') provides subtle direction without disrupting minimalist purity. Maximum contrast, zero distraction.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "paper-whisper",
+    name: "Paper Whisper",
+    description: "Soft reading comfort",
+    category: "minimal",
+    primary: "#27272a",
+    secondary: "#71717a",
+    accent: "#a1a1aa",
+    harmony: "Monochromatic",
+    bestFor: ["Reading Apps", "Journaling", "Documentation"],
+    rationale: "Zinc 800, 500, and 400 create subtle hierarchy without color distraction. True monochrome reduces cognitive load for reading-heavy interfaces. Accent provides gentle distinction for interactive elements.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "cool-slate",
+    name: "Cool Slate",
+    description: "Technical quiet confidence",
+    category: "minimal",
+    primary: "#334155",
+    secondary: "#64748b",
+    accent: "#38bdf8",
+    harmony: "Analogous + Accent",
+    bestFor: ["Architecture Portfolios", "Consulting", "Legal Tech"],
+    rationale: "Slate 700 and 500 create cool, professional atmosphere. Sky 400 accent whispers rather than shouts\u2014perfect for subtle navigation cues and sparse interactive highlights.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "warm-neutral",
+    name: "Warm Neutral",
+    description: "Organic minimalism",
+    category: "minimal",
+    primary: "#292524",
+    secondary: "#78716c",
+    accent: "#92400e",
+    harmony: "Monochromatic + Accent",
+    bestFor: ["Artisan E-commerce", "Coffee Brands", "Craft"],
+    rationale: "Stone 800 and 500 provide warmth missing from pure grays. Amber 800 accent recalls coffee, leather, wood\u2014materials with character. Minimal but not cold, modern but not sterile.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  // === LUXURY ===
+  {
+    id: "royal-velvet",
+    name: "Royal Velvet",
+    description: "Regal opulent depth",
+    category: "luxury",
+    primary: "#4c1d95",
+    secondary: "#1e1b4b",
+    accent: "#d97706",
+    harmony: "Complementary",
+    bestFor: ["VIP Services", "Luxury Hotels", "Private Banking"],
+    rationale: "Violet 900 (deep purple) and Indigo 950 (near-black midnight) create layered richness. Amber 600 gold accent adds warmth and signals value. Historically associated with royalty and exclusivity.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "champagne-noir",
+    name: "Champagne Noir",
+    description: "High-fashion sophistication",
+    category: "luxury",
+    primary: "#0c0a09",
+    secondary: "#1c1917",
+    accent: "#d4af37",
+    harmony: "Monochromatic + Metallic",
+    bestFor: ["Fashion", "Jewelry", "Luxury Retail"],
+    rationale: "Stone 950 (warm black) and Stone 900 create subtle depth. True metallic gold (#D4AF37) elevates beyond standard amber. The warmth in blacks prevents coldness while maintaining elegance.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "emerald-club",
+    name: "Emerald Club",
+    description: "Old money establishment",
+    category: "luxury",
+    primary: "#064e3b",
+    secondary: "#166534",
+    accent: "#b45309",
+    harmony: "Analogous + Accent",
+    bestFor: ["Private Clubs", "Wealth Management", "Heritage Brands"],
+    rationale: "Emerald 900 and Green 800 create tone-on-tone richness associated with stability and tradition. Bronze/Amber 700 accent recalls old brass and mahogany. Communicates established trustworthiness.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "midnight-sapphire",
+    name: "Midnight Sapphire",
+    description: "Contemporary luxury tech",
+    category: "luxury",
+    primary: "#172554",
+    secondary: "#1e3a8a",
+    accent: "#fafafa",
+    harmony: "Monochromatic + Contrast",
+    bestFor: ["Luxury Auto", "Premium Electronics", "Elite Services"],
+    rationale: "Blue 950 and Blue 800 create depth like sapphire gemstone. Pure white (Zinc 50) accent cuts through dramatically. Modern luxury aesthetic\u2014think high-end automotive interfaces.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  // === PLAYFUL ===
+  {
+    id: "candy-shop",
+    name: "Candy Shop",
+    description: "Joyful youthful sweetness",
+    category: "playful",
+    primary: "#ec4899",
+    secondary: "#8b5cf6",
+    accent: "#facc15",
+    harmony: "Triadic",
+    bestFor: ["Kids Apps", "Toys", "Gaming", "Entertainment"],
+    rationale: "Pink 500 (bubble gum), Violet 500 (grape), Yellow 400 (lemon drop) evoke candy store joy. Classic gender-neutral playful combination. High saturation communicates energy and fun.",
+    wcagAA: false,
+    wcagAAA: false
+  },
+  {
+    id: "sunny-day",
+    name: "Sunny Day",
+    description: "Optimistic primary colors",
+    category: "playful",
+    primary: "#2563eb",
+    secondary: "#16a34a",
+    accent: "#fbbf24",
+    harmony: "Triadic (Primary-based)",
+    bestFor: ["Education", "Children's Apps", "Learning Platforms"],
+    rationale: "Blue 600 (sky), Green 600 (grass), Amber 400 (sun) are universally recognized and accessible. This primary-adjacent scheme feels familiar and approachable to all ages and cultures.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "mint-berry",
+    name: "Mint Berry",
+    description: "Fresh dessert sweetness",
+    category: "playful",
+    primary: "#10b981",
+    secondary: "#ec4899",
+    accent: "#06b6d4",
+    harmony: "Split-Complementary",
+    bestFor: ["Food Apps", "Lifestyle", "Wellness for Youth"],
+    rationale: "Emerald 500 (mint), Pink 500 (berry), Cyan 500 (ice) create dessert-inspired freshness. High contrast between green and pink creates visual interest while cyan cools the palette.",
+    wcagAA: false,
+    wcagAAA: false
+  },
+  {
+    id: "rainbow-pop",
+    name: "Rainbow Pop",
+    description: "Maximalist celebration",
+    category: "playful",
+    primary: "#f43f5e",
+    secondary: "#8b5cf6",
+    accent: "#06b6d4",
+    harmony: "Triadic",
+    bestFor: ["Pride Events", "Festivals", "Inclusive Communities"],
+    rationale: "Rose 500, Violet 500, Cyan 500 span the visible spectrum. Celebrates diversity and inclusion through color. Each hue can represent different aspects while maintaining visual harmony.",
+    wcagAA: false,
+    wcagAAA: false
+  },
+  // === ACCESSIBLE ===
+  {
+    id: "high-clarity",
+    name: "High Clarity",
+    description: "Maximum readability",
+    category: "accessible",
+    primary: "#1f2937",
+    secondary: "#4b5563",
+    accent: "#0284c7",
+    harmony: "Monochromatic + Accent",
+    bestFor: ["Government", "Healthcare", "Education"],
+    rationale: "Gray 800 and 600 on white exceed WCAG AAA contrast requirements (7:1+). Sky 600 accent passes AA for large text. Designed for universal accessibility including visual impairments.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "safe-contrast",
+    name: "Safe Contrast",
+    description: "Color-blind friendly",
+    category: "accessible",
+    primary: "#0369a1",
+    secondary: "#374151",
+    accent: "#ea580c",
+    harmony: "Complementary",
+    bestFor: ["Data Visualization", "Forms", "Critical Interfaces"],
+    rationale: "Sky 700 and Gray 700 are distinguishable across common color blindness types. Orange 600 accent avoids red-green confusion. Tested with deuteranopia, protanopia, and tritanopia simulations.",
+    wcagAA: true,
+    wcagAAA: false
+  },
+  {
+    id: "gentle-reader",
+    name: "Gentle Reader",
+    description: "Low eye strain",
+    category: "accessible",
+    primary: "#44403c",
+    secondary: "#78716c",
+    accent: "#2563eb",
+    harmony: "Monochromatic + Accent",
+    bestFor: ["Long-Form Reading", "Elderly Users", "Medical"],
+    rationale: "Stone 700 and 500 avoid harsh black while maintaining readability. Reduced contrast prevents eye fatigue for extended reading. Blue 600 accent is universally distinguishable.",
+    wcagAA: true,
+    wcagAAA: true
+  },
+  {
+    id: "clear-signal",
+    name: "Clear Signal",
+    description: "Semantic color safe",
+    category: "accessible",
+    primary: "#1e293b",
+    secondary: "#64748b",
+    accent: "#7c3aed",
+    harmony: "Analogous + Accent",
+    bestFor: ["Medical Interfaces", "Critical Systems", "Accessibility-First"],
+    rationale: "Slate 800 and 500 provide clear hierarchy. Violet 600 accent is visible to most color vision types and doesn't conflict with semantic red/green/yellow states. Reserves those colors for their intended meanings.",
+    wcagAA: true,
+    wcagAAA: true
+  }
+];
+function getPalettesByCategory(category) {
+  return colorPalettes.filter((p) => p.category === category);
+}
+function getPalettesByMood(mood) {
+  return colorPalettes.filter(
+    (p) => p.description.toLowerCase().includes(mood.toLowerCase()) || p.rationale?.toLowerCase().includes(mood.toLowerCase()) || p.mood?.some((m) => m.toLowerCase().includes(mood.toLowerCase()))
+  );
+}
+function getPalettesForUseCase(useCase) {
+  return colorPalettes.filter(
+    (p) => p.bestFor?.some((uc) => uc.toLowerCase().includes(useCase.toLowerCase()))
+  );
+}
+function getAccessiblePalettes(level = "AA") {
+  return colorPalettes.filter(
+    (p) => level === "AAA" ? p.wcagAAA : p.wcagAA
+  );
+}
+
+// ../tokens/src/color-utils.ts
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+function hexToHSL(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return { h: 0, s: 0, l: 0 };
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0, l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex(h, s, l) {
+  h = h / 360;
+  s = s / 100;
+  l = l / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function adjustLightness(hex, percent) {
+  const hsl = hexToHSL(hex);
+  const newL = Math.max(0, Math.min(100, hsl.l + percent));
+  return hslToHex(hsl.h, hsl.s, newL);
+}
+function adjustSaturation(hex, percent) {
+  const hsl = hexToHSL(hex);
+  const newS = Math.max(0, Math.min(100, hsl.s + percent));
+  return hslToHex(hsl.h, newS, hsl.l);
+}
+function rotateHue(hex, degrees) {
+  const hsl = hexToHSL(hex);
+  const newH = (hsl.h + degrees) % 360;
+  return hslToHex(newH, hsl.s, hsl.l);
+}
+function adjustOpacity(hex, opacity) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
+function getLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const srgb = c / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastRatio(hex1, hex2) {
+  const rgb1 = hexToRgb(hex1);
+  const rgb2 = hexToRgb(hex2);
+  if (!rgb1 || !rgb2) return 0;
+  const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
+  const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(lum1, lum2);
+  const darker = Math.min(lum1, lum2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function getOptimalForeground(bgHex, whiteHex = "#ffffff", blackHex = "#000000") {
+  const whiteRatio = getContrastRatio(bgHex, whiteHex);
+  const blackRatio = getContrastRatio(bgHex, blackHex);
+  return whiteRatio > blackRatio ? whiteHex : blackHex;
+}
+
+// ../tokens/src/token-graph.ts
+var primaryColorDerivations = {
+  // Links use primary color
+  "--color-link": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "Links inherit primary brand color"
+  },
+  // Focus ring uses primary color
+  "--color-ring": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "Focus rings use primary for brand consistency"
+  },
+  // Link hover is slightly darker primary
+  "--color-link-hover": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, -10),
+    description: "Link hover is 10% darker for visual feedback"
+  },
+  // Chart primary series
+  "--chart-1": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "First chart series uses primary"
+  },
+  // Chart secondary series (lighter tint)
+  "--chart-2": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, 20),
+    description: "Second chart series is lighter tint of primary"
+  },
+  // Chart tertiary series (darker shade)
+  "--chart-3": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, -15),
+    description: "Third chart series is darker shade of primary"
+  },
+  // Chart quaternary (desaturated primary)
+  "--chart-4": {
+    source: "--color-primary",
+    transform: (primary) => adjustSaturation(primary, -30),
+    description: "Fourth chart series is muted primary"
+  },
+  // Chart quinary (complementary color)
+  "--chart-5": {
+    source: "--color-primary",
+    transform: (primary) => rotateHue(primary, 180),
+    description: "Fifth chart series is complementary to primary"
+  }
+};
+var secondaryColorDerivations = {
+  // Hover states
+  "--color-hover": {
+    source: "--color-secondary",
+    transform: (secondary) => secondary,
+    description: "Hover backgrounds use secondary"
+  },
+  // Active states
+  "--color-active": {
+    source: "--color-secondary",
+    transform: (secondary) => adjustLightness(secondary, -5),
+    description: "Active state is slightly darker secondary"
+  },
+  // Muted backgrounds
+  "--color-muted": {
+    source: "--color-secondary",
+    transform: (secondary) => secondary,
+    description: "Muted sections use secondary color"
+  }
+};
+var accentColorDerivations = {
+  // Info semantic color uses accent
+  "--color-info": {
+    source: "--color-accent",
+    transform: (accent) => accent,
+    description: "Info semantic color uses accent"
+  },
+  // Info foreground calculated for contrast
+  "--color-info-foreground": {
+    source: "--color-accent",
+    transform: (accent) => getOptimalForeground(accent),
+    description: "Info foreground calculated for contrast"
+  }
+};
+var modeSpecificDerivations = {
+  "--color-primary-muted": {
+    light: {
+      source: "--color-primary",
+      transform: (primary) => adjustLightness(primary, 40),
+      description: "Muted primary for light backgrounds"
+    },
+    dark: {
+      source: "--color-primary",
+      transform: (primary) => adjustLightness(primary, -20),
+      description: "Muted primary for dark backgrounds"
+    }
+  },
+  "--color-primary-subtle": {
+    light: {
+      source: "--color-primary",
+      transform: (primary) => adjustOpacity(primary, 0.1),
+      description: "Subtle primary background for light mode"
+    },
+    dark: {
+      source: "--color-primary",
+      transform: (primary) => adjustOpacity(primary, 0.2),
+      description: "Subtle primary background for dark mode"
+    }
+  }
+};
+var tokenDependencyGraph = {
+  primary: primaryColorDerivations,
+  secondary: secondaryColorDerivations,
+  accent: accentColorDerivations,
+  modeSpecific: modeSpecificDerivations
+};
+function getDependentTokens(sourceToken) {
+  const dependents = [];
+  Object.entries(primaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      dependents.push(token);
+    }
+  });
+  Object.entries(secondaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      dependents.push(token);
+    }
+  });
+  Object.entries(accentColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      dependents.push(token);
+    }
+  });
+  return dependents;
+}
+function computeDerivedTokens(sourceToken, sourceValue, mode) {
+  const derived = {};
+  Object.entries(primaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(secondaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(accentColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(modeSpecificDerivations).forEach(([token, configs]) => {
+    const config = configs[mode];
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  return derived;
+}
+
+// ../tokens/src/fontThemes.ts
+var fontThemes = [
+  // === PROFESSIONAL ===
+  {
+    id: "studio",
+    name: "Studio",
+    description: "Professional and balanced, perfect for modern SaaS products",
+    category: "professional",
+    heading: "Outfit",
+    body: "Manrope",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.02em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["professional", "modern", "clean"],
+    bestFor: "SaaS products, business sites, dashboards",
+    pairing: "Sans + Sans (Geometric + Humanist)"
+  },
+  {
+    id: "modern-swiss",
+    name: "Modern Swiss",
+    description: "Clean and neutral, maximum readability",
+    category: "professional",
+    heading: "Inter",
+    body: "Inter",
+    mono: "JetBrains Mono",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.02em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.7" },
+    wcagReadable: true,
+    mood: ["minimal", "clean", "modern"],
+    bestFor: "Documentation, dashboards, data-heavy UIs",
+    pairing: "Sans (Single Font)"
+  },
+  {
+    id: "corporate-authority",
+    name: "Corporate Authority",
+    description: "Classic sans-serif with technical precision",
+    category: "professional",
+    heading: "Roboto",
+    body: "Roboto",
+    mono: "Roboto Mono",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.01em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["corporate", "reliable", "neutral"],
+    bestFor: "Enterprise software, Google-style products, admin panels",
+    pairing: "Sans (Roboto Family)"
+  },
+  // === EDITORIAL ===
+  {
+    id: "sage",
+    name: "Sage",
+    description: "Elegant serif heading with clean sans body",
+    category: "editorial",
+    heading: "Lora",
+    body: "Instrument Sans",
+    mono: "Fira Code",
+    headingWeight: "600",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.01em", body: "0" },
+    lineHeight: { heading: "1.3", body: "1.7" },
+    wcagReadable: true,
+    mood: ["elegant", "warm", "organic"],
+    bestFor: "Editorial sites, blogs, portfolios",
+    pairing: "Serif + Sans (Classic Editorial)"
+  },
+  {
+    id: "editorial-classic",
+    name: "Editorial Classic",
+    description: "Timeless serif pairing for long-form content",
+    category: "editorial",
+    heading: "Playfair Display",
+    body: "Source Sans Pro",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "0", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.7" },
+    wcagReadable: true,
+    mood: ["classic", "elegant", "readable"],
+    bestFor: "Magazines, blogs, long-form articles",
+    pairing: "Serif + Sans (High Contrast)"
+  },
+  {
+    id: "literary",
+    name: "Literary",
+    description: "Sophisticated serif pairing for premium content",
+    category: "editorial",
+    heading: "Merriweather",
+    body: "Lato",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "0", body: "0" },
+    lineHeight: { heading: "1.3", body: "1.7" },
+    wcagReadable: true,
+    mood: ["sophisticated", "literary", "warm"],
+    bestFor: "Publishing, literary journals, premium blogs",
+    pairing: "Serif + Sans (Warm & Readable)"
+  },
+  // === TECH ===
+  {
+    id: "volt",
+    name: "Volt",
+    description: "Bold and electric, one font for everything",
+    category: "tech",
+    heading: "Space Grotesk",
+    body: "Space Grotesk",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.03em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["bold", "modern", "tech"],
+    bestFor: "Tech startups, developer tools, portfolios",
+    pairing: "Sans (Single Font)"
+  },
+  {
+    id: "tech-mono",
+    name: "Tech Monospace",
+    description: "Monospace everything, for the hackers",
+    category: "tech",
+    heading: "JetBrains Mono",
+    body: "JetBrains Mono",
+    mono: "JetBrains Mono",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "0", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["tech", "hacker", "minimal"],
+    bestFor: "Developer tools, coding tutorials, terminal UIs",
+    pairing: "Mono (Single Font)"
+  },
+  {
+    id: "dev-tools",
+    name: "Dev Tools",
+    description: "GitHub-inspired clean technical aesthetic",
+    category: "tech",
+    heading: "IBM Plex Sans",
+    body: "IBM Plex Sans",
+    mono: "IBM Plex Mono",
+    headingWeight: "600",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.01em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["technical", "precise", "modern"],
+    bestFor: "Developer platforms, code editors, documentation",
+    pairing: "Sans (IBM Plex Family)"
+  },
+  // === FRIENDLY ===
+  {
+    id: "friendly-rounded",
+    name: "Friendly & Rounded",
+    description: "Approachable and warm, great for consumer apps",
+    category: "friendly",
+    heading: "Quicksand",
+    body: "Open Sans",
+    mono: "Fira Code",
+    headingWeight: "600",
+    bodyWeight: "400",
+    letterSpacing: { heading: "0", body: "0" },
+    lineHeight: { heading: "1.3", body: "1.7" },
+    wcagReadable: true,
+    mood: ["friendly", "approachable", "warm"],
+    bestFor: "Consumer apps, education, healthcare",
+    pairing: "Rounded Sans + Humanist Sans"
+  },
+  {
+    id: "warm-welcome",
+    name: "Warm Welcome",
+    description: "Inviting and accessible for all audiences",
+    category: "friendly",
+    heading: "Nunito",
+    body: "Nunito Sans",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.01em", body: "0" },
+    lineHeight: { heading: "1.3", body: "1.7" },
+    wcagReadable: true,
+    mood: ["welcoming", "friendly", "accessible"],
+    bestFor: "Community platforms, education, non-profits",
+    pairing: "Rounded Sans (Nunito Family)"
+  },
+  // === MINIMAL ===
+  {
+    id: "minimal-sans",
+    name: "Minimal Sans",
+    description: "Pure simplicity with Work Sans",
+    category: "minimal",
+    heading: "Work Sans",
+    body: "Work Sans",
+    mono: "Fira Code",
+    headingWeight: "600",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.02em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["minimal", "clean", "efficient"],
+    bestFor: "Minimalist sites, portfolios, agencies",
+    pairing: "Sans (Single Font)"
+  },
+  {
+    id: "system-ui",
+    name: "System UI",
+    description: "Native system fonts for instant familiarity",
+    category: "minimal",
+    heading: "System UI",
+    body: "System UI",
+    mono: "SF Mono",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.01em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["native", "fast", "familiar"],
+    bestFor: "Performance-critical apps, utilities, system tools",
+    pairing: "System Fonts (Zero Load Time)"
+  },
+  // === LUXURY ===
+  {
+    id: "luxury-serif",
+    name: "Luxury Serif",
+    description: "Sophisticated and high-end",
+    category: "luxury",
+    heading: "Cormorant Garamond",
+    body: "Raleway",
+    mono: "Fira Code",
+    headingWeight: "600",
+    bodyWeight: "300",
+    letterSpacing: { heading: "0.02em", body: "0.01em" },
+    lineHeight: { heading: "1.3", body: "1.7" },
+    wcagReadable: false,
+    // Thinner weights
+    mood: ["luxury", "elegant", "sophisticated"],
+    bestFor: "Fashion, luxury brands, high-end services",
+    pairing: "Serif + Thin Sans"
+  },
+  {
+    id: "prestige",
+    name: "Prestige",
+    description: "Refined elegance with Bodoni-inspired display",
+    category: "luxury",
+    heading: "Libre Bodoni",
+    body: "Montserrat",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "300",
+    letterSpacing: { heading: "0.03em", body: "0.02em" },
+    lineHeight: { heading: "1.2", body: "1.7" },
+    wcagReadable: false,
+    // Display font + thin weight
+    mood: ["prestige", "refined", "luxurious"],
+    bestFor: "Luxury fashion, jewelry, premium services",
+    pairing: "Serif Display + Geometric Sans"
+  },
+  // === CREATIVE ===
+  {
+    id: "creative-bold",
+    name: "Creative Bold",
+    description: "Strong personality with Poppins",
+    category: "creative",
+    heading: "Poppins",
+    body: "Poppins",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "-0.01em", body: "0" },
+    lineHeight: { heading: "1.2", body: "1.6" },
+    wcagReadable: true,
+    mood: ["bold", "creative", "energetic"],
+    bestFor: "Creative agencies, portfolios, marketing sites",
+    pairing: "Geometric Sans (Single Font)"
+  },
+  {
+    id: "artistic-flair",
+    name: "Artistic Flair",
+    description: "Expressive serif with modern sans",
+    category: "creative",
+    heading: "Abril Fatface",
+    body: "Work Sans",
+    mono: "Fira Code",
+    headingWeight: "400",
+    bodyWeight: "400",
+    letterSpacing: { heading: "0", body: "0" },
+    lineHeight: { heading: "1.1", body: "1.6" },
+    wcagReadable: true,
+    mood: ["artistic", "expressive", "bold"],
+    bestFor: "Art galleries, creative studios, designer portfolios",
+    pairing: "Display Serif + Neutral Sans"
+  },
+  // === PLAYFUL ===
+  {
+    id: "playful-rounded",
+    name: "Playful Rounded",
+    description: "Fun and energetic for youth audiences",
+    category: "playful",
+    heading: "Fredoka",
+    body: "Karla",
+    mono: "Fira Code",
+    headingWeight: "700",
+    bodyWeight: "400",
+    letterSpacing: { heading: "0", body: "0" },
+    lineHeight: { heading: "1.3", body: "1.6" },
+    wcagReadable: true,
+    mood: ["playful", "fun", "youthful"],
+    bestFor: "Kids apps, games, entertainment",
+    pairing: "Rounded Display + Grotesque Sans"
+  }
+];
+function getFontThemesByCategory(category) {
+  return fontThemes.filter((ft) => ft.category === category);
+}
+function getFontThemesByMood(mood) {
+  return fontThemes.filter(
+    (ft) => ft.description.toLowerCase().includes(mood.toLowerCase()) || ft.bestFor?.toLowerCase().includes(mood.toLowerCase()) || ft.mood?.some((m) => m.toLowerCase().includes(mood.toLowerCase()))
+  );
+}
+function getFontThemesForUseCase(useCase) {
+  return fontThemes.filter(
+    (ft) => ft.bestFor?.toLowerCase().includes(useCase.toLowerCase())
+  );
+}
+function getAccessibleFontThemes() {
+  return fontThemes.filter((ft) => ft.wcagReadable === true);
+}
+function getFontThemeById(id) {
+  return fontThemes.find((ft) => ft.id === id);
+}
+function generateScale(fontTheme) {
+  const headingWeight = parseInt(fontTheme.headingWeight || "700", 10);
+  const bodyWeight = parseInt(fontTheme.bodyWeight || "400", 10);
+  const headingLetterSpacing = fontTheme.letterSpacing?.heading || "-0.02em";
+  const bodyLetterSpacing = fontTheme.letterSpacing?.body || "0";
+  const headingLineHeight = parseFloat(fontTheme.lineHeight?.heading || "1.2");
+  const bodyLineHeight = parseFloat(fontTheme.lineHeight?.body || "1.6");
+  return {
+    display: {
+      fontFamily: fontTheme.heading,
+      weight: Math.min(headingWeight + 100, 800),
+      // Slightly bolder for display
+      size: 96,
+      lineHeight: 1.1,
+      letterSpacing: "-0.03em"
+    },
+    h1: {
+      fontFamily: fontTheme.heading,
+      weight: headingWeight,
+      size: 64,
+      lineHeight: headingLineHeight,
+      letterSpacing: headingLetterSpacing
+    },
+    h2: {
+      fontFamily: fontTheme.heading,
+      weight: Math.max(headingWeight - 100, 600),
+      // Slightly lighter than H1
+      size: 48,
+      lineHeight: 1.3,
+      letterSpacing: headingLetterSpacing === "-0.02em" ? "-0.01em" : headingLetterSpacing
+    },
+    h3: {
+      fontFamily: fontTheme.heading,
+      weight: Math.max(headingWeight - 100, 600),
+      size: 36,
+      lineHeight: 1.3,
+      letterSpacing: "0"
+    },
+    h4: {
+      fontFamily: fontTheme.heading,
+      weight: Math.max(headingWeight - 100, 600),
+      size: 24,
+      lineHeight: 1.4,
+      letterSpacing: "0"
+    },
+    body: {
+      fontFamily: fontTheme.body,
+      weight: bodyWeight,
+      size: 16,
+      lineHeight: bodyLineHeight,
+      letterSpacing: bodyLetterSpacing
+    },
+    small: {
+      fontFamily: fontTheme.body,
+      weight: bodyWeight,
+      size: 14,
+      lineHeight: 1.5,
+      letterSpacing: "0.01em"
+    },
+    code: {
+      fontFamily: fontTheme.mono,
+      weight: 400,
+      // Code is typically regular weight
+      size: 14,
+      lineHeight: 1.4,
+      letterSpacing: "0"
+    }
+  };
+}
+
+// ../tokens/src/index.ts
+var THEME_NAMES = ["studio", "sage", "volt"];
+var COLOR_MODES = ["light", "dark"];
+export {
+  COLOR_MODES,
+  THEME_NAMES,
+  accentColorDerivations,
+  adjustLightness,
+  adjustOpacity,
+  adjustSaturation,
+  baseTokens,
+  codeColors,
+  colorPalettes,
+  computeDerivedTokens,
+  fontFamilies,
+  fontLoadingConfig,
+  fontSizes,
+  fontThemes,
+  fontWeights,
+  generateScale,
+  getAccessibleFontThemes,
+  getAccessiblePalettes,
+  getContrastRatio,
+  getDependentTokens,
+  getFontThemeById,
+  getFontThemesByCategory,
+  getFontThemesByMood,
+  getFontThemesForUseCase,
+  getFontVariable,
+  getLuminance,
+  getOptimalForeground,
+  getPalettesByCategory,
+  getPalettesByMood,
+  getPalettesForUseCase,
+  getResponsiveFontSize,
+  getThemeFontVariables,
+  hexToHSL,
+  hexToRgb,
+  hslToHex,
+  letterSpacing,
+  lineHeights,
+  modeSpecificDerivations,
+  motion,
+  primaryColorDerivations,
+  rotateHue,
+  sageTokens,
+  secondaryColorDerivations,
+  semanticLetterSpacing,
+  semanticLineHeights,
+  semanticSizes,
+  semanticWeights,
+  spacing,
+  studioTokens,
+  syntaxColors,
+  tokenDependencyGraph,
+  typePresets,
+  typography,
+  typographySystem,
+  voltTokens
+};
+//# sourceMappingURL=tokens.mjs.map