@tailwind base;
@tailwind components;
@tailwind utilities;


/* HRMSElegance Design System */
:root {
  /* Background - Apple System Grouped #F2F2F7 */
  --background: 240 14% 96%;
  --foreground: 0 0% 0%;

  /* Cards - White */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 0%;

  /* Popovers */
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 0%;

  /* Primary - csPrimary #008CF0 */
  --primary: 205 100% 47.1%;
  --primary-foreground: 0 0% 100%;

  /* Secondary - csSecondary #383B53 */
  --secondary: 233 19.4% 27.3%;
  --secondary-foreground: 0 0% 100%;

  /* Muted - #8E8E93 (System Gray) */
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;

  /* Accent */
  --accent: 240 14% 96%;
  --accent-foreground: 0 0% 0%;

  /* Destructive - #FF4D4F */
  --destructive: 359 100% 65.1%;
  --destructive-foreground: 0 0% 100%;

  /* Status Colors */
  --success: 96 74.6% 43.5%; /* #52C41A */
  --warning: 40 95.8% 52.9%; /* #FAAD14 */
  --error: 359 100% 65.1%; /* #FF4D4F */

  /* Borders & Input */
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 205 100% 47.1%;

  /* Base Radius - 16px */
  --radius: 1rem;

  /* Sidebar - Theme-aware */
  --sidebar: 0 0% 100%; /* White in light mode */
  --sidebar-foreground: 0 0% 0%;
  --sidebar-primary: 205 100% 47.1%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 14% 96%;
  --sidebar-accent-foreground: 0 0% 0%;
  --sidebar-border: 240 5.9% 90%;
  --sidebar-ring: 205 100% 47.1%;

  /* Charts */
  --chart-1: 205 100% 47.1%; /* Primary Blue */
  --chart-2: 96 74.6% 43.5%; /* Success Green */
  --chart-3: 40 95.8% 52.9%; /* Warning Amber */
  --chart-4: 359 100% 65.1%; /* Error Red */
  --chart-5: 178 47.5% 59.2%; /* Teal */
}

.dark {
  /* True Black Background */
  --background: 0 0% 0%;
  --foreground: 0 0% 98%;

  /* Dark Grey Cards - #1C1C1E (iOS Dark) */
  --card: 240 4% 11%;
  --card-foreground: 0 0% 98%;

  --popover: 240 4% 11%;
  --popover-foreground: 0 0% 98%;

  /* Primary stays same */
  --primary: 205 100% 47.1%;
  --primary-foreground: 0 0% 100%;

  /* Secondary stays same */
  --secondary: 233 19.4% 27.3%;
  --secondary-foreground: 0 0% 100%;

  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;

  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;

  --destructive: 359 100% 65.1%;
  --destructive-foreground: 0 0% 100%;

  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 205 100% 47.1%;

  /* Sidebar in dark mode - #1C1C1E */
  --sidebar: 240 4% 11%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 205 100% 47.1%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 205 100% 47.1%;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        success: "hsl(var(--success))",
        warning: "hsl(var(--warning))",
        error: "hsl(var(--error))",
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        chart: {
          "1": "hsl(var(--chart-1))",
          "2": "hsl(var(--chart-2))",
          "3": "hsl(var(--chart-3))",
          "4": "hsl(var(--chart-4))",
          "5": "hsl(var(--chart-5))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
        xl: "calc(var(--radius) + 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

export default config;

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

# Core UI dependencies
npm install clsx tailwind-merge class-variance-authority

# Radix UI primitives
npm install @radix-ui/react-slot @radix-ui/react-label
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
npm install @radix-ui/react-select @radix-ui/react-scroll-area
npm install @radix-ui/react-separator @radix-ui/react-avatar
npm install @radix-ui/react-tooltip @radix-ui/react-tabs
npm install @radix-ui/react-checkbox @radix-ui/react-switch

# Icons and animations
npm install lucide-react framer-motion

# Toast notifications
npm install sonner

# Form handling
npm install react-hook-form @hookform/resolvers zod

# Dev dependencies
npm install -D tailwindcss-animate

apps/web/
├── app/
│   ├── globals.css              # Design tokens
│   ├── layout.tsx               # Root layout
│   └── (dashboard)/
│       └── layout.tsx           # Dashboard layout
├── components/
│   ├── ui/                      # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   └── ...
│   ├── layout/                  # Layout components
│   │   ├── sidebar.tsx
│   │   ├── top-bar.tsx
│   │   └── app-shell.tsx
│   └── providers/
│       └── theme-provider.tsx
├── lib/
│   └── utils.ts                 # cn() utility
├── hooks/
│   └── use-mobile.tsx
├── tailwind.config.ts
├── postcss.config.mjs
└── components.json