{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "news-cards",
  "title": "News cards",
  "description": "News cards is a production-ready cards component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "clsx",
    "framer-motion",
    "lucide-react",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/bjork-ui/cards/news-cards.tsx",
      "content": "\"use client\";\n\nimport { motion, AnimatePresence, useReducedMotion, LayoutGroup } from \"framer-motion\";\nimport { useState, useEffect } from \"react\";\nimport { BookmarkIcon, X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface NewsCard {\n  id: string;\n  title: string;\n  category: string;\n  subcategory: string;\n  timeAgo: string;\n  location: string;\n  image: string;\n  gradientColors?: string[];\n  content?: string[];\n}\n\ninterface StatusBar {\n  id: string;\n  category: string;\n  subcategory: string;\n  length: number; // 1-3 for different lengths\n  opacity: number; // 0.3-1 for different opacities\n}\n\ninterface NewsCardsProps {\n  title?: string;\n  subtitle?: string;\n  statusBars?: StatusBar[];\n  newsCards?: NewsCard[];\n  enableAnimations?: boolean;\n}\n\nconst defaultStatusBars: StatusBar[] = [\n  {\n    id: \"1\",\n    category: \"US Politics\",\n    subcategory: \"Donald Trump\",\n    length: 3,\n    opacity: 1,\n  },\n  {\n    id: \"2\",\n    category: \"US Politics\",\n    subcategory: \"Donald Trump\",\n    length: 2,\n    opacity: 0.7,\n  },\n  {\n    id: \"3\",\n    category: \"World News\",\n    subcategory: \"EU Policy\",\n    length: 1,\n    opacity: 0.4,\n  }\n];\n\nconst defaultNewsCards: NewsCard[] = [\n  {\n    id: \"1\",\n    title: \"RFK Jr: Trump to Announce Other Democrats Joining His Campaign\",\n    category: \"US Politics\",\n    subcategory: \"Donald Trump\",\n    timeAgo: \"15 min ago\",\n    location: \"United States\",\n    image: \"https://images.unsplash.com/photo-1560472355-536de3962603?w=1600&h=900&fit=crop&q=80\",\n    gradientColors: [\"from-[#ec5c13]/22\", \"to-[#8a7a60]/16\"],\n    content: [\n      \"In a surprising political development, Robert F. Kennedy Jr. announced that former President Donald Trump is preparing to reveal a significant number of Democratic politicians who will be joining his 2024 campaign effort. This unprecedented crossover could reshape the traditional party lines that have defined American politics for decades.\",\n      \"Sources close to the Kennedy campaign suggest that several high-profile Democrats, disillusioned with their party's current direction, have been quietly negotiating terms for their public endorsement of Trump. This move represents a dramatic shift in the political landscape and could signal broader realignment within American political parties.\",\n      \"The announcement is expected to include former senators, governors, and mayors from key swing states, potentially providing Trump with crucial credibility among moderate voters who have been skeptical of his candidacy. Political analysts are calling this development unprecedented in modern American politics.\",\n      \"Kennedy, who himself switched from the Democratic party, cited concerns about government overreach and censorship as primary motivations for these defections. The campaign promises that these revelations will demonstrate growing bipartisan support for Trump's vision of American governance.\",\n      \"Critics argue that this represents opportunistic politics rather than genuine ideological alignment, suggesting that these politicians are positioning themselves for potential appointments in a future Trump administration. However, supporters maintain that this reflects authentic concern about the country's direction.\",\n      \"The timing of this announcement, coming just months before the election, is seen as strategically calculated to maximize impact during the crucial campaign period when voter attention is at its peak.\"\n    ]\n  },\n  {\n    id: \"2\",\n    title: \"EU signs off on landmark migration and asylum policy reforms\",\n    category: \"US Politics\",\n    subcategory: \"Donald Trump\",\n    timeAgo: \"41 min ago\",\n    location: \"United States\",\n    image: \"https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?w=1600&h=900&fit=crop&q=80\",\n    gradientColors: [\"from-[#ec5c13]/18\", \"to-[#171717]/18\"],\n    content: [\n      \"The European Union has formally approved comprehensive migration and asylum policy reforms that represent the most significant overhaul of immigration law in the bloc's history. After years of contentious negotiations, member states have reached consensus on new frameworks that balance humanitarian obligations with security concerns.\",\n      \"The new policies establish unified standards for processing asylum claims across all EU member states, ending the current system where the burden disproportionately falls on border countries like Italy, Greece, and Spain. This redistribution mechanism aims to ensure more equitable sharing of responsibilities among member nations.\",\n      \"Key provisions include streamlined processing procedures that promise to reduce waiting times for asylum seekers from years to months, while also implementing stricter criteria for economic migrants. The reforms introduce enhanced background checking systems and improved coordination between national security agencies.\",\n      \"Human rights organizations have expressed mixed reactions to the changes. While praising improved processing times and standardized procedures, they raise concerns about potential restrictions that could limit access to protection for legitimate refugees fleeing persecution and conflict.\",\n      \"Implementation of these reforms will begin gradually over the next 18 months, with full enforcement expected by 2026. The EU has allocated significant funding to support member states in upgrading their immigration infrastructure and training personnel on new procedures.\",\n      \"This landmark agreement represents a rare moment of unity within the EU on one of its most divisive issues, potentially serving as a model for international cooperation on migration challenges facing developed nations worldwide.\"\n    ]\n  },\n  {\n    id: \"3\",\n    title: \"Climate Summit Reaches Historic Agreement on Carbon Neutrality\",\n    category: \"Environment\",\n    subcategory: \"Climate Change\",\n    timeAgo: \"1 hour ago\",\n    location: \"Global\",\n    image: \"https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?w=1600&h=900&fit=crop&q=80\",\n    gradientColors: [\"from-[#8a7a60]/18\", \"to-[#ec5c13]/12\"],\n    content: [\n      \"World leaders at the Global Climate Summit have reached a groundbreaking agreement committing 195 nations to achieve carbon neutrality by 2040, a decade earlier than previous targets. This historic accord represents the most ambitious climate action plan ever negotiated, with binding commitments and financial penalties for non-compliance.\",\n      \"The agreement establishes a revolutionary carbon credit system that will create economic incentives for rapid decarbonization while generating funding for climate adaptation projects in developing nations. Major industrial powers have committed to investing $2 trillion annually in renewable energy infrastructure and green technology development.\",\n      \"Breakthrough provisions include mandatory phase-out schedules for fossil fuel subsidies, universal adoption of renewable energy standards, and establishment of international carbon pricing mechanisms. The accord also addresses deforestation, with legally binding commitments to halt forest destruction and restore degraded ecosystems.\",\n      \"Scientific advisors to the summit praised the agreement as the first climate accord with enforcement mechanisms robust enough to achieve stated goals. Independent modeling suggests these measures could limit global warming to 1.5 degrees Celsius, preventing the most catastrophic climate impacts.\",\n      \"Implementation will require unprecedented international cooperation and technological innovation. The agreement establishes joint research initiatives for carbon capture, renewable energy storage, and sustainable agriculture practices that could transform how human civilization interacts with the natural environment.\",\n      \"Environmental activists, while celebrating this progress, emphasize that success depends entirely on rigorous implementation and continued political commitment from signatory nations, particularly as governments change through democratic processes.\"\n    ]\n  }\n];\n\nexport function NewsCards({\n  title = \"News Today\",\n  subtitle = \"Stories from all over the world\",\n  statusBars = defaultStatusBars,\n  newsCards = defaultNewsCards,\n  enableAnimations = true,\n}: NewsCardsProps) {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [selectedCard, setSelectedCard] = useState<NewsCard | null>(null);\n  const [bookmarkedCards, setBookmarkedCards] = useState<Set<string>>(new Set());\n  const shouldReduceMotion = useReducedMotion();\n  const shouldAnimate = enableAnimations && !shouldReduceMotion;\n\n  const toggleBookmark = (cardId: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    setBookmarkedCards(prev => {\n      const newSet = new Set(prev);\n      if (newSet.has(cardId)) {\n        newSet.delete(cardId);\n      } else {\n        newSet.add(cardId);\n      }\n      return newSet;\n    });\n  };\n\n  const openCard = (card: NewsCard) => {\n    setSelectedCard(card);\n  };\n\n  const closeCard = () => {\n    setSelectedCard(null);\n  };\n\n  useEffect(() => {\n    if (shouldAnimate) {\n      const timer = setTimeout(() => setIsLoaded(true), 100);\n      return () => clearTimeout(timer);\n    } else {\n      setIsLoaded(true);\n    }\n  }, [shouldAnimate]);\n\n  // Animation variants\n  const containerVariants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.1,\n        delayChildren: 0.2,\n      }\n    }\n  };\n\n  const headerVariants = {\n    hidden: {\n      opacity: 0,\n      y: -20,\n      scale: 0.95,\n      filter: \"blur(4px)\",\n    },\n    visible: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      filter: \"blur(0px)\",\n      transition: {\n        type: \"spring\",\n        stiffness: 400,\n        damping: 28,\n        mass: 0.6,\n      }\n    }\n  };\n\n  const statusBarContainerVariants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.15,\n        delayChildren: 0.3,\n      }\n    }\n  };\n\n  const statusBarVariants = {\n    hidden: {\n      opacity: 0,\n      scaleX: 0,\n      x: -20,\n    },\n    visible: {\n      opacity: 1,\n      scaleX: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 300,\n        damping: 25,\n        scaleX: { type: \"spring\", stiffness: 400, damping: 30 }\n      }\n    }\n  };\n\n  const cardContainerVariants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.12,\n        delayChildren: 0.8,\n      }\n    }\n  };\n\n  const cardVariants = {\n    hidden: {\n      opacity: 0,\n      y: 30,\n      scale: 0.9,\n      filter: \"blur(6px)\",\n    },\n    visible: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      filter: \"blur(0px)\",\n      transition: {\n        type: \"spring\",\n        stiffness: 300,\n        damping: 28,\n        mass: 0.8,\n      }\n    }\n  };\n\n  return (\n    <motion.div\n      className=\"mx-auto w-full max-w-6xl p-6 text-foreground\"\n      initial={shouldAnimate ? \"hidden\" : \"visible\"}\n      animate={isLoaded ? \"visible\" : \"hidden\"}\n      variants={shouldAnimate ? containerVariants : {}}\n    >\n             {/* Header */}\n       <motion.div\n         className=\"mb-8\"\n         variants={shouldAnimate ? headerVariants : {}}\n       >\n         <h1 className=\"text-4xl font-bold mb-2\">{title}</h1>\n         <p className=\"text-muted-foreground text-lg\">{subtitle}</p>\n\n         {/* Simple Border Lines */}\n         <motion.div\n           className=\"mt-6 space-y-1\"\n           variants={shouldAnimate ? statusBarContainerVariants : {}}\n         >\n           {statusBars.map((bar, index) => (\n             <motion.div\n               key={bar.id}\n             className={cn(\"h-0.5 rounded-full\", bar.id === \"1\" ? \"bg-[#ec5c13]\" : bar.id === \"2\" ? \"bg-[#ec5c13]/55\" : \"bg-[#8a7a60]/45\")}\n               style={{\n                 opacity: bar.opacity,\n                 width: `${(bar.length / 3) * 100}%`\n               }}\n               variants={shouldAnimate ? statusBarVariants : {}}\n               initial={{ scaleX: 0 }}\n               animate={{ scaleX: 1 }}\n               transition={{\n                 delay: 0.3 + (index * 0.1),\n                 type: \"spring\",\n                 stiffness: 400,\n                 damping: 30\n               }}\n             />\n           ))}\n         </motion.div>\n       </motion.div>\n\n                    {/* News Cards with Shared Layout */}\n       <LayoutGroup>\n         <motion.div\n           className=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-8\"\n           variants={shouldAnimate ? cardContainerVariants : {}}\n         >\n          {newsCards.map((card) => {\n             if (selectedCard?.id === card.id) {\n               return null; // Don't render the compact card when expanded\n             }\n\n             return (\n               <motion.article\n                 key={card.id}\n                 layoutId={`card-${card.id}`}\n                 className=\"group cursor-pointer overflow-hidden rounded-[20px] border border-[var(--bjork-border)] bg-[var(--bjork-surface)] text-[var(--bjork-text)] [box-shadow:var(--bjork-shadow-surface)] transition-all duration-300 dark:border-[#161616] dark:bg-[#121212] dark:text-[#ededed] dark:shadow-[inset_0_7px_14px_rgba(255,255,255,0.03),inset_0_0.5px_0.5px_rgba(255,255,255,0.06),0_18px_34px_-16px_rgba(0,0,0,0.9)]\"\n                 variants={shouldAnimate ? cardVariants : {}}\n                 whileHover={shouldAnimate ? {\n                   y: -4,\n                   scale: 1.01,\n                   transition: { type: \"spring\", stiffness: 400, damping: 25 }\n                 } : {}}\n                 onClick={() => openCard(card)}\n               >\n                 {/* Image with gradient overlay */}\n                 <motion.div\n                   layoutId={`card-image-${card.id}`}\n                   className=\"relative h-56 overflow-hidden bg-[var(--bjork-panel)] dark:bg-[#090909]\"\n                 >\n                   <img\n                     src={card.image}\n                     alt={card.title}\n                     className=\"w-full h-full object-cover transform-gpu group-hover:scale-105 transition-transform duration-700 ease-out\"\n                   />\n                   <div className=\"absolute inset-x-0 bottom-0 h-1/5 bg-gradient-to-t from-background/80 to-transparent\"></div>\n                   {card.gradientColors && (\n                     <div className={`absolute inset-x-0 bottom-0 h-1/5 bg-gradient-to-t ${card.gradientColors[0]} ${card.gradientColors[1]} to-transparent`}></div>\n                   )}\n\n                   {/* Bookmark icon */}\n                   <motion.div\n                     className=\"absolute top-3 right-3\"\n                     initial={{ opacity: 0, scale: 0.8 }}\n                     animate={{ opacity: 1, scale: 1 }}\n                     transition={{ delay: 0.6, type: \"spring\", stiffness: 400, damping: 25 }}\n                     whileHover={{ scale: 1.1 }}\n                     whileTap={{ scale: 0.9 }}\n                     onClick={(e) => toggleBookmark(card.id, e)}\n                   >\n                     <BookmarkIcon\n                       className={`w-5 h-5 transition-colors cursor-pointer ${\n                         bookmarkedCards.has(card.id)\n                           ? 'fill-[#ec5c13] text-[#ec5c13]'\n                           : 'text-white/80 hover:text-white'\n                       }`}\n                     />\n                   </motion.div>\n\n                   {/* Category and time info */}\n                   <motion.div\n                     className=\"absolute bottom-3 left-3 text-white\"\n                     initial={{ opacity: 0, y: 10 }}\n                     animate={{ opacity: 1, y: 0 }}\n                     transition={{ delay: 0.5, type: \"spring\", stiffness: 400, damping: 25 }}\n                   >\n                     <div className=\"text-xs mb-1 opacity-90\">\n                       {card.category}, {card.subcategory}\n                     </div>\n                     <div className=\"text-xs opacity-75\">\n                       {card.timeAgo}, {card.location}\n                     </div>\n                   </motion.div>\n                 </motion.div>\n\n                 {/* Content */}\n                 <motion.div\n                   layoutId={`card-content-${card.id}`}\n                   className=\"p-6\"\n                 >\n                   <motion.h3\n                     layoutId={`card-title-${card.id}`}\n                     className=\"line-clamp-3 text-lg font-semibold leading-tight transition-colors group-hover:text-[#bd4514] dark:group-hover:text-[#d86a2c]\"\n                   >\n                     {card.title}\n                   </motion.h3>\n                 </motion.div>\n               </motion.article>\n             );\n           })}\n         </motion.div>\n\n         {/* Expanded Card Modal */}\n         <AnimatePresence>\n           {selectedCard && (\n             <>\n               {/* Backdrop */}\n               <motion.div\n                 className=\"fixed inset-0 bg-background/80 backdrop-blur-sm z-40\"\n                 initial={{ opacity: 0 }}\n                 animate={{ opacity: 1 }}\n                 exit={{ opacity: 0 }}\n                 onClick={closeCard}\n               />\n\n               {/* Expanded Card */}\n               <motion.div\n                 layoutId={`card-${selectedCard.id}`}\n                 className=\"fixed inset-4 z-50 overflow-hidden rounded-[20px] border border-[var(--bjork-border)] bg-[var(--bjork-surface)] text-[var(--bjork-text)] [box-shadow:var(--bjork-shadow-menu)] dark:border-[#161616] dark:bg-[#121212] dark:text-[#ededed] dark:shadow-[inset_0_7px_14px_rgba(255,255,255,0.03),inset_0_0.5px_0.5px_rgba(255,255,255,0.06),0_24px_48px_-18px_rgba(0,0,0,0.95)] md:inset-8 lg:inset-16\"\n               >\n                 {/* Close Button */}\n                 <motion.button\n                   className=\"absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-[#090909]/78 text-white backdrop-blur-md transition-colors hover:bg-[#161616]\"\n                   initial={{ opacity: 0, scale: 0 }}\n                   animate={{ opacity: 1, scale: 1 }}\n                   transition={{ delay: 0.2 }}\n                   whileHover={{ scale: 1.1 }}\n                   whileTap={{ scale: 0.9 }}\n                   onClick={closeCard}\n                 >\n                   <X className=\"w-4 h-4\" />\n                 </motion.button>\n\n                 <div className=\"h-full overflow-y-auto\">\n                   {/* Header Image */}\n                   <motion.div\n                     layoutId={`card-image-${selectedCard.id}`}\n                     className=\"relative h-64 md:h-80\"\n                   >\n                     <img\n                       src={selectedCard.image}\n                       alt={selectedCard.title}\n                       className=\"w-full h-full object-cover\"\n                     />\n                     <div className=\"absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-background/90 to-transparent\"></div>\n                     {selectedCard.gradientColors && (\n                       <div className={`absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t ${selectedCard.gradientColors[0]} ${selectedCard.gradientColors[1]} to-transparent`}></div>\n                     )}\n\n                     {/* Image overlay info */}\n                     <div className=\"absolute bottom-4 left-4 text-white\">\n                       <div className=\"text-sm mb-1 opacity-90\">{selectedCard.category}, {selectedCard.subcategory}</div>\n                       <div className=\"text-sm opacity-75\">{selectedCard.timeAgo}, {selectedCard.location}</div>\n                     </div>\n                   </motion.div>\n\n                   {/* Content */}\n                   <motion.div\n                     layoutId={`card-content-${selectedCard.id}`}\n                     className=\"p-6 md:p-8\"\n                   >\n                     <motion.h1\n                       layoutId={`card-title-${selectedCard.id}`}\n                       className=\"text-2xl md:text-3xl font-bold mb-6\"\n                     >\n                       {selectedCard.title}\n                     </motion.h1>\n\n                     <motion.div\n                       className=\"prose prose-lg max-w-none text-muted-foreground\"\n                       initial={{ opacity: 0, y: 20 }}\n                       animate={{ opacity: 1, y: 0 }}\n                       transition={{ delay: 0.3, duration: 0.4 }}\n                     >\n                       {selectedCard.content ? (\n                         selectedCard.content.map((paragraph, index) => (\n                           <p key={index} className=\"mb-4\">\n                             {paragraph}\n                           </p>\n                         ))\n                       ) : (\n                         <>\n                           <p className=\"mb-4\">\n                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                           </p>\n                           <p className=\"mb-4\">\n                             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                           </p>\n                           <p className=\"mb-4\">\n                             Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n                           </p>\n                           <p className=\"mb-4\">\n                             Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.\n                           </p>\n                           <p>\n                             At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.\n                           </p>\n                         </>\n                       )}\n                     </motion.div>\n                   </motion.div>\n                 </div>\n               </motion.div>\n             </>\n           )}\n         </AnimatePresence>\n       </LayoutGroup>\n     </motion.div>\n   );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/cards/news-cards.tsx"
    },
    {
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "@lib/utils.ts"
    }
  ],
  "cssVars": {
    "light": {
      "bjork-bg": "#f7f3ea",
      "bjork-surface": "#fffcf6",
      "bjork-surface-muted": "rgba(250, 246, 237, 0.94)",
      "bjork-surface-hover": "#f5efe3",
      "bjork-surface-active": "#efe7d8",
      "bjork-panel": "#f8f2e7",
      "bjork-menu": "rgba(255, 252, 246, 0.98)",
      "bjork-field": "rgba(255, 252, 246, 0.96)",
      "bjork-field-muted": "rgba(248, 242, 231, 0.82)",
      "bjork-field-inset": "rgba(239, 231, 216, 0.72)",
      "bjork-error-bg": "#fff0e8",
      "bjork-text": "#171717",
      "bjork-text-strong": "rgba(23, 23, 23, 0.9)",
      "bjork-text-medium": "rgba(23, 23, 23, 0.72)",
      "bjork-text-muted": "rgba(23, 23, 23, 0.52)",
      "bjork-text-soft": "rgba(23, 23, 23, 0.36)",
      "bjork-text-faint": "rgba(23, 23, 23, 0.22)",
      "bjork-inverted-text": "#fff8f0",
      "bjork-border": "#eee6db",
      "bjork-border-muted": "#f5ede2",
      "bjork-border-strong": "#e1d7c8",
      "bjork-thumb": "#a49b8e",
      "bjork-track": "#ded6ca",
      "bjork-accent": "#ec7d43",
      "bjork-accent-hover": "#f0935f",
      "bjork-accent-soft": "rgba(236, 125, 67, 0.1)",
      "bjork-accent-muted": "rgba(236, 125, 67, 0.2)",
      "bjork-accent-badge": "rgba(236, 125, 67, 0.16)",
      "bjork-accent-badge-foreground": "#8d421d",
      "bjork-accent-foreground": "#3f2112",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)",
      "bjork-ring-offset": "#f7f3ea"
    },
    "dark": {
      "bjork-bg": "#111111",
      "bjork-surface": "#121212",
      "bjork-surface-muted": "rgba(22, 22, 22, 0.92)",
      "bjork-surface-hover": "#161616",
      "bjork-surface-active": "#202020",
      "bjork-panel": "#0d0d0d",
      "bjork-menu": "rgba(18, 18, 18, 0.98)",
      "bjork-field": "rgba(18, 18, 18, 0.95)",
      "bjork-field-muted": "rgba(18, 18, 18, 0.55)",
      "bjork-field-inset": "rgba(9, 9, 9, 0.75)",
      "bjork-error-bg": "#130d0a",
      "bjork-text": "#ededed",
      "bjork-text-strong": "rgba(237, 237, 237, 0.9)",
      "bjork-text-medium": "rgba(237, 237, 237, 0.72)",
      "bjork-text-muted": "rgba(237, 237, 237, 0.52)",
      "bjork-text-soft": "rgba(237, 237, 237, 0.36)",
      "bjork-text-faint": "rgba(237, 237, 237, 0.22)",
      "bjork-inverted-text": "#080808",
      "bjork-border": "#232323",
      "bjork-border-muted": "#1c1c1c",
      "bjork-border-strong": "#343434",
      "bjork-thumb": "#626262",
      "bjork-track": "#090909",
      "bjork-accent": "#ec5c13",
      "bjork-accent-hover": "#f07832",
      "bjork-accent-soft": "rgba(236, 92, 19, 0.12)",
      "bjork-accent-muted": "rgba(236, 92, 19, 0.24)",
      "bjork-accent-badge": "#ec5c13",
      "bjork-accent-badge-foreground": "#fff2ea",
      "bjork-accent-foreground": "#fff2ea",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)",
      "bjork-ring-offset": "#080808"
    }
  },
  "css": {
    ".bjork-range": {
      "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)"
    },
    ".bjork-range::-webkit-slider-thumb": {
      "appearance": "none",
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-range::-moz-range-thumb": {
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-layered-button-accent, .bjork-layered-button-raised": {
      "position": "relative",
      "isolation": "isolate",
      "appearance": "none",
      "overflow": "hidden",
      "border": "0",
      "border-radius": "13px",
      "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
      "transition": "filter 150ms ease-out, box-shadow 150ms ease-out"
    },
    ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": {
      "position": "absolute",
      "inset": "0",
      "pointer-events": "none",
      "content": "\"\"",
      "border": "1.5px solid transparent",
      "border-radius": "inherit",
      "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box",
      "mix-blend-mode": "overlay",
      "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "-webkit-mask-clip": "padding-box, border-box",
      "mask-clip": "padding-box, border-box",
      "-webkit-mask-origin": "padding-box, border-box",
      "mask-origin": "padding-box, border-box",
      "-webkit-mask-composite": "xor",
      "mask-composite": "exclude"
    },
    ".bjork-layered-button-accent": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000040",
      "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)"
    },
    ".bjork-layered-button-raised": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))"
    },
    ".dark .bjork-layered-button-raised": {
      "color": "oklch(0.2574 0.0056 265)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))"
    },
    "@media (hover: hover)": {
      ".bjork-layered-button-accent:hover": {
        "filter": "brightness(1.08) saturate(1.04)"
      },
      ".bjork-layered-button-raised:hover": {
        "filter": "brightness(1.08) contrast(0.9)"
      }
    }
  },
  "meta": {
    "collection": "Cards",
    "registryUrl": "https://ui.isaiahbjork.com/news-cards.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/news-cards.json"
  },
  "type": "registry:component"
}