/* Fonts */


/* Root Variables */
:root{

--background:0 0% 100%;
--foreground:255 52% 23%;

--card:240 20% 97%;
--card-foreground:255 52% 23%;

--popover:0 0% 100%;
--popover-foreground:255 52% 23%;

--primary:255 52% 23%;
--primary-foreground:0 0% 100%;

--secondary:178 48% 51%;
--secondary-foreground:0 0% 100%;

--muted:240 14% 95%;
--muted-foreground:255 20% 45%;

--accent:178 48% 51%;
--accent-foreground:0 0% 100%;

--border:255 15% 88%;
--input:255 15% 88%;
--ring:178 48% 51%;

--radius:0.5rem;

--gradient-primary:linear-gradient(135deg,hsl(255,52%,23%),hsl(255,52%,30%));
--gradient-accent:linear-gradient(135deg,hsl(178,48%,45%),hsl(178,48%,55%));

--shadow-card:0 4px 24px -4px hsl(255 52% 23% / 0.08);
--shadow-card-hover:0 12px 32px -8px hsl(255 52% 23% / 0.15);
--shadow-hero:0 20px 60px -15px hsl(255 52% 23% / 0.2);

}


/* Global border like: @apply border-border */
*{
border-color:hsl(var(--border));
}


/* Equivalent of Tailwind base body */
body{
background:hsl(var(--background));
color:hsl(var(--foreground));
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}




/* Utility from @layer utilities */
.text-gradient{
background:var(--gradient-accent);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}