// tokens/primitives/colors.ts
// Primitive tokens: raw color values in OKLCH
export const primitiveColors = {
  gray: {
    50:  "oklch(0.985 0 0)",
    100: "oklch(0.965 0 0)",
    200: "oklch(0.918 0 0)",
    300: "oklch(0.870 0 0)",
    400: "oklch(0.708 0 0)",
    500: "oklch(0.556 0 0)",
    600: "oklch(0.439 0 0)",
    700: "oklch(0.371 0 0)",
    800: "oklch(0.269 0 0)",
    900: "oklch(0.205 0 0)",
    950: "oklch(0.145 0 0)",
  },
  blue: {
    500: "oklch(0.623 0.214 259.53)",
    600: "oklch(0.546 0.214 262.88)",
    700: "oklch(0.488 0.200 264.38)",
  },
} as const;
 
// tokens/semantic/colors.ts
// Semantic tokens: purpose-mapped aliases
export const semanticColors = {
  light: {
    background: primitiveColors.gray[50],
    foreground: primitiveColors.gray[950],
    primary: primitiveColors.blue[600],
    "primary-foreground": "oklch(1 0 0)",
    muted: primitiveColors.gray[100],
    "muted-foreground": primitiveColors.gray[500],
    border: primitiveColors.gray[200],
    ring: primitiveColors.blue[500],
  },
  dark: {
    background: primitiveColors.gray[950],
    foreground: primitiveColors.gray[50],
    primary: primitiveColors.blue[500],
    "primary-foreground": primitiveColors.gray[950],
    muted: primitiveColors.gray[800],
    "muted-foreground": primitiveColors.gray[400],
    border: primitiveColors.gray[800],
    ring: primitiveColors.blue[600],
  },
} as const;

// ALWAYS: Use consistent prop patterns across all components
// ALWAYS: Support className for style overrides
// ALWAYS: Forward refs for composability
// ALWAYS: Use cva (class-variance-authority) for variants
 
import { cva, type VariantProps } from "class-variance-authority";
import { forwardRef } from "react";
import { cn } from "@/lib/utils";
 
const buttonVariants = cva(
  // Base styles applied to all variants
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        sm: "h-8 px-3 text-xs",
        default: "h-9 px-4 py-2",
        lg: "h-10 px-6 text-base",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);
 
interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}
 
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";
 
export { Button, buttonVariants };
export type { ButtonProps };

/* globals.css — Tailwind v4 CSS-first configuration */
@import "tailwindcss";
 
@theme {
  /* Colors from design tokens */
  --color-background: oklch(0.985 0 0);
  --color-foreground: oklch(0.145 0 0);
  --color-primary: oklch(0.546 0.214 262.88);
  --color-primary-foreground: oklch(1 0 0);
  --color-secondary: oklch(0.965 0 0);
  --color-secondary-foreground: oklch(0.205 0 0);
  --color-muted: oklch(0.965 0 0);
  --color-muted-foreground: oklch(0.556 0 0);
  --color-accent: oklch(0.965 0 0);
  --color-accent-foreground: oklch(0.205 0 0);
  --color-destructive: oklch(0.577 0.245 27.33);
  --color-border: oklch(0.918 0 0);
  --color-ring: oklch(0.623 0.214 259.53);
 
  /* Border radius scale */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
 
  /* Shadows (elevation system) */
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1);
}
 
/* Dark mode overrides */
.dark {
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
  --color-primary: oklch(0.623 0.214 259.53);
  --color-primary-foreground: oklch(0.145 0 0);
  --color-muted: oklch(0.269 0 0);
  --color-muted-foreground: oklch(0.708 0 0);
  --color-border: oklch(0.269 0 0);
}

// button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./button";
 
const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: "select",
      options: ["default", "destructive", "outline", "secondary", "ghost", "link"],
      description: "Visual style variant",
    },
    size: {
      control: "select",
      options: ["sm", "default", "lg", "icon"],
      description: "Size variant",
    },
    disabled: { control: "boolean" },
  },
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Default: Story = {
  args: { children: "Button" },
};
 
export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-4">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  ),
};
 
export const AllSizes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  ),
};

// button.test.tsx
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { axe, toHaveNoViolations } from "jest-axe";
import { Button } from "./button";
 
expect.extend(toHaveNoViolations);
 
describe("Button", () => {
  it("has no accessibility violations", async () => {
    const { container } = render(<Button>Click me</Button>);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
 
  it("is keyboard accessible", async () => {
    const user = userEvent.setup();
    const onClick = jest.fn();
    render(<Button onClick={onClick}>Click me</Button>);
 
    const button = screen.getByRole("button", { name: "Click me" });
    await user.tab();
    expect(button).toHaveFocus();
    await user.keyboard("{Enter}");
    expect(onClick).toHaveBeenCalledTimes(1);
  });
 
  it("shows disabled state correctly", () => {
    render(<Button disabled>Disabled</Button>);
    const button = screen.getByRole("button", { name: "Disabled" });
    expect(button).toBeDisabled();
    expect(button).toHaveClass("disabled:opacity-50");
  });
});