/**
 * React Prayer Widget - Required CSS
 *
 * IMPORTANT: You MUST import this file in your application for the package to work correctly.
 *
 * Usage in JavaScript/TypeScript:
 *   import "react-prayer-widget/styles.css";
 *
 * Usage in CSS:
 *   @import "react-prayer-widget/styles.css";
 *
 * This file includes:
 * - CSS variables for theming
 * - Font-face declarations for custom fonts
 * - All required styles for components
 */

/* CSS Variables */
:root {
	/* Updated to Islamic-themed dark color palette */
	--background: #1a1a1a;
	--foreground: #ffffff;
	--card: #111827;
	--card-foreground: #f9fafb;
	--popover: #111827;
	--popover-foreground: #ffffff;
	--primary: #0891b2;
	--primary-foreground: #ffffff;
	--secondary: #4b5563;
	--secondary-foreground: #f9fafb;
	--muted: #111827;
	--muted-foreground: #4b5563;
	--accent: #dc2626;
	--accent-foreground: #ffffff;
	--destructive: #dc2626;
	--destructive-foreground: #ffffff;
	--border: #4b5563;
	--input: #1f2937;
	--ring: #0891b2;
	--chart-1: #0891b2;
	--chart-2: #dc2626;
	--chart-3: #f59e0b;
	--chart-4: #4b5563;
	--chart-5: #ffffff;
	--radius: 0.5rem;
	--sidebar: #111827;
	--sidebar-foreground: #f9fafb;
	--sidebar-primary: #0891b2;
	--sidebar-primary-foreground: #ffffff;
	--sidebar-accent: #dc2626;
	--sidebar-accent-foreground: #ffffff;
	--sidebar-border: #4b5563;
	--sidebar-ring: #0891b2;
	/* Prayer text color tokens */
	--prayer-name-color: var(--foreground);
	--prayer-time-color: var(--foreground);
	--prayer-countdown-color: var(--muted-foreground);
	/* Prayer card height tokens */
	--prayer-card-h-next-xs: 2.25rem;
	--prayer-card-h-next-sm: 2.5rem;
	--prayer-card-h-next-md: 2.75rem;
	--prayer-card-h-next-lg: 3.25rem;
	--prayer-card-h-item-xs: 2rem;
	--prayer-card-h-item-sm: 2.25rem;
	--prayer-card-h-item-md: 2.5rem;
	--prayer-card-h-item-lg: 3rem;
}

.dark {
	/* Kept same values for consistent dark theme */
	--background: #1a1a1a;
	--foreground: #ffffff;
	--card: #111827;
	--card-foreground: #f9fafb;
	--popover: #111827;
	--popover-foreground: #ffffff;
	--primary: #0891b2;
	--primary-foreground: #ffffff;
	--secondary: #4b5563;
	--secondary-foreground: #f9fafb;
	--muted: #111827;
	--muted-foreground: #4b5563;
	--accent: #dc2626;
	--accent-foreground: #ffffff;
	--destructive: #dc2626;
	--destructive-foreground: #ffffff;
	--border: #4b5563;
	--input: #1f2937;
	--ring: #0891b2;
	--chart-1: #0891b2;
	--chart-2: #dc2626;
	--chart-3: #f59e0b;
	--chart-4: #4b5563;
	--chart-5: #ffffff;
	--sidebar: #111827;
	--sidebar-foreground: #f9fafb;
	--sidebar-primary: #0891b2;
	--sidebar-primary-foreground: #ffffff;
	--sidebar-accent: #dc2626;
	--sidebar-accent-foreground: #ffffff;
	--sidebar-border: #4b5563;
	--sidebar-ring: #0891b2;
	/* Prayer text color tokens */
	--prayer-name-color: var(--foreground);
	--prayer-time-color: var(--foreground);
	--prayer-countdown-color: var(--muted-foreground);
	/* Keep same height tokens in dark */
	--prayer-card-h-next-xs: 2.25rem;
	--prayer-card-h-next-sm: 2.5rem;
	--prayer-card-h-next-md: 2.75rem;
	--prayer-card-h-next-lg: 3.25rem;
	--prayer-card-h-item-xs: 2rem;
	--prayer-card-h-item-sm: 2.25rem;
	--prayer-card-h-item-md: 2.5rem;
	--prayer-card-h-item-lg: 3rem;
}

/* Font-face declarations - fonts are loaded from package's public folder */
/* Note: For Next.js, you may need to copy fonts to your public folder or configure asset serving */
@font-face {
	font-family: "Amiri";
	src: url("/fonts/AmiriRegular.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "AmiriBold";
	src: url("/fonts/AmiriBold.woff2") format("woff2");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Andalus";
	src: url("/fonts/Andalus.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "BaradaReqa";
	src: url("/fonts/BaradaReqa.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "FodaFreeFont";
	src: url("/fonts/FodaFreeFont.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "FreeMono";
	src: url("/fonts/FreeMono.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "FreeMonoBold";
	src: url("/fonts/FreeMonoBold.woff2") format("woff2");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "FreeSans";
	src: url("/fonts/FreeSans.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "FreeSansBold";
	src: url("/fonts/FreeSansBold.woff2") format("woff2");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "FreeSerif";
	src: url("/fonts/FreeSerif.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "FreeSerifBold";
	src: url("/fonts/FreeSerifBold.woff2") format("woff2");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "HSNOmar";
	src: url("/fonts/HSNOmar.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "KFGQPCUthmanTaha";
	src: url("/fonts/KFGQPCUthmanTaha.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "KSARegular";
	src: url("/fonts/KSARegular.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "mohammadboldart1";
	src: url("/fonts/mohammadboldart1.woff2") format("woff2");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Monofonto";
	src: url("/fonts/Monofonto.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "NRTReg";
	src: url("/fonts/NRTReg.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "SFSultan-Black";
	src: url("/fonts/SFSultan-Black.woff2") format("woff2");
	font-display: swap;
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: "STC-Regular";
	src: url("/fonts/STC-Regular.woff2") format("woff2");
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}