/* 1a. Containers 




/* 1b. Colors */




/* 1c. Typography */


























/* 1d. Buttons */













/* 1e. Forms */









































/* 1f. Tables */













/* 1g. Website header */








/* 1h. Website footer */





@layer base {
				:root {
					/* Core Colors - Professional, accessible, modern */
					--background: 0 0% 98%;
					--foreground: 220 13% 13%;

					/* Cards & Surfaces */
					--card: 0 0% 100%;
					--card-foreground: 220 13% 13%;

					/* Interactive Elements */
					--popover: 0 0% 100%;
					--popover-foreground: 220 13% 13%;

					/* Primary Brand - Professional Blue */
					--primary: 217 91% 60%;
					--primary-foreground: 0 0% 100%;
					--primary-hover: 217 91% 55%;
					--primary-light: 217 91% 95%;

					/* Secondary Actions */
					--secondary: 220 13% 95%;
					--secondary-foreground: 220 13% 13%;
					--secondary-hover: 220 13% 90%;

					/* Muted Elements */
					--muted: 220 13% 95%;
					--muted-foreground: 220 9% 46%;

					/* Accent - Purple */
					--accent: 271 50% 32%;
					--accent-foreground: 0 0% 100%;
					--accent-light: 271 50% 95%;

					/* Status Colors */
					--success: 271 50% 32%;
					--success-foreground: 0 0% 100%;
					--success-light: 271 50% 95%;

					--warning: 38 92% 50%;
					--warning-foreground: 0 0% 100%;
					--warning-light: 38 92% 95%;

					--destructive: 0 84% 60%;
					--destructive-foreground: 0 0% 100%;
					--destructive-light: 0 84% 95%;

					/* Borders & Inputs */
					--border: 220 13% 91%;
					--input: 220 13% 91%;
					--ring: 217 91% 60%;

					/* Layout */
					--radius: 0.75rem;
					--radius-sm: 0.5rem;
					--radius-lg: 1rem;

					/* Gradients */
					--gradient-hero: linear-gradient(135deg, hsl(217 91% 60%), hsl(217 91% 70%));
					--gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(220 13% 99%));
					--gradient-accent: linear-gradient(135deg, hsl(271 50% 32%), hsl(271 50% 42%));

					/* Shadows */
					--shadow-sm: 0 1px 2px 0 hsl(220 13% 13% / 0.05);
					--shadow: 0 1px 3px 0 hsl(220 13% 13% / 0.1), 0 1px 2px -1px hsl(220 13% 13% / 0.1);
					--shadow-md: 0 4px 6px -1px hsl(220 13% 13% / 0.1), 0 2px 4px -2px hsl(220 13% 13% / 0.1);
					--shadow-lg: 0 10px 15px -3px hsl(220 13% 13% / 0.1), 0 4px 6px -4px hsl(220 13% 13% / 0.1);
					--shadow-xl: 0 20px 25px -5px hsl(220 13% 13% / 0.1), 0 8px 10px -6px hsl(220 13% 13% / 0.1);

					/* Animations */
					--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
					--transition-slow: 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: 220 13% 13%;
					--foreground: 0 0% 98%;

					--card: 220 13% 16%;
					--card-foreground: 0 0% 98%;

					--popover: 220 13% 16%;
					--popover-foreground: 0 0% 98%;

					--primary: 217 91% 60%;
					--primary-foreground: 0 0% 100%;
					--primary-hover: 217 91% 55%;
					--primary-light: 217 91% 25%;

					--secondary: 220 13% 20%;
					--secondary-foreground: 0 0% 98%;
					--secondary-hover: 220 13% 25%;

					--muted: 220 13% 20%;
					--muted-foreground: 220 9% 65%;

					--accent: 271 50% 42%;
					--accent-foreground: 0 0% 100%;
					--accent-light: 271 50% 25%;

					--success: 271 50% 42%;
					--success-foreground: 0 0% 100%;
					--success-light: 271 50% 25%;

					--warning: 38 92% 60%;
					--warning-foreground: 0 0% 100%;
					--warning-light: 38 92% 25%;

					--destructive: 0 84% 70%;
					--destructive-foreground: 0 0% 100%;
					--destructive-light: 0 84% 25%;

					--border: 220 13% 25%;
					--input: 220 13% 25%;
					--ring: 217 91% 60%;

					/* Dark mode gradients */
					--gradient-hero: linear-gradient(135deg, hsl(217 91% 50%), hsl(217 91% 60%));
					--gradient-card: linear-gradient(145deg, hsl(220 13% 16%), hsl(220 13% 18%));
					--gradient-accent: linear-gradient(135deg, hsl(271 50% 32%), hsl(271 50% 42%));

					--sidebar-background: 220 13% 13%;
					--sidebar-foreground: 0 0% 98%;
					--sidebar-primary: 217 91% 60%;
					--sidebar-primary-foreground: 0 0% 100%;
					--sidebar-accent: 220 13% 20%;
					--sidebar-accent-foreground: 0 0% 98%;
					--sidebar-border: 220 13% 25%;
					--sidebar-ring: 217 91% 60%;
				}
			}



/* -------------------------------------------------------------
 Custom CSS - Copy, replace colors and remove comment section 
 ---------------------------------------------------------------*/


/* 
@layer base {
  :root {

    --primary: 2 65% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 2 65% 50%;
    --primary-light: 2 65% 95%;


    --secondary: 142 70% 49%;
    --secondary-foreground: 0 0% 100%;
    --secondary-hover: 142 70% 44%;
    --secondary-light: 142 70% 95%;


    --accent: 0 0% 27%;
    --accent-foreground: 0 0% 100%;
    --accent-light: 0 0% 90%;


    --ring: 2 65% 55%;


    --gradient-hero: linear-gradient(135deg, hsl(2 65% 55%), hsl(2 65% 65%));
  }

  .dark {
    --primary: 2 65% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 2 65% 50%;
    --primary-light: 2 65% 25%;

    --secondary: 142 70% 49%;
    --secondary-foreground: 0 0% 100%;
    --secondary-hover: 142 70% 44%;
    --secondary-light: 142 70% 25%;


    --accent: 0 0% 27%;
    --accent-foreground: 0 0% 100%;
    --accent-light: 0 0% 20%;

    --ring: 2 65% 55%;
  }
}*/

*/