/* Karam design system: variables and lightweight utilities */

:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Karam brand colors - gradient from deep blue to vibrant purple */
    --primary: 247 100% 53%;
    --primary-foreground: 0 0% 100%;
    --primary-end: 267 100% 72%;

    --secondary: 267 100% 72%;
    --secondary-foreground: 0 0% 100%;

    --muted: 240 5% 96%;
    --muted-foreground: 240 4% 46%;

    --accent: 247 100% 53%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 240 6% 90%;
    --input: 240 6% 90%;
    --ring: 247 100% 53%;

    --radius: 1rem;

    /* Gradient definitions */
    --gradient-primary: linear-gradient(90deg, hsl(247 100% 53%) 0%, hsl(267 100% 72%) 100%);
    --gradient-primary-hover: linear-gradient(90deg, hsl(247 100% 58%) 0%, hsl(267 100% 77%) 100%);

    /* Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 0 0% 100%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 0 0% 100%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 0 0% 100%;

    --primary: 247 100% 53%;
    --primary-foreground: 0 0% 100%;
    --primary-end: 267 100% 72%;

    --secondary: 267 100% 72%;
    --secondary-foreground: 0 0% 100%;

    --muted: 240 4% 16%;
    --muted-foreground: 240 5% 65%;

    --accent: 247 100% 53%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 240 4% 16%;
    --input: 240 4% 16%;
    --ring: 247 100% 53%;

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --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: 217.2 91.2% 59.8%;
}

/* Base */
* { border-color: hsl(var(--border)); }
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: 'Tajawal', sans-serif; }

/* Token utilities approximating shadcn naming */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.border-border { border-color: hsl(var(--border)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }

/* Simple substitutes for JIT-only classes */
.bg-muted-30 { background-color: hsla(var(--muted) / 0.3); }

/* Custom components */
.gradient-primary { background: var(--gradient-primary); }
.gradient-primary-hover:hover { background: var(--gradient-primary-hover); }
.glass-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); }
.text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }