@import 'tailwindcss';

/* ============================================
   Tailwind Theme Extensions for Kuldvillak
   ============================================ */

@theme {
	/* Colors - Reference CSS variables for dynamic theming */
	--color-kv-blue: var(--kv-blue);
	--color-kv-yellow: var(--kv-yellow);
	--color-kv-green: #009900;
	--color-kv-red: #FF3333;
	--color-kv-black: var(--kv-background);
	--color-kv-white: var(--kv-text);
	/* Additional theme-aware colors */
	--color-kv-text: var(--kv-text);
	--color-kv-background: var(--kv-background);
	/* Fixed game board color - not affected by theme */
	--color-kv-board: #003B9B;
	
	/* Font Families */
	--font-kv-title: 'Swiss 921', sans-serif;
	--font-kv-body: 'Swiss 921', sans-serif;
	--font-kv-price: 'Bebas Neue', sans-serif;
	--font-kv-question: 'ITC Korinna', serif;
}

/* Text shadow utilities - Updated for new design */
.kv-shadow-text {
	text-shadow: 6px 6px 4px rgba(0, 0, 0, 0.5);
}
.kv-shadow-title {
	text-shadow: 6px 6px 4px rgba(0, 0, 0, 0.5);
}
.kv-shadow-price {
	text-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5), 0 4px 4px rgba(0, 0, 0, 0.25);
}
.kv-shadow-question {
	text-shadow: 6px 6px 4px rgba(0, 0, 0, 0.5);
}
.kv-shadow-button {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 8px 8px 4px rgba(0, 0, 0, 0.5);
}

/* Icon styling - uses secondary color */
.kv-icon {
	color: var(--kv-yellow);
}

/* ============================================
   Kuldvillak Custom Fonts
   ============================================ */

/* Bebas Neue for prices - local font */
@font-face {
	font-family: 'Bebas Neue';
	src: url('/fonts/BebasNeue-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Swiss 921';
	src: url('/fonts/Swiss 921 Regular.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'ITC Korinna';
	src: url('/fonts/ITC Korinna Regular.otf') format('opentype');
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}

/* ============================================
   Kuldvillak Design Tokens (CSS Variables)
   ============================================ */

:root {
	/* Colors - New Figma Design (these are overridden by theme.svelte.ts) */
	--kv-blue: #003B9B;
	--kv-yellow: #FFAB00;
	--kv-text: #FFFFFF;
	--kv-background: #000000;
	--kv-green: #009900;
	--kv-red: #FF3333;
	--kv-black: #000000;
	--kv-white: #FFFFFF;
	
	/* Legacy alias for compatibility */
	--kv-golden: var(--kv-yellow);

	/* Fonts */
	--kv-font-title: 'Swiss 921', sans-serif;
	--kv-font-body: 'Swiss 921', sans-serif;
	--kv-font-price: 'Bebas Neue', sans-serif;
	--kv-font-question: 'ITC Korinna', serif;
	/* Legacy alias */
	--kv-font-button: var(--kv-font-body);
	--kv-font-category: var(--kv-font-body);

	/* Shadows - New Figma Design */
	--kv-shadow-text: 6px 6px 4px rgba(0, 0, 0, 0.5);
	--kv-shadow-title: 6px 6px 4px rgba(0, 0, 0, 0.5);
	--kv-shadow-price: 8px 8px 4px rgba(0, 0, 0, 0.5), 0 4px 4px rgba(0, 0, 0, 0.25);
	--kv-shadow-button: 0 4px 4px rgba(0, 0, 0, 0.25), 8px 8px 4px rgba(0, 0, 0, 0.5);
	--kv-shadow-question: 6px 6px 4px rgba(0, 0, 0, 0.5);
	--kv-shadow-category: 6px 6px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Kuldvillak Typography Classes
   ============================================ */

/* Headings - Swiss 921 font, uppercase, with shadow */
.kv-h1 {
	font-family: var(--kv-font-body);
	font-size: 48px;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--kv-shadow-text);
}
.kv-h2 {
	font-family: var(--kv-font-body);
	font-size: 36px;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--kv-shadow-text);
}
.kv-h3 {
	font-family: var(--kv-font-body);
	font-size: 28px;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--kv-shadow-text);
}
.kv-h4 {
	font-family: var(--kv-font-body);
	font-size: 24px;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--kv-shadow-text);
}
.kv-h5 {
	font-family: var(--kv-font-body);
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--kv-shadow-text);
}
.kv-p {
	font-family: var(--kv-font-body);
	font-size: 16px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Title variant - for game logo text */
.kv-title {
	font-family: var(--kv-font-title);
	text-transform: uppercase;
	text-shadow: var(--kv-shadow-title);
}

/* Button text - standardized */
.kv-btn-text {
	font-family: var(--kv-font-body);
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
}
.kv-btn-text-sm {
	font-family: var(--kv-font-body);
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
}
.kv-btn-text-lg {
	font-family: var(--kv-font-body);
	font-size: 28px;
	line-height: 1;
	text-transform: uppercase;
}

/* Label text - for form labels and small UI text */
.kv-label {
	font-family: var(--kv-font-body);
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--kv-shadow-text);
}

/* ============================================
   Global Styles
   ============================================ */

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--kv-background);
}

body {
	font-family: var(--kv-font-button);
	font-size: 16px;
	color: var(--kv-text);
}
