@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap"); /* Design tokens — shadcn convention. AI may override VALUES per project domain, but the KEYS must stay (--background, --foreground, --primary, ...). shadcn/ui components (Button, Card, Dialog, …) require these exact names. Use semantic utilities: class="bg-background text-foreground border-border". NEVER use @apply or @import "tailwindcss" here — preview has no build step, both are silent no-ops. */ :root { /* Default: neutrální světlé plátno. Replace VALUES per project — never rename tokens. */ --background: oklch(1 0 0); --foreground: oklch(0.15 0.02 270); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 270); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 270); --primary: oklch(0.72 0.19 255); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.96 0.005 270); --secondary-foreground: oklch(0.15 0.02 270); --muted: oklch(0.96 0.005 270); --muted-foreground: oklch(0.5 0.02 270); --accent: oklch(0.72 0.19 255); --accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.6 0.22 25); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.92 0.005 270); --input: oklch(0.92 0.005 270); --ring: oklch(0.72 0.19 255); --radius: 0.75rem; } /* Dark theme — aktivní pouze třídou `dark` na (darkMode: 'class'). TOHLE JE ŠABLONA, NE HOTOVÁ PALETA. Když projekt používá tmavý režim, PŘEPIŠ tyhle hodnoty podle značky a oboru (teplota, sytost, akcent) — stejně jako u :root. Ponechat je beze změny znamená, že každý projekt vypadá identicky. Povrchy musí být odstupňované: background < card/popover < secondary/muted. --muted-foreground musí zůstat čitelný na --card (WCAG AA, min. 4.5:1). */ .dark { --background: oklch(0.18 0.015 270); --foreground: oklch(0.98 0 0); --card: oklch(0.23 0.018 270); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.23 0.018 270); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.72 0.19 255); --primary-foreground: oklch(0.15 0.01 270); --secondary: oklch(0.28 0.022 270); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.28 0.022 270); --muted-foreground: oklch(0.79 0.015 270); --accent: oklch(0.72 0.19 255); --accent-foreground: oklch(0.15 0.01 270); --destructive: oklch(0.63 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.32 0.02 270); --input: oklch(0.32 0.02 270); --ring: oklch(0.72 0.19 255); } /* Load distinctive fonts — replace per project (Instrument Serif, Syne, Bebas Neue, ...). Keep @import rules at the very top. */ html, body { font-family: "DM Sans", system-ui, sans-serif; } .font-display { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.02em; } html, body, #root { background: var(--background); color: var(--foreground); } /* Barevné schéma se řídí VÝHRADNĚ :root a .dark. Žádný globální @media (prefers-color-scheme: dark) override — nastavení OS nesmí přebíjet design zvolený pro projekt. */ /* Selection */ ::selection { background: var(--accent); color: var(--accent-foreground); } /* Focus ring */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* Animations */ @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .animate-fade-in { animation: fade-in 0.6s ease-out both; } .animate-scale-in { animation: scale-in 0.4s ease-out both; } .animate-slide-up { animation: slide-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* Stagger helpers — add style={{animationDelay: "120ms"}} on children */ .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-2px); }