@import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --font-manrope: var(--font-manrope); --font-inter: var(--font-inter); --font-geist-sans: var(--font-geist-sans); --font-geist-mono: var(--font-geist-mono); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Тени */ --shadow-blue-glow: 0px 5px 14px 0px rgba(59, 130, 246, 0.4), 0px 4px 6px 0px rgba(59, 130, 246, 0.1); --shadow-blue-glow-2: 0px 0px 19px 0px rgba(59, 130, 246, 0.3), 0px 0px 0px 0px rgba(59, 130, 246, 0.2); --shadow-black-glow: 0px 8px 15px 0px #00000026, 0px 4px 6px 0px #00000014; --shadow-coupon: 0px 20px 40px 0px #0000004d, 0px 8px 16px 0px #00000033; } :root { --radius: 0.625rem; /* === ПЕРЕОПРЕДЕЛЯЕМ SHADCN ПЕРЕМЕННЫЕ ПОД НАШИ НУЖДЫ === */ /* Основные цвета */ --background: oklch(1 0 0); /* Белый фон */ --foreground: oklch(0 0 0); /* Черный текст */ --card: oklch(1 0 0); /* Белый фон карточек */ --card-foreground: oklch( 0.2781 0.0296 256.85 ); /* #1f2937 - Темно-синий текст карточек */ --popover: oklch(1 0 0); /* Белый фон попапов */ --popover-foreground: oklch(0 0 0); /* Черный текст попапов */ /* Primary - наш синий */ --primary: oklch(0.6231 0.188 259.81); /* #3B82F6 */ --primary-foreground: oklch(1 0 0); /* Белый текст на синем */ /* Secondary - светло-серый */ --secondary: oklch(0.97 0 0); /* Светло-серый фон */ --secondary-foreground: oklch(0.2795 0.0368 260.03); /* Темно-серый текст */ /* Muted - для второстепенного контента */ --muted: oklch(0.97 0 0); /* Светло-серый фон */ --muted-foreground: oklch(0.59 0.02 260.8); /* #64748B - серый текст */ /* Accent - для акцентов */ --accent: oklch(0.97 0 0); /* Светло-серый фон */ --accent-foreground: oklch(0.2795 0.0368 260.03); /* Темно-серый текст */ /* Destructive - красный для ошибок */ --destructive: oklch(0.577 0.245 27.325); /* Success - зеленый для успешных действий */ --success: oklch(0.36 0.245 27.325); /* Border и Input */ --border: oklch(0.9288 0.0126 255.51); /* Светло-серая граница */ --input: oklch(0.922 0 0); /* Светло-серый фон инпутов */ --ring: oklch(0.6231 0.188 259.81); /* Синий фокус */ /* Chart цвета - можно оставить как есть или переопределить */ --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); /* Sidebar - можно оставить как есть */ --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); /* === ДОПОЛНИТЕЛЬНЫЕ ПЕРЕМЕННЫЕ ТОЛЬКО ДЛЯ ГРАДИЕНТОВ === */ --primary-light: oklch(0.954 0.025 259.8); /* #EBF5FF - для градиента */ --primary-lighter: oklch(0.909 0.045 259.8); /* #DBEAFE - для градиента */ --primary-dark: oklch(0.5461 0.2152 262.88); /* #2563EB - для градиента */ } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } }